Titanium Layout

In Titanium, windows and views have layout property. There are three types of Layout available in Titanium

1. Composite or Absolute (default)
2. Vertical
3. Horizontal

Composite or Absolute (default)

It is default layout. A child view is positioned based on its positioning properties(top, bottom, left, right and center). If no positioning properties are specified, the child is centered.

var win = Ti.UI.currentWindow;

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    color : 'blue',
    height : 40,
    width : 180,
    top : 100,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label1);

var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    color : 'blue',
    height : 40,
    width : 180,
    top : 160,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label2);

var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    color : 'blue',
    height : 40,
    width : 180,
    top : 220,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label3);

Vertical

In vertical layout all children are ordered one below the other(top to bottom). All child sandboxes have the same width (set to the parent's width).

The first child is laid out top units from its parent's bounding box. Each subsequent child is laid out below the previous child. The space between children is equal to the upper child's bottom value plus the lower child's top value.

var win = Ti.UI.currentWindow;
    win.layout = "vertical";

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label1);


var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label2);


var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label3);

Horizontal

In horizontal layout all children are ordered next to each other in a row.
All children in a row have the same sandbox height.

Here children are laid out horizontally from left to right, in rows. If a child requires more horizontal space than exists in the current row, it is wrapped to a new row. The height of each row is equal to the maximum height of the children in that row.

var win = Ti.UI.currentWindow;
    win.layout = "horizontal";

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label1);

var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label2);

var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label3);

CODESTRONG