Basics of layout
Hi, I am getting along alright with the core API functions now with Titanium, but haven't managed to mentally get my head around how to layout/style/theme pages.
For example, I want a set of 4 tabs (which I have made using tabs and windows), in one of these tabs I want 2 text fields, 2 scroll bars and an animated image (which changes depending on scrollbar positions).
So as a CSS developer, I would think absolute positioning, but I don't quite understand whether to put elements in views, or if the elements are views, how to initialise absolute positioning (as opposed to relative, or whatever the default is) and get it looking how I want.
Does anyone know of a good link(s) to go over this? I found a general android one (below) but was hoping for more focus on Titanium, as I cant find the corresponding classes, and fear it's because I just don't get it. A diagram may be awesome.
(http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts)
Thankyou,
Dan
nb.
I have uploaded a layout for what I would like it to look out. Not sure what is views, and even if vertical scrollbars are possible
(http://www.retrobadger.net/layout.gif)
3 Answers
-
Accepted Answer
Here's how I see these elements in 3 different perspectives…
WINDOWS
- In Titanium, apps should have at least 1 window.
- In HTML, these would be the pages.
- In Flash, these would be the scenes.
VIEWS
- In Titanium, visual objects are essentially views added to the window. Views can also be added into other views.
- In HTML, these would be like the DIVs in general.
- In Flash, these would be display objects, specifically display object containers
POSITIONING
- In Titanium, all views have left, right, top, bottom properties. They are always relative to its parent container.
- In CSS, its absolute positioning inside a relative positioning.
- In Flash, its the same as Titanium's.
LAYOUT
- In Titanium, windows and views have layout property. The known value to me is 'vertical' (tested 'horizontal', does not work). Elements are laid out from top to bottom.
- In CSS, my guess is all elements have clear:both property.
- In Flash/Flex, it behaves like a VBox or the layout='vertical' in the Application Container.
MOCKUP
Regarding your mockup, I see you can use a toolbar with 4 buttons placed on top, 2 labels for the time, 2 sliders for your scrollbars, and 1 view as the container of whatever graphics you want to place inside.
Cheers!
-
Actually, the default is closest to "absolute positioning", as you might think about it. In the best supported case, you would indicate the width and height of the widget you are building in absolute pixel terms, and set the left and top offset of the widget relative to the border of its enclosing container (a Window or View, for example). These are attributes you can set (and change) on the widget itself.
The biggest problem is that the documentation often does not SAY that these are valid attributes - see the KitchenSink for many examples of this, however.
The alternative is "vertical positioning" with a width and height of "auto". This lets the titanium libraries compute the positioning of the objects. Usually. Kinda. Sorta. But since it doesn't sound like this is what you want - I wouldn't worry about it.
I am not familiar with Android's widget set, nor how they map into Titanium, but I would start with the Kitchen Sink example to get a feel for what widgets are available, and then look at the source to see how they're implemented.
Hope this helps - good luck!
Allen -
Thankyou very much for your responses, they have been extremely helpful in getting my head around the elements better. Particularly it's comparisons to css and flash, I feel I can now get my head around how to add and position the elements within my app.
Thankyou both,
Dan