How to use the Feathers
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
VerticalLayout to position the children automatically.
First, let's create a
LayoutGroup container and add it to the display list:
LayoutGroup works a lot like any
DisplayObjectContainer, so you can use the standard
removeChild() and other display list manipulation functions.
The children of a
LayoutGroup do not need to be Feathers UI controls. As you can see above, we've added some Starling
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:
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.
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:
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.
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
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:
It's as simple as setting the
We can give the
LayoutGroup a different background when it is disabled:
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.