Understanding Titanium layouts enables you to position and group your views the way you want it. I’m not going to use heavy definitions here but I’ll to try to simply explain and demonstrate what Titanium Layouts are and how you can use them to your advantage.

Note: These layouts must be declared in container or group views. Just in case some of you don’t know that.

Vertical Layout

If a container, or group, view has a vertical layout, the contents stack up on one another.

<View layout="vertical">
   <View id="box50" height="80" width="80" borderColor="#cccccc"></View>
   <Label id="textHello">Hello</Label>
</View>

In the above code, #box50 and textHello stack up from top to bottom, respectively. In other words, they are stacked up vertically.

Horizontal Layout

Use a horizontal layout if you want the contents of a container to line up from left to right.

<View layout="horizontal">
  <Label id="textHi">Hi</Label>
  <View id="box50" height="50" width="50" borderColor="#cccccc"></View>
  <Label id="textHello">Hello</Label>
</View>

The contents should be lined next to each other from left, #textHi to right, #textHello.

Composite Layout

The composite layout helps when you have views that are layered on top of each other. Think of it like if one view should be on top of another view. Layering is not technically what’s going on when using composite layout, but you can definitely make a view container look like its contents are layered.

One example is using Wriststrap’s iOS Picker widget. The Picker slides up and down. Initally the Picker is all the way at the bottom of the device’s screen and only appears when called to slide-up. When it slides-up, it’s “layered” on top of a main view. If the Window (the container of the Picker widget) is not defined to have composite layout, the Picker will not slide-up or other wacky things may happen. (FYI: Window has composite layout by default, but Wriststrap instructions say you must declare the Window’s layout to be composite and the widget won’t actually work if you don’t explicitely define the Window’s layout property to composite).

Another example would be if you have a view that you want to stay put while a user scrolls a different view. This can give the impression that it’s layered on top of the view that scrolls.

<Window layout="composite">
   <View id="stayPutBar">
     <Label>"I'm staying put!</Label>
   </View>
   <ScrollView id="scrollView">
     <Label>ScrollView down here
     </Label>
   </ScrollView>
</Window>

The contents of the view having a composite layout can be positioned using its top, bottom, center, left or right.

Use them together

How do we use these layouts together? We’ll have a container with a 1:2 ratio having a thumbnail to the left and details to the right. The details section has well details of course, that are laid out to be on top of each other.

Preview:

The code:

<Window class="container">
  <View id="stayPutBar">
    <Label>"I'm staying put!</Label>
  </View>
  <View class="example-container">
    <View class="thumbnail-container">
       <ImageView image="/appicon-72@2x.png"></ImageView>
    </View>
    <View class="details-container">
       <Label class="big-n-bold">A Title</Label>
       <Label class="point-one">Point One. It's first.</Label>
       <Label class="point-two">Point Two. Maybe.</Label>
    </View>
    </View>
</Window>

".container" : {
   layout: "composite", // by default so no need to add this
   backgroundColor: "#FFFFFF"
}
"#stayPutBar" : {
   height: '45dp',
   width: '100%',
   backgroundColor: "#649369"
}
".example-container" : {
   /* Image and Details
    * must be next to each
    * other */
   layout: "horizontal",
 
   width: '100%',
   height: '100dp',
   borderColor: '#ff0000'
}

/* Thumbnail side */
".thumbnail-container" : {
   width: Ti.UI.FILL,
   height: Ti.UI.FILL,
   borderColor: "#0000ff",
   width: '33%'
   
}

/* Details side */
".details-container" : {
   /* contents will be stacked
    * from top to bottom */
   layout: "vertical",
   width: '66%'
}

".big-n-bold" : { 
   /* Will span the rest
    * the screen & nothing
    * next to it */
   layout: "vertical",

   font: {
     fontSize: 20,
     fontWeight: 'bold'
   }
}

".point-one" : {
   layout: "vertical",
   font: {
     fontSize: 16
   }
}

".point-two" : {
   layout: "vertical",
   font: {
     fontSize: 16
   }
}

So this is how to use Titanium Layouts. I’m sure there are other ways to explain how to use said layouts, but I thought I’d demonstrate them in a more pragmatic way. I played with the layouts and it was hard, so now I’m sharing what I found out about them. Titanium layouts are useful when you want to position your views, and helpful if you want to make a TSS grid. There’s definitely a way to lay out views in Titanium to make apps and design views for better data delivery.