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

时间:2013-10-13 16:28:13

标签: android android-canvas android-view

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

如果我有两个视图,当触摸其中一个视图时,如何在它们之间绘制(直线)?该线条需要是动态的,因此它可以跟随手指,直到它到达第二个视图“锁定”。因此,当触摸view1时,会绘制一条直线,然后跟随手指直到它到达view2。

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

非常感谢任何建议/代码/清晰度!

以下是一些代码:

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

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

}

这是我的活动。

公共类游戏扩展活动{

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中。

1 个答案:

答案 0 :(得分:0)

因此,您要采取的以下流程是识别用户何时放下手指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中,如果他们在另一个视图中,请执行您必须执行的操作。如果他们不是那么你就擦掉了这条线,并假装它从未发生过。