Question

我想绘制一个纯动态视图，如下面的图像

我有两个arraylist

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

类型具有名称（max，type1，type2等），级别具有标记值类型

级别将始终位于0到1之间，类型将是一个字符串，值级别和类型将来自服务器。我们有两个固定标签 - min 和 max 。

假设我得到.4表示最小值，而.5表示最大值来自服务器，那么所有类型（type1，type2，type3等）将介于.4和.5之间。然后其他所有类型应该像弯曲的线一样排列，但是如果我们得到min的值是.001和最大.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

在这种情况下，我会使用自定义视图与自定义onDraw：

即，

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

Answer 2

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

我的建议是小步骤：

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

2-如果您知道按钮的开始和结束位置，则可以轻松计算line2长度。对于line1和line3，你还需要为你的计算函数传递另一个参数（按照你应该拥有它的方式）从哪里开始弯曲。

完成此任务后，还有更多。 3-然后，您应该在屏幕上放置5个按钮，并使用您之前定义的功能组装其煮熟的线条。 4-根据您的起点和终点，您的熟线应该上下移动。 5-现在你有能力创造煮熟的线条。现在是计算真实任务的时候了。

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

继续。只是尝试将你的作业分成小部分，然后尝试轻松完成每一部分而不会有任何麻烦。

创建＆＃34; L＆＃34;形状曲线与动态数据

2 个答案: