Создать изогнутую линию в форме буквы "L" с динамическими данными

Question

Я хочу нарисовать чистый динамический вид, как показано ниже

У меня два архива

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

тип имеет имя(max,type1,type2 и т. д.), а уровень имеет значение маркера типа

Уровень всегда будет лежать в диапазоне от 0 до 1, а тип будет строкой, а значение уровня и типа будет поступать с сервера. У нас есть две фиксированные метки - мин и макс.

Предположим, что я получил 0,4 для минимума и 0,5 для максимального от сервера, тогда все типы(type1, type2, type3 и т. Д.) Будут лежать между.4 и.5 . Тогда все остальные типы должны быть расположены как кривая линия, но если мы получим значение для min равное.001, а для max.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

В этом случае я бы использовал пользовательский View с пользовательским 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- Если вы знаете начальную и конечную позиции кнопки, вы можете легко рассчитать длину строки 2. Для line1 и line3 вам также нужно передать другой параметр для вашей функции вычисления (кстати, как он вам нужен), где начинать обманывать.

После того, как вы выполните эту задачу, есть еще. 3- Затем вы должны разместить 5 кнопок на экране и собрать их готовые линии, используя функцию, которую вы определили ранее. 4- В соответствии с вашей начальной и конечной точкой ваша приготовленная линия должна идти вверх и вниз. 5- Теперь вы можете создавать готовые линии. Пора рассчитывать на реальную задачу.

6. Вы должны рассчитать необходимое пространство и каким-то образом выяснить, подойдут ли кнопки. Если нет, поместите кнопку во вторую полосу, а затем используйте свой волшебный метод L draw, чтобы соединить их с рассчитанной стартовой позицией (вы должны иметь вычислили y координаты стартовых точек для каждой кнопки.)

Это продолжается. Просто попробуйте разбить свое задание на маленькие кусочки, а затем попробуйте выполнить каждое из них легко, без головной боли.