TiledColumnsLayout class may be used by components that support layout, such as
ScrollContainer, to display items from top to bottom in multiple columns. It supports paging horizontally or vertically, and a number of useful options for the spacing and alignment may be modified.
First, let's create a
TiledColumnsLayout and pass it to a
var layout:TiledColumnsLayout = new TiledColumnsLayout(); 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.
If we want rectangular tiles instead of square, we can set the
useSquareTiles property to
The padding is the space around the edges of the container. Let's set the
padding property to
layout.padding = 12;
layout.paddingTop = 10; layout.paddingRight = 15; layout.paddingBottom = 10; layout.paddingLeft = 15;
The gap is the space between items, both horizontally or vertically. Let's set the
gap property to
layout.gap = 5;
layout.horizontalGap = 4; layout.verticalGap = 6;
We can align the items in the layout using the
verticalAlign properties. Horizontal alignment may be used in two cases. In the first case, it will always apply when the tiles are divided into pages. Second, it will also apply when the total width of the content (including padding and gap values) is less than or equal to the width of the container that uses the layout, regardless of whether the layout uses paging. Let's adjust the alignments so that the content will be aligned to the top left:
layout.horizontalAlign = HorizontalAlign.LEFT; layout.verticalAlign = VerticalAlign.TOP;
Since items may be smaller than the tile dimensions, we can align items within their tiles separately from the alignment of the columns. We'll align the items in the horizontal center and the vertical middle of their tiles:
layout.tileHorizontalAlign = HorizontalAlign.CENTER; layout.tileVerticalAlign = VerticalAlign.MIDDLE;
Rows and columns
It's possible to request a specific number of rows 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 rows, that's the number it will display. Let's tell the layout to use three rows by setting the
layout.requestedRowCount = 3;
Now, the layout will always display three rows, even if the container can fit four or more. However, if only one or two rows can be fit into the container, the layout will display the maximum number that will fit.
If the height of the container is not set, the layout will automatically calculate a height that accomodates the
Pages can organize the content of the layout into more manageable pieces. We can enable
paging in either the horizontal direction or the vertical direction. In the example below, we'll enable horizontal paging:
layout.paging = TiledColumnsLayout.PAGING_HORIZONTAL;
If we set padding values on a layout that has paging enabled, each page will use those padding values around its edges. Similarly, horizontal alignment will apply to all pages because a page will never display more content than is visible before breaking to the next page.
container.snapToPages = true;
We can combine the component with a
PageIndicator to navigate between pages and to visually display which page is currently visible.
Virtual Tiled Columns Layout
GroupedList, the layout may be virtualized, meaning that some items in the layout will not actually exist if they are not visible. This helps to improve performance of a scrolling list because only a limited number of item renderers will be created at any given moment. If the list's data provider is very large, a virtual layout is essential, even on desktop computers that have incredible processing power compared to mobile devices.
A virtualized layout will need as estimate about how big a "virtual" item renderer should be. We should set the
typicalItem property of the list to have it determine the typical width and height of an item renderer to use as this estimated value. If we don't pass in a typical item, the first item in the data provider is used for this estimate.
true for containers that support it. We can disable virtual layouts by setting it to
false. When a layout is not virtualized, every single item renderer must be created by the component. If a list has thousands of items, this means that thousands of item renderers need to be created. This can lead to significant performance issues, especially on mobile. In general,
useVirtualLayout should rarely be disabled.
layout.useVirtualLayout = false;