在 TableLayout 中的视图之间绘制线条

Question

首先 - 抱歉，如果您看到我删除的其他问题。我的问题有缺陷。这是一个更好的版本

如果我有两个视图，当其中一个被触摸时，如何在它们之间画一条（直线）？这条线需要是动态的，以便它可以跟随手指，直到它到达它“锁定”的第二个视图。因此，当触摸 view1 时，会绘制一条直线，然后沿着手指直到到达 view2。

我创建了一个扩展视图的LineView 类，但我不知道如何继续。我阅读了一些教程，但没有一个显示如何做到这一点。我想我需要获取两个视图的坐标，然后创建一个path，它在MotionEvent 上“更新”。我可以获取要在它们之间绘制一条线的视图的坐标和 ID，但是我尝试在它们之间绘制的线要么超出它，要么这条线没有超过视图的宽度和高度。

任何建议/代码/清晰将不胜感激！

这里有一些代码：

我的布局。我想在 TableLayout 中包含的两个视图之间画一条线。#

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_game_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TableLayout
        android:layout_marginTop="35dp"
        android:layout_marginBottom="35dp"
        android:id="@+id/tableLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <TableRow
            android:id="@+id/table_row_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <com.example.view.DotView
                android:id="@+id/game_dot_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

           <com.example.view.DotView
                android:id="@+id/game_dot_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

            <com.example.view.DotView
                android:id="@+id/game_dot_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />


        </TableRow>

        <TableRow
            android:id="@+id/table_row_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <com.example.view.DotView
                android:id="@+id/game_dot_7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

           <com.example.view.DotView
                android:id="@+id/game_dot_8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

            <com.example.dotte.DotView
                android:id="@+id/game_dot_9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

        </TableRow>
  </TableLayout>

</RelativeLayout>

这是我的 LineView 课程。我用它来尝试绘制点之间的实际线。

public class LineView extends View {

    Paint paint = new Paint();

    float startingX, startingY, endingX, endingY;

    public LineView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub

        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(10);

    }

    public void setPoints(float startX, float startY, float endX, float endY) {

        startingX = startX;
        startingY = startY;
        endingX = endX;
        endingY = endY;
        invalidate();

    }

    @Override
    public void onDraw(Canvas canvas) {
        canvas.drawLine(startingX, startingY, endingX, endingY, paint);
    }

}

这是我的活动。

公共类 Game 扩展 Activity {

DotView dv1, dv2, dv3, dv4, dv5, dv6, dv7;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_game);

    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LOW_PROFILE);

    findDotIds();

    RelativeLayout rl = (RelativeLayout) findViewById(R.id.activity_game_relative_layout);
    LineView lv = new LineView(this);
    lv.setPoints(dv1.getLeft(), dv1.getTop(), dv7.getLeft(), dv7.getTop());
    rl.addView(lv);

     // TODO: Get the coordinates of all the dots in the TableLayout. Use view tree observer.   



}

private void findDotIds() {

    // TODO Auto-generated method stub
    dv1 = (DotView) findViewById(R.id.game_dot_1);
    dv2 = (DotView) findViewById(R.id.game_dot_2);
    dv3 = (DotView) findViewById(R.id.game_dot_3);
    dv4 = (DotView) findViewById(R.id.game_dot_4);
    dv5 = (DotView) findViewById(R.id.game_dot_5);
    dv6 = (DotView) findViewById(R.id.game_dot_6);
    dv7 = (DotView) findViewById(R.id.game_dot_7);

}

}

我想在它们之间画线的视图在 TableLayout 中。

Answer 1

因此，您希望采取的以下过程是识别用户何时放下手指Motion_Event.ACTION_DOWN、沿屏幕移动Motion_Event.ACTION_MOVE 并向上抬起手指Motion_Event.ACTION_MOVE。

如需了解以上详情see the accepted answer here

您想要做的是，如果在Motion_Event.ACTION_DOWN 中用户位于视图内 (see here for more info)，则开始绘制一条线。

然后在Motion_Event.ACTION_MOVE 中继续画线直到它们停止。

在Motion_Event.ACTION_UP 中，如果他们在另一个视图中，请执行您必须执行的操作。如果他们不是，那么你删除这条线并假装它从未发生过。