Beginner’s Titanium: UI Layouts Using Nested Views

Ideas

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.


var window = 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.


var outerView = 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.


var photo = Ti.UI.createImageView({
width: 7
height: Ti.UI.FILL,
borderColor: '#444',
borderWidth: 2,
borderRadius: 2,
backgroundColor: 'white',
});

photo.image = 'https://149827346.v2.pressablecdn.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.


//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.


var nestedViewContainer = 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.


var topLabel = Ti.UI.createLabel({
text: 'I am topLabel',
width: Ti.UI.SIZE,
height: '50%', //make the top label taller than the others
backgroundColor: 'cyan'
});

var middleLabel = 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'
});

var bottomLabel = 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.


//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!