[转]Tips on using&nbsp…

Tips on using the TileLayout in Flex 4.6

Posted on January 20, 2011 by Judah

Tips on using TileLayout in Flex 4.6. I had some difficulty in getting a tile layout to dynamically expand or contract the layout items. This post shows how I solved it.

To get the items in a TileLayout to expand to fill all the available space in a List or DataGroup container use the following settings:

<s:TileLayout id="tileLayout"            horizontalGap="20"            verticalGap="20"            orientation="columns"            requestedColumnCount="{columnCount}"            rowAlign="justifyUsingHeight"            columnAlign="justifyUsingWidth"            rowHeight="{list.height / list.dataProvider.length}"            />

The key is to set the rowHeight to minimum values based on the total number of items. In this case we are checking the list data provider and making sure the cell is at least that size.* In some cases it works fine without the rowHeight line???

When the columnAlign is set to ColumnAlign.JUSTIFY_USING_WIDTH the columnWidth actual value increases so that the last fully visible column right edge aligns with the container’s right edge. Note that explicitly setting the columnWidth property does not turn off justification. It only determines the initial column width value. Justification may increase it.

The columnCount is an integer with the value of 2. You can modify this value to fit your needs.

Note: To get all the contents of a layout item to use all available space set the verticalAlign and horizontalAligh to justify.

<s:TileLayout id="tileLayout"            horizontalAlign="justify"            verticalAlign="justify"            />

Whenever you set the column count the layout will be updated and the layout items resized.

<s:List id="list"       left="20"       right="20"       top="20"       bottom="20"       width="100%"       height="100%"       labelField="@label"       selectedIndex="-1"       contentBackgroundAlpha="0">