I am trying to implement a custom view inside of a HorizontalScrollView parent. The custom view repeatedly draws a line to its Canvas based on timing from a Handler. Right now the custom view fills the width of the screen (limited by 548dp height) and I want the line to be able to extend beyond what is visible. Furthermore, I want to allow the user to then be able to horizontally scroll to see more of the line. I tried to set the width of the HorizontalScrollView to 1500dp (which is much larger than the width of the screen) and then I tried to scroll horizontal, but it didn’t move. It would also be ideal if the view would scroll with the line as it grew past the visible part of the screen.
I am developing on an ASUS Transformer with Honeycomb.
Here’s the relevant part of the layout I’m using:
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1500dp"
android:layout_height="548dp"
android:fillViewport="true" >
<maavapp.layout.CustomDraw
android:id="@+id/custom_draw"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</maavapp.layout.CustomDraw>
</HorizontalScrollView>
And here is the code for the CustomDraw class:
public class CustomDraw extends View {
private static int mSelected;
private ArrayList<Coordinate> measure1;
private ArrayList<Coordinate> measure2;
private ArrayList<Coordinate> measure3;
private boolean north = false, east = true, south = true, west = false;
private DrawHandler dh = new DrawHandler();
private boolean draw = true;
private int width;
private int height;
private int m2;
public CustomDraw(Context context) {
super(context);
init();
}
public CustomDraw(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomDraw(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public void init() {
measure1 = new ArrayList<Coordinate>();
measure2 = new ArrayList<Coordinate>();
measure3 = new ArrayList<Coordinate>();
mSelected = Constants.MEASURE_1;
width = 0;
height = 0;
m2 = 0;
}
public void setMeasure(int measure) {
mSelected = measure;
}
public void toggleDraw() {
draw = !draw;
if(draw) {
updateLine();
}
}
public boolean isDrawing() {
return draw;
}
public void updateLine() {
// grab new coordinates for each measure
/*new_coord(measure1);
new_coord(measure2);
new_coord(measure3);*/
if(measure1.isEmpty() && measure2.isEmpty() && measure3.isEmpty()) {
measure1.add(new Coordinate(0, 0));
measure2.add(new Coordinate(0, 0));
measure3.add(new Coordinate(0, 0));
} else {
Coordinate last_coord = measure1.get(measure1.size() - 1);
measure2.add(new Coordinate(++m2, 25));
/*if(last_coord.x >= width) {
east = false;
west = true;
} else if(last_coord.x <= 0) {
east = true;
west = false;
}*/
if(last_coord.y >= height) {
south = false;
north = true;
} else if(last_coord.y <= 0) {
south = true;
north = false;
}
Log.d("MAAV", "last_coord.x + 3: " + (last_coord.x + 3));
Log.d("MAAV", "last_coord.y + 3: " + (last_coord.y + 3));
if(south && east) {
measure1.add(new Coordinate(last_coord.x + 3, last_coord.y + 3));
} else if(south && west) {
measure1.add(new Coordinate(last_coord.x - 3, last_coord.y + 3));
} else if(north && east) {
measure1.add(new Coordinate(last_coord.x + 3, last_coord.y - 3));
} else if(north && west) {
measure1.add(new Coordinate(last_coord.x - 3, last_coord.y - 3));
}
}
if(draw) {
dh.sleep(10);
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
this.width = w;
this.height = h;
super.onSizeChanged(w, h, oldw, oldh);
}
@Override
public void onDraw(Canvas c) {
super.onDraw(c);
Paint p = new Paint();
p.setStyle(Paint.Style.FILL);
p.setColor(Color.WHITE);
c.drawPaint(p);
p.setColor(Color.BLACK);
switch(mSelected) {
case Constants.MEASURE_1:
for(int i = 0; i < measure1.size(); i++) {
Coordinate coord = measure1.get(i);
Log.d("MAAV", "drawing coord.x, coord.y: " + (coord.x) + ", " + (coord.y));
c.drawRect(coord.x, coord.y, coord.x + 3, coord.y + 3, p);
}
break;
case Constants.MEASURE_2:
for(int i = 0; i < measure2.size(); i++) {
Coordinate coord = measure2.get(i);
c.drawRect(coord.x, coord.y, coord.x + 3, coord.y + 3, p);
}
break;
case Constants.MEASURE_3:
for(int i = 0; i < measure2.size(); i++) {
Coordinate coord = measure2.get(i);
c.drawRect(coord.x, coord.y, coord.x + 3, coord.y + 3, p);
}
break;
}
}
class DrawHandler extends Handler {
@Override
public void handleMessage(Message msg) {
CustomDraw.this.updateLine();
CustomDraw.this.invalidate();
}
public void sleep(long delayMillis) {
this.removeMessages(0);
sendMessageDelayed(obtainMessage(0), delayMillis);
}
}
}
Thanks for any help!
For anyone that’s curious, I figured out the answer for my situation. Hopefully what I outline below could be helpful to you too.
In order to get the custom View to scroll, I had to add a LinearLayout wrapper around my custom View. Not 100% sure why.
Also, though I declare a fixed size for my custom View (in the xml file below), I’m able to update it dynamically in my code using:
where “width” and “height” are the width and height of the custom View. Again, not sure why I have to say “new LinearLayout.LayoutParams(…);” but that’s what seems to work.
Here’s the xml I’m using:
And here’s the relevant parts of the custom class code I’m using: