WaterfallLayout in Feathers containers
WaterfallLayout class may be used by components that support layout, such as
ScrollContainer, to display items with multiple columns of equal width where items may have variable heights. Items are added to the layout in order, but they may be added to any of the available columns. The layout selects the column where the column's height plus the item's height will result in the smallest possible total height.
WaterfallLayout supports a number of useful options for adjusting the number of columns, the spacing between items, and the alignment of the columns.
First, let's create a
WaterfallLayout and pass it to a
var layout:WaterfallLayout = new WaterfallLayout(); var container:LayoutGroup = new LayoutGroup(); container.layout = layout; this.addChild( container );
There are a number of simple properties that may be used to affect positioning and sizing of items in the layout. Let's look at some of the most common.
The padding is the space around the edges of the container. Let's set the
padding property to
layout.padding = 12;
If needed, we may set padding on each side of the container separately. Below, we set the
10 pixels, and we set the
layout.paddingTop = 10; layout.paddingRight = 15; layout.paddingBottom = 10; layout.paddingLeft = 15;
The gap is the space between items. Let's set the
gap property to
layout.gap = 5;
If needed, we can set the horizontal and vertical gaps separately. We'll set the
horizontalGap property to
4 pixels and the
verticalGap property to
layout.horizontalGap = 4; layout.verticalGap = 6;
We can align the columns in the layout using the
horizontalAlign property. Let's adjust the horizontal alignment so that the content will be pulled to the right:
layout.horizontalAlign = HorizontalAlign.RIGHT;
It's possible to request a specific number of columns for the layout to display. The layout may not always be able to accomodate this value because the container may be too small, but if there is enough room for the requested number of columns, that's the number it will display. Let's tell the layout to use three columns by setting the
layout.requestedColumnCount = 3;
Now, the layout will always display three columns, even if the container can fit four or more. However, if only one or two columns can be fit into the container, the layout will display the maximum number that will fit.