android - 用动态数据创建 "L"形状曲线

Question

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

我有两个arraylist

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

type 具有名称(max、type1、type2 等)并且level 具有标记值 类型

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

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

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

如果我能做这个更简单的(上图)，那就太好了。

我在 onCreate() block 中尝试了以下代码。

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);    

        }
    });

}  

下面是我绘制 View 的内部类

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

在这种情况下，我会使用带有自定义 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);
}