用动态数据创建“L”形曲线

Question

我想画一个像下图这样的纯动态视图

我有两个数组列表

List<String> type and List<Float> level;

type 有 name(max,type1,type2, etc) 并且 level 有 marker value 类型

level 总是介于 0 到 1 之间，type 将是一个字符串，level 和 type 将来自服务器。我们有两个固定标签 - min 和 max。

假设我从服务器得到 .4 for min 和 .5 for max 那么所有 type（type1、type2、type3 等）将介于 .4 和 .5 之间。然后所有其余的 types 应该像弯曲的线一样排列，但是如果我们得到 min 的值是 .001 和 max 0.9 那么我们有足够的空间来显示其余的标签，在这种情况下我们不不需要用弯曲的线或标记来显示。但我不知道如何实现它或从哪里开始。任何帮助将不胜感激。在此先感谢大家。

如果上面的设计有点复杂，那么请给我一些参考或链接来实现下面的设计。

如果我能够做这个更简单的（上图），那将是非常好的。

我已经在 onCreate() 块中尝试了下面的代码。

ViewTreeObserver viewTreeObserver = viewbar.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
    viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @SuppressLint({ "NewApi", "ResourceAsColor" })
        @Override
        public void onGlobalLayout() {
            viewbar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            viewWidth = viewbar.getWidth();
            viewHeight = viewbar.getHeight();

            DefineType definetype = new DefineType();   
            float maxvalue = Collections.max(definetype.frameCalLevels);
            float minvalue = Collections.min(definetype.frameCalLevels);
            min.setText(definetype.frameCalType.get(0).toString());
            max.setText(definetype.frameCalType.get(4).toString());
            float density = getApplicationContext().getResources().getDisplayMetrics().density;
            int[] posXY = new int[2];
            viewbar.getLocationOnScreen(posXY);
            int x = posXY[0];         
            int y = posXY[1];       

            DrawView drawView;
            drawView = new DrawView(MainActivity.this, x, y,density);
            //drawView.setBackgroundColor(Color.WHITE);

            drawView.setX((float)((x*density/160))+viewWidth+180);
            drawView.setX((float) ((float)((y*density/160))));

            drawView.invalidate();
            ll.addView(drawView);    

        }
    });

}  

下面是我绘制视图的内部类

class   DrawView extends View {
        Paint paint = new Paint();
        float mx,  my,  mdensity;
        Paint mBGPaint, mTXTPaint,mLINEPaint,mBRDPaint;
        public DrawView(Context context, float x, float y, float density) {
            super(context);
            paint.setColor(Color.RED);
            paint.setStrokeWidth(8);
            paint.setStyle(Paint.Style.STROKE);         

            mx = x;
            my = y;         
            mdensity = density;
        }
        @Override
        public void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            init();

            mLINEPaint.setStrokeWidth(8);

            //draw rect
            canvas.drawRect(100,100,200,200,mBGPaint);
            //draw rect border
            canvas.drawRect(100,100,200,200,mBRDPaint);
            //draw text
            canvas.drawText("min", 250, 460, mTXTPaint);
            //draw line
            canvas.drawLine(50, 150, 100, 150, mLINEPaint);

        }
        @SuppressLint("ResourceAsColor")
        public void init() {

            //rectangle background
            mBGPaint = new Paint();
            mBGPaint.setColor(0xFF0000FF);

            //your text
            mTXTPaint = new Paint();
            mTXTPaint.setColor(android.R.color.holo_blue_light);

            //your line
            mLINEPaint = new Paint();
            mLINEPaint.setColor(0xFFFF00FF);

            //rectangle border
            mBRDPaint = new Paint();
            mBRDPaint.setStyle(Paint.Style.STROKE);
            mBRDPaint.setStrokeWidth(10);
            mBRDPaint.setColor(0xFFFFFF00);
        }
    }

我的 XML 设计如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:id="@+id/ll">

    <View
        android:id="@+id/view"
        android:layout_width="70dp"
        android:layout_height="300dp"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="10dp"
        android:orientation="vertical"
        android:background="@drawable/rect" >
    </View>


</LinearLayout>

通过上面的代码，我在屏幕下方，所以它不合适。我在这里缺少什么。？请建议我如何将我们的抽屉向上移动？

Answer 1

这真是一个大问题。而且我认为没有人可以给你一个明确的答案。

我的建议是婴儿步骤：

1-在屏幕上放一个按钮并尝试创建3条线以获得弯曲的线条效果。通过使用起点（开始时您可以从屏幕中间开始）和终点（按钮最终目的地）计算弯曲线的所有 3 部分的长度

2- 如果您知道按钮的开始和结束位置，则可以轻松计算 line2 长度。对于第 1 行和第 3 行，您还需要为您的计算函数传递另一个参数（顺便说一句，您应该拥有它）从哪里开始弯曲。

完成此任务后，还有更多。 3- 然后，您应该在屏幕上放置 5 个按钮，并使用您之前定义的功能组装它们的熟线。 4-根据你的起点和终点，你的熟线应该上下。 5- 现在您可以创建熟线。是时候为真正的任务进行计算了。

6- 您应该计算所需的可用空间，并以某种方式确定按钮是否适合。如果不适合，则应将按钮放在第二条通道中，然后使用神奇的 L 绘制方法将它们连接到计算的起始位置（您应该已经计算了每个按钮的起点的 y 位置。）

继续。试着把你的任务分成小块，然后试着轻松地完成每一个任务，而不会感到头疼。

Answer 2

在这种情况下，我会使用带有自定义 onDraw 的自定义 View：

也就是说，

public class myView extended View {
public myView(Context ctx) {
super(ctx);
init();
}
public void init(){
paint = new Paint();
}
@Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
//loop here
      canvas.drawLine(0, 0, 20, 20, paint);//your some positions.
canvas.drawRect(....)
canvas.drawText(...)
    }
}

编辑 对于您的第二个示例：

init() {

//rectangle background
mBGPaint = new Paint();
mBGPaint.setColor(0xFF0000FF);

//your text
mTXTPaint = new Paint();
mTXTPaint.setColor(0xFFFFFFFF);

//your line
mLINEPaint = new Paint();
mLINEPaint.setColor(0xFFFF00FF);

//rectangle border
mBRDPaint = new Paint();
mBRDPaint.setStyle(Style.STROKE);
mBRDPaint.setStrokeWidth(10);
mBRDPaint.setColor(0xFFFFFF00);
}

onDraw(...) {

//draw rect
canvas.drawRect(100,100,200,200,mBGPaint);
//draw rect border
canvas.drawRect(100,100,200,200,mBRDPaint);
//draw text
canvas.drawRect(100,100,mTXTPaint);
//draw line
canvas.drawLine(50, 150, 100, 150, mLINEPaint);
}