Titanium Mobile 1.3 Android Preview Part 3: Vertical Layouts

by Bill Dawson on 5 May 2010

Vertical layout in TitaniumThis is Part 3 of a series of posts about what’s coming up for Android development in the new Appcelerator Titanium Mobile SDK 1.3, which should be pushed out this week.

This time I’m featuring vertical layouts, which were implemented by Marshall Culpepper (@marshall_law.)

Vertical layouts allow for relative positioning along a vertical grid. Prior to this capability, you pretty much always needed to provide absolute positioning for your views and controls. If you follow the Titanium iPhone developments, you know that vertical layouts have been available there for a few versions now. They’ve now arrived to Android as well.

This very simple and unattractive example shows labels, text boxes and buttons stacked vertically.

Vertical Layout in Titanium for Android example 1

To achieve this, I did not need to do any absolute position whatsoever. The code was this simple:

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

for (var i = 0; i < 3; i++) {
    win.add(
        Ti.UI.createLabel({
            text: 'This is label ' + i,
            color: 'black',
            width: 'auto',
            height: 'auto'
    }));
    win.add(
        Ti.UI.createTextField({
            hintText: 'This is text field ' + i,
            width: 'auto',
            height: 'auto'
    }));
    win.add(
        Ti.UI.createButton({
            title: 'This is button ' + i,
            width: 'auto',
            height: 'auto'
    }));
}

As you see, no "top" attributes were specified and all "height" attributes were just set to "auto".

Obviously sometimes you want to grid things horizontally as well, while still maintaining an overall vertical layout going down the screen. You can achieve this by adding views to your layout, and positioning child controls inside the views using absolute positioning. This hideous example shows three views which adhere to the vertical layout -- one stacked upon the other -- without specific 'top' properties. The first view has, within itself, some absolutely positioned controls, including a label whose 'left' and 'top' properties are specified.

Vertical layout in Titanium Android, example 2

The code for that example is as follows:

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

var view1 = Ti.UI.createView({
    backgroundColor: 'red',
    width: 'auto',
    height: 'auto'
});

var label1 = Ti.UI.createLabel({
    text: 'view1/label1',
    color: 'white',
    left: 1,
    top: 1,
    width: 100,
    height: 50,
    verticalAlign: 'top',
    backgroundColor: 'blue'
});

view1.add(label1);

var label2 = Ti.UI.createLabel({
    text: 'view1/label2',
    color: 'black',
    backgroundColor: 'gray',
    left: 110,
    width: 100,
    verticalAlign: 'top',
    top: 20,
    height: 70
});

view1.add(label2);

win.add(view1);

var view2 = Ti.UI.createView({
    backgroundColor: 'purple',
    width: 'auto',
    height: 80
});


var label3 = Ti.UI.createLabel({
    backgroundColor: 'green',
    color: 'white',
    verticalAlign: 'top',
    width: 'auto',
    height: 'auto',
    text: 'view2/label1'
});

view2.add(label3);

win.add(view2);

var view3 = Ti.UI.createView({
    backgroundColor: 'black',
    width: 'auto',
    height: 'auto'
});

var label4 = Ti.UI.createLabel({
    color: 'white',
    text: 'view3/label1',
    left: 1
});

view3.add(label4);
win.add(view3);

Stay tuned for more Android goodness!

{ 4 comments… read them below or add one }