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.

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.

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

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.

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.

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

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

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!