How to use FlowColumnsLayout with Feathers UI containers

The FlowColumnsLayout class may be used to position items from top to bottom, wrapping to multiple columns when the total height of a row exceeds the height of the container. This layout supports a number of useful options for the spacing and alignment.

This layout is designed to be used with basic containers like LayoutGroup and ScrollContainer, which are intended purely for visual layout and do not offer built-in capabilities for rendering data from a collection. If using a container that renders a collection of data — such as ListView, TreeView, or GridView — consider using other layouts that are optimized for data containers by offering performance improvements like layout virtualization.

The Basics

Create a LayoutGroup container, add it to the display list, and then add a few children to the container.

var container = new LayoutGroup();
addChild(container);

var child1 = new Button();
child1.text = "One";
container.addChild(child1);

var child2 = new Button();
child2.text = "Two";
container.addChild(child2);

var child3 = new Button();
child3.text = "Three";
container.addChild(child3);

Set the container's layout property to a new FlowColumnsLayout instance.

container.layout = new FlowColumnsLayout();

By default, the first child will be positioned in the top-left corner. Each additional child will be positioned bwlo of the previous child — creating a vertical column, until the total height exceeds the height of the parent container. Then, the next child will be positioned to the right of the previous children to start a new column.

The following sections will introduce a number of properties that may be used to adjust the positioning and sizing of children in the layout.

Spacing

The padding is the space around the edges of the container that will contain no children. Padding may be added on each side, including top, right, bottom, and left.

layout.paddingTop = 15.0;
layout.paddingRight = 10.0;
layout.paddingBottom = 15.0;
layout.paddingLeft = 10.0;

If all four padding properties should be set to the same value, call the setPadding() method instead.

// sets top, right, bottom and left to the same value
layout.setPadding(10.0);

The gap is the space between items, either horizontally or vertically. The horizontalGap and verticalGap properties are measured in pixels.

layout.horizontalGap = 6.0;
layout.verticalGap = 10.0;

If both gap properties should be set to the same value, call the setGap() method instead.

// sets horizontal and vertical gaps to the same value
layout.setGap(10.0);

Alignment

The children of the container may be aligned within the container's bounds.

To align the children along the y-axis, set the verticalAlign property.

layout.verticalAlign = MIDDLE;

In the example above, the children are aligned to the middle of the x-axis. They may also be aligned to the top or to the bottom.

To align the children along the x-axis, set the horizontalAlign property.

layout.horizontalAlign = CENTER;

In the example above, the children are aligned to the center of the x-axis. They may also be aligned to the left or to the right.

Note: Horizontal alignment may be used only when the total width of the content (including padding and gap values) is less than or equal to the width of the container. If the content is larger than its parent container, the layout will position the children starting from 0.0 on the x-axis, the same as if they were left-aligned.

Since children may be smaller than the width of a column, it is possible to align them within their columns, separately from the alignment of all content within the container. To align the children within their columns, set the columnHorizontalAlign property.

layout.columnHorizontalAlign = CENTER;

In the example above, the children of rows are aligned to the center of the x-axis. They may also be aligned to the left or to the right.