Organizing your UI with containers and layouts

You can use the Container class to organize your application's UI controls. By using a layout, a Container manages the positioning and size of any UI component that it contains. Any controls that are added to a container are known as children. A container can also contain other containers, called sub-containers.

Below, a container is created, set to the size of the stage, and added to the stage:

topContainer = new Container();
topContainer.setActualSize(stage.stageWidth, stage.stageHeight);
this.addChild(topContainer);

This is the main container that will house all controls in the application.

Each container can specify a layout type. The layout defines how controls are organized, arranged, and repositioned, within the parent container. You don't need to specify a layout, however, a layout is a useful method of automatically arranging controls without hard-coding the relative position of a control, and without worrying about the details of the physical device. This is because the layout uses an algorithm to determine the preferred size and position of each control, depending on the ideal size of the control and the amount of available space within the parent container. Letting the layout automatically position and place your controls increases the chance that your application will appear correctly regardless of device type or screen size.

You can set the layout for a container by setting the container's layout property. There are three layout types:
GridLayout
Organizes controls into rows and columns.
RowLayout
Organizes controls into vertical or horizontal rows. The rows can automatically wrap depending on the available size in the container.
StackLayout
Organizes controls in an overlapping stack, where the stack is defined by the z-order of the control.

Below, a Gridlayout instance is created and applied to the topContainer by setting the layout property:

var topGrid:GridLayout = new GridLayout();
topContainer.layout = topGrid;
topGrid.numColumns = 2;

All controls that are added to the container will be organized in a set of two columns, since the numColumns property is set to 2.

The GridLayout, RowLayout, and StackLayout classes extend the LayoutBase class. Each layout type defines a set of methods and properties that allow you to customize the look of the grid, row, or stack. For example, the GridLayout class contains the setSpacing() method that allows you to set the vertical and horizontal spacing around each column and row in the grid.

Overriding the layout

You can override the layout type by creating a LayoutData object and applying it to a control. For example, the StackLayout type uses a StackData object to adjust the size and position of each control within the container. You can assign a StackData instance to an actual control to override how the control will appear within the layout.

Below, a GridData instance is created and applied to a List:

var myGridData:GridData = new GridData();
myGridData.preferredWidth = 150;
myGridData.vAlign = Align.FILL;

var myList:List = new List();
myList.layoutData = myGridData;
myList.selectionMode = ListSelectionMode.SINGLE;
myList.dataProvider = chapDP;
myList.selectedIndex = 0;
myList.addEventListener(ListEvent.ITEM_CLICKED, onListClick);
topContainer.addChild(myList);

The GridData instance's vAlign method is set to Align.FILL meaning that the List will fill the entire height of the cell. The preferredWidth property is set to 150 pixels.

You can apply a single LayoutData instance to multiple controls.

comments powered by Disqus