соединительные элементы с нарисованной линией - PullRequest
Новая
       76

соединительные элементы с нарисованной линией

0 голосов
/ 02 октября 2018

Я пытаюсь создать вид, который позволит пользователю соединять некоторые элементы с нарисованной линией.

Например, на изображении есть пара TextViews, пользователь рисует линию от одного к другому, и еслион подключен правильно (от text1 до text3), линия останется.enter image description here

Сейчас я реализовал пользовательский вид, он рисует линию, которая следует за вашим пальцем: 

public class FingerLineView extends View {
    private final Paint mPaint;
    private float startX;
    private float startY;
    private float endX;
    private float endY;

    public FingerLineView(Context context) {
        this(context, null);
    }

    public FingerLineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.STROKE);
        mPaint.setColor(Color.RED);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(startX, startY, endX, endY, mPaint);
    }

    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                startY = event.getY();
                // Set the end to prevent initial jump 
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
        }
        return true;
    }
}

Вот как это работает:

Gif

Но я не знаю, как правильно «связать» его с такими элементами вида, как TextView.

Должен ли я это сделатьс полностью настраиваемым видом или есть несколько лучших способов сделать это?

1 Ответ

0 голосов
/ 02 октября 2018

Холст более мощный, чем вы, возможно, знаете.;)
Используйте его drawText -метод.Отличная производительность, простота в использовании и возможность настройки на 100%.

РЕДАКТИРОВАТЬ: Вот небольшой пример кода, расчет просто фиктивный, вы должны расположить его там, где вам это нужно: 

public class FingerLineView extends View {
private final Paint mPaint;
private final Paint mPaintText;
private float startX;
private float startY;
private float endX;
private float endY;

public FingerLineView(Context context) {
    this(context, null);
}

public FingerLineView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(Color.RED);
    mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintText.setColor(Color.BLACK);
    mPaintText.setTextSize(30);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawLine(startX, startY, endX, endY, mPaint);
    canvas.drawText("TEXT", startX - mPaintText.measureText("TEXT")/2, startY - 30, mPaintText);
    canvas.drawText("TEXT", endX - mPaintText.measureText("TEXT")/2, endY - 30, mPaintText);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = event.getX();
            startY = event.getY();
            // Set the end to prevent initial jump
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
    }
    return true;
}

}

...