uiGrid

Required: Aspire UI Components Standard Edition v1.2.0+

The uiGrid component is a layout container that automatically organizes its child objects in a table of columns and rows. The child objects are laid out in the order they are added to the container, from left-to-right and then top-to-bottom.

NOTE: If you wish to place UI objects manually via the move(x,y) method, use the uiPane container instead.

import com.ghostwire.ui.containers.uiGrid;
import com.ghostwire.ui.controls.uiLabelButton;
 
var btn1:uiLabelButton = new uiLabelButton("Australia");
var btn2:uiLabelButton = new uiLabelButton("Bhutan");
var btn3:uiLabelButton = new uiLabelButton("Canada");
var btn4:uiLabelButton = new uiLabelButton("Denmark");
var btn5:uiLabelButton = new uiLabelButton("Egypt");
 
var grid:uiGrid = new uiGrid();
grid.columns = 2;
grid.addChild(btn1);
grid.addChild(btn2);
grid.addChild(btn3);
grid.addChild(btn4);
grid.addChild(btn5);
 
addChild(grid);

The height of all the cells in a single row is the same, but each row can have a different height. The width of all the cells in a single column is the same, but each column can have a different width.

btn1.fillX = true;
btn2.fillX = true;
btn3.fillX = true;
btn4.fillX = true;
btn5.fillX = true;

By default, child objects are packed with zero gap in-between them.

To insert automatic spacing in-between each column, set the spacingH property:

grid.spacingH = 8; // ** spacing of 8 pixels in-between columns **

To insert automatic spacing in-between each row, set the spacingV property:

grid.spacingV = 2; // ** spacing of 2 pixels in-between rows **

You can set the number of columns via the columns property. The number of rows depends on the columns property - you cannot set the rows directly since it is derived from the number of columns and number of child objects.

grid.columns = 3; // ** arrange into a table with 3 columns **

For more information on the members of the com.ghostwire.ui.containers.uiGrid class, please refer to the API Reference.