Question

I am trying to build a simple app that will show a bidimensional, scrollable matrix of square tiles. Imagine a 2D Rubick’s Cube, where you can choose to scroll a single row or a single column as if it was a ring.

I’ve placed a RelativeLayout inside the main view, and placed all the tiles of the matrix inside of it, through a custom implementation of the ImageView component. I set the exact position of the single tile manipulating its RelativeLayout.LayoutParams value:

RelativeLayout rl = ...;
TileView tile = ...;
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(size, size);
rlp.setMargins(left, top, 0, 0);
rl.addView(tile, rlp);

I really do not like this approach since I would like to change the top and left parameters of the tile instead of the margins, but that’s the best I have been able to do.

I attached a listener to each tile to handle the dragging of the relative row or column, depending on the direction of the dragging event. Everything seems to work quite fine, except for a few problems:

1. When I scroll a row to the right, the last tile on the right margin will progressively shrink as if it was trying to fill the remaining space, and will eventually disappear.
2. When I then scroll back to the left the disappeared tiles will not reappear.

Furthermore, I still have to figure what is the best way to give the user the illusion of an infinite row/column. I think I should replicate all the tiles on both sides of each row/column, probably only when that row/column is being scrolled.

I am asking you for help just to understand what you think is the best way to realize this interface, since I think I am messing up with the code. If you need any more details, just ask me.

Thank you!

Answer 1

If I were doing this, my inclination would be to go at it at a lower level than you are. I’d use a SurfaceView as the main View and render the tiles with Canvas.drawBitmap(). It probably sounds like more work, but I think that it’s the right way to do what you’re trying to do, and that ultimately you’ll be happier with the results.

To address your two problems:

1. The version of drawBitmap() I linked to lets you specify the subset of the Bitmap to draw, so you can clip the tile rather than shrinking it as it goes off the screen.
2. You’ll be responsible for determining what goes where (and drawing it there), so your data structure representing the tile matrix needs to represent off-screen tiles as well.