Beginner’s Titanium: UI Layouts Using Nested Views

Making user interface elements display how you want them is not always a simple task. The Titanium 2.0 SDK changed the way the ‘auto’ sizing keyword is handled. These changes may require some existing code to be modified in order to produce the same output. So, we’ve put together a simple iOS example to show the use of nested views with the new values Ti.UI.SIZE and Ti.UI.FILL.

We want to make a layout that looks like this:

First, let’s create our window.

1

2

3

4

varwindow=Ti.UI.createWindow({

backgroundColor:'lightgray',

});

Next, we want to create an outer view container for our layout and add it to our window. This container’s layout property is set to horizontal so that our content will be added from left to right.

1

2

3

4

5

6

7

8

9

10

varouterView=Ti.UI.createView({

backgroundColor:'blue',

layout:'horizontal',

height:100,

width:300,

});

window.add(outerView);

We’ll create an ImageView, set its photo, and add it to our outer view container.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varphoto=Ti.UI.createImageView({

width:7

height:Ti.UI.FILL,

borderColor:'#444',

borderWidth:2,

borderRadius:2,

backgroundColor:'white',

});

photo.image='http://www.shockoe.com/media/shockoelogo_web.png';

outerView.add(photo);

Since we don’t want our labels to go directly next to the photo, we need a small buffer. We’ll create a view to use as a buffer and add it to our outer view container.

1

2

3

4

5

6

7

8

9

10

11

12

13

//5 pixel buffer between photo and nestedViewContainer

outerView.add(Ti.UI.createView({

width:15,

height:Ti.UI.FILL,

backgroundColor:'green',

}));

We want a container with a vertical layout so we can add three rows of labels from top to bottom. We create another nested view and use it as a container for labels.

1

2

3

4

5

6

7

8

varnestedViewContainer=Ti.UI.createView({

layout:'vertical',

height:Ti.UI.FILL,//fill remaining height of parent

width:Ti.UI.FILL,//fil remaining width of parent

backgroundColor:'yellow',

});

We create our Labels and add them to the nested view container.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

vartopLabel=Ti.UI.createLabel({

text:'I am topLabel',

width:Ti.UI.SIZE,

height:'50%',//make the top label taller than the others

backgroundColor:'cyan'

});

varmiddleLabel=Ti.UI.createLabel({

text:'I am middleLabel',

height:Ti.UI.SIZE,

width:Ti.UI.FILL,//make this label as wide as its parent view

textAlign:Ti.UI.TEXT_ALIGNMENT_CENTER,//center the text in the width of the label

backgroundColor:'red'

});

varbottomLabel=Ti.UI.createLabel({

text:'I am bottomLabel',

width:Ti.UI.SIZE,

height:Ti.UI.SIZE,

backgroundColor:'purple'

});

//add our labels to the nestedViewContainer

nestedViewContainer.add(topLabel);

nestedViewContainer.add(middleLabel);

nestedViewContainer.add(bottomLabel);

Finally, we add our nested view container to the outer view container and open our window.

1

2

3

4

5

6

7

8

9

//add our nestedViewContainer to the outerView

outerView.add(nestedViewContainer);

//open our window

window.open();

The UI views are colored to indicate the output of each element. Comparing the code to the output should provide some idea of how the properties affect the outcome. Please let us know in the comments section if this example was helpful!