How to use the LayoutGroup component (Starling version)
The LayoutGroup
class provides a generic container for layout, without scrolling. By default, you can position children manually, but you can also pass in a layout implementation, like HorizontalLayout
or VerticalLayout
to position the children automatically.
If you need scrolling, you should use the
ScrollContainer
component instead.
The Basics
First, let's create a LayoutGroup
container and add it to the display list:
var group:LayoutGroup = new LayoutGroup();
this.addChild( group );
A LayoutGroup
works a lot like any DisplayObjectContainer
, so you can use the standard addChild()
, removeChild()
and other display list manipulation functions.
var xPosition:Number = 0;
for(var i:int = 0; i < 5; i++)
{
var quad:Quad = new Quad( 100, 100, 0xff0000 );
quad.x = xPosition;
group.addChild( quad );
xPosition += quad.width + 10;
}
The children of a LayoutGroup
do not need to be Feathers UI controls. As you can see above, we've added some Starling Quad
instances.
By default, the LayoutGroup
will automatically resize itself to fit the area that the children occupy. We can set the width and height manually, if desired, to override this behavior:
group.width = 200;
group.height = 200;
You'll notice that the children are still visible. By default, clipping is disabled on LayoutGroup
to maximize rendering performance. Set the clipContent
property to true
to enable clipping, if desired.
Layout
We manually positioned the quads in the example code above. Instead, let's pass a HorizontalLayout
to the layout
property of the LayoutGroup
. This layout will calculate the positioning of children for us automatically:
var layout:HorizontalLayout = new HorizontalLayout();
layout.gap = 10;
group.layout = layout;
Here, we've set the gap
property, but HorizontalLayout
provides many more useful features. See How to use HorizontalLayout
with Feathers containers for complete details.
Feathers comes with a number of different layouts, in addition to
HorizontalLayout
.
Skinning a LayoutGroup
The LayoutGroup
control are mainly the background skins. For full details about which properties are available, see the LayoutGroup
API reference. We'll look at a few of the most common ways of styling a LayoutGroup
below.
Background skins
We can give the LayoutGroup
a background skin that stretches to fill the entire width and height of the group. In the following example, we pass in a starling.display.Image
, but the skin may be any Starling display object:
var skin:Image = new Image( texture );
skin.scale9Grid = new Rectangle( 2, 2, 1, 6 );
group.backgroundSkin = skin;
It's as simple as setting the backgroundSkin
property.
We can give the LayoutGroup
a different background when it is disabled:
var skin:Image = new Image( texture );
skin.scale9Grid = new Rectangle( 1, 3, 2, 6 );
group.backgroundDisabledSkin = skin;
The backgroundDisabledSkin
is displayed when the group is disabled. If the backgroundDisabledSkin
isn't provided to a disabled group, it will fall back to using the backgroundSkin
in the disabled state.