如何在Android中用一条线连接两个按钮？

Question

I want to connect two opposite radiobuttons or normal Buttons with a line in Canvas like this: image

I have the FingerLine Class to draw the red line and in the layout I have 3 columns (RecyclerView,FingerLine,RecyclerView). I want to develop an application to match two image with lines.

Currently what I do is draw in the middle but I would like the drawing line to go from one button to another I don't know how to do it.

public class FingerLine extends View {
    private final Paint mPaint;
    private float startX;
    private float startY;
    private float endX;
    private float endY;
    float joinX, joinY = 0;
    ArrayList<Line> lines = new ArrayList<Line>();

    class Line {
        float startX, startY, stopX, stopY;

        public Line(float startX, float startY, float stopX, float stopY) {
            this.startX = startX;
            this.startY = startY;
            this.stopX = stopX;
            this.stopY = stopY;
        }
        public Line(float startX, float startY) { // for convenience
            this(startX, startY, startX, startY);
        }
    }

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

    public FingerLine(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);
        for (Line l : lines) {
            canvas.drawLine(l.startX, l.startY, l.stopX, l.stopY, mPaint);
        }
    }
    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (joinX <= 0 || joinY <= 0) {
                    lines.add(new Line(event.getX(), event.getY()));
                }else{
                    lines.add(new Line(event.getX(), event.getY()));
                }
                break;
            case MotionEvent.ACTION_MOVE:
               if(lines.size() > 0) {
                   Line current = lines.get(lines.size() - 1);
                   current.stopX = event.getX();
                   current.stopY = event.getY();
                   invalidate();
                   break;
               }
            case (MotionEvent.ACTION_CANCEL):
                break;
            case (MotionEvent.ACTION_OUTSIDE):
                break;
            case MotionEvent.ACTION_UP:
                if(lines.size() > 0) {
                    Line current = lines.get(lines.size() - 1);
                    current.stopX = event.getX();
                    current.stopY = event.getY();
                    joinX = event.getX();
                    joinY = event.getY();
                    invalidate();
                    break;
                }
        }
        return true;
    }
}

Answer 1

I think for first you have to find an image of a line. then you have to create 6(or how many you want) imageview s with the image of line and then make them invisible with android:visibility = "invisible" . then you have to find two checked radiobutton s in your activity.java and then set align_right and align_left to the checked radiobutton s for your imageview in activity.java and then make it visible.