用画线连接元素

Question

我正在尝试制作一些视图，允许用户将某些元素与画线连接起来。

例如在图像上有几个TextViews，用户从一个到另一个画线，如果它连接正确（text1到text3），线将保留。

现在我已经实现了自定义视图，它画线，跟随你的手指：

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

这就是它的工作原理：

但我不知道如何正确地将其与 TextView 等视图元素“连接”。

我应该使用完全自定义的视图还是有更好的方法来做到这一点？

Answer 1

画布比你想象的更强大。 ;)
使用它的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;
}

}