How to use PagedTiledRowsListLayout with Feathers UI containers

The PagedTiledRowsListLayout class may be used to position items in a data container from left to right, wrapping to multiple rows. When the number of rows exceeds the maximum allowed within the parent container's bounds, a new page is started. All items are positioned within tiles that have the same width and height. This layout supports a number of useful options for the spacing and alignment.

The Basics

Create a ListView container, set its data provider, and add it to the display list.

var container = new ListView();
container.dataProvider = new ArrayCollection([
    {text: "A"},
    {text: "B"},
    {text: "C"}
]);
addChild(container);

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

By default, the first child will be positioned in the top-left corner. Each additional child will be positioned to the right of the previous child — creating a horizontal row, until the total width exceeds the width of the parent container. Then, the next child will be positioned below the previous children to start a new row. When the total combined height of the rows in a page exceeds the height of the parent container, the next child will be positioned at the top-left corner of a new page.

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

Paging

When the number of rows exceeds the bounds of the parent container, a new page will be created, with rows again starting from the top-left corner of the page. Pages may be displayed either horizontally or vertically. Set the pageDirection property to change the direction where new pages are created.

layout.pageDirection = VERTICAL;

Spacing

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

layout.paddingTop = 10.0;
layout.paddingRight = 15.0;
layout.paddingBottom = 10.0;
layout.paddingLeft = 15.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 = 10.0;
layout.verticalGap = 6.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 each page's bounds.

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.

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 y-axis. They may also be aligned to the top or to the bottom.

Rows and columns

If the parent container does not have an explicit height value, the layout will calculate its ideal height automatically. To display a specific number of rows, regardless of the height of each row, set the requestedRowCount property.

layout.requestedRowCount = 4;

Additionally, the requestedMinRowCount and requestedMaxRowCount properties may be used to specify a range of rows allowed to be displayed, which depends on the number of children added to the container.

Similarly, it's possible to request a specific number of columns for the layout to display. Tell the layout to use three columns by setting the requestedColumnCount property.

layout.requestedColumnCount = 3;

Additionally, the requestedMinColumnCount and requestedMaxColumnCount properties may be used to specify a range of columns allowed to be displayed, which depends on the number of children added to the container.

feathers.layout.PagedTiledRowsListLayout API Documentation