Drawing lines between views in a TableLayout
- by RiThBo
Firstly - sorry if you saw my other question which I deleted. My question was flawed. Here is a better version
If I have two views, how do I draw a (straight) line between them when one of them is touched? The line needs to be dynamic so it can follow the finger until it reaches the second view where it "locks on". So, when view1 is touched a straight line is drawn which then follows the finger until it reaches view2.
I created a LineView class that extends view, but I don't how to proceed. I read some tutorials but none show how to do this. I think I need to get the coordinates of both view, and then create a path which "updates" on MotionEvent. I can get the coordinates and the ids of the views I want to draw a line between, but the line that I try to draw between them either goes above it, or the line does not reach past the width and height of the view.
Any advice/code/clarity would be much appreciated!
Here is some code:
My layout. I want to draw a line between two views contained in 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>
This is my LineView class. I use this to try and draw the actual line between the points.
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);
}
}
And this is my Activity.
public class Game extends 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);
}
}
The views I want to draw lines between are in the TableLayout.
