I'm trying to make a view/layout that shows a periodic table (chemical elements), as can be seen in the following picture:
However I'm not sure how to tackle the problem of displaying this table. There are some obvious requirements:
- The user should be able to zoom in and out on the table (pinch to zoom)
- The user should be able to move the table (horizontal, vertical, diagonal... scroll)
- Each rectangle representing a chemical element should be clickable (click will display detailed information either as a pop-up or in a new activity).
- The element rectangles should be flexible and easy to maintain: I want to be able to change background colors dynamically. Also the name of the element will be dislpayed in the block, but when zoomed out I should be able to hide it, because it won't be readable.
- Of course, all interaction should be as efficient and fluid as possible.
At first I thought to combine a ScrollView and a HorizontalScrollView to get the scrolling functionality and implement a zooming action on it. Inside I would put a TableLayout where each cell contains a Linearlayout (element rectangle).
However, I seam to remember that embedding a HorizontalScrollView inside a ScrollView is discouraged (but I can't find any reference on this). Also I'm wondering if instantiating at least 118 Linearlayouts (chemical elements) and put them in a tablelayout will use too many resources.
What, in your experience, would be the "best" approach for this problem? Is there any way to do it efficiently with existing layouts and widgets? Or should I implement my own custom view/surfaceview (with or without OpenGL)?
0 comments:
Post a Comment