Drawing lines between views in a TableLayout
Posted
by
RiThBo
on Stack Overflow
See other posts from Stack Overflow
or by RiThBo
Published on 2013-10-13T16:28:12Z
Indexed on
2013/10/18
15:55 UTC
Read the original article
Hit count: 441
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.
© Stack Overflow or respective owner