Best practices on screen positioning?
Hi All-
I recently discovered Titanium and have been incredibly impressed with the functionality I've played with so far in developing mobile apps - much much much easier than developing using the iPhone and Android SDKs, and the development paradigm is just so natural coming from the web world.
I have been wondering how layout is supposed to be handled, however. So far I've played around with positioning elements in what seems like CSS absolute positioning (left, top, width, height, etc.). This looks pretty good in the iphone emulator, but I'm concerned how this is going to look in the various screen sizes that Android has - are the coordinates absolute positions, or am I misunderstanding the concept?
An example of how this would come into play: I'd like to design a simple layout that looks like this:
- top image
- Scrollable content area with lots of text
- OK button
The idea is that the scrollable content area can scroll as much as the user wants but the OK button will always remain visible at the bottom of the screen. I laid this out using top values: 10, 50, and 410, and this looks great on the iphone emulator. But what will happen on Android screens of variable sizes - will I have a bunch of extra whitespace at the bottom of the screen on, say, a Droid?
What are best practices for these layouts?
thanks!
-simon
4 Answers
-
Hi Simon,
Where possible I try to use percentages. For example I have a background element that is always 40% of the screen ( height:'40%' ). This seems to work well for simple elements.
Please note you will want to listen for orientation change events and re-set your height/width percentages on that change event.
The other catch is you will still need to account for some of the Android edge cases. I've found it works ok on the Droid but, most likely smaller screens could result in overlapping.
-
You may also want to try to use the "layout: vertical" property to many of the view constructors and "height: auto" property on many content widget constructors. Check out the kitchen sink for some examples on their use, since the documentation is a little sparse on them still.
-
@Ben -
Thanks for the tips on using percentages - I hadn't seen those in the examples in Kitchen Sink, so I'll take a look for that.
@Allen-
I've tried to use height: 'auto' a number of times, but I've found it's a little inconsistent. For example, when I tried height: 'auto' for a View inside a ScrollView I found the view did not display the entire text. Thanks for the tip on layout: 'vertical', I haven't come across that one yet!
thanks
-simon
-
@Ben -
Thanks for the tips on using percentages - I hadn't seen those in the examples in Kitchen Sink, so I'll take a look for that.
@Allen-
I've tried to use height: 'auto' a number of times, but I've found it's a little inconsistent. For example, when I tried height: 'auto' for a View inside a ScrollView I found the view did not display the entire text. Thanks for the tip on layout: 'vertical', I haven't come across that one yet!
thanks
-simon