[转]Tips on using&nbsp…

Tips on using the TileLayout in Flex 4.6

Posted on January 20, 2011 byJudah

Tips on using TileLayout in Flex4.6. I had some difficulty in getting a tile layout to dynamicallyexpand or contract the layout items. This post shows how I solvedit.

To get the items in a TileLayoutto expand to fill all the available space in a List or DataGroupcontainer use the following settings:




<s:TileLayoutid="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 rowHeightto minimum values based on the total number of items. In this casewe are checking the list data provider and making sure the cell isat least that size.* In some cases it works fine without therowHeight line???

When the columnAlign is set toColumnAlign.JUSTIFY_USING_WIDTH the columnWidth actual valueincreases so that the last fully visible column right edge alignswith the container’s right edge. Note that explicitly setting thecolumnWidth property does not turn off justification. It onlydetermines the initial column width value. Justification mayincrease it.

The columnCount is an integerwith the value of 2. You can modify this value to fit yourneeds.

Note: To get all the contents ofa layout item to use all available space set the verticalAlign andhorizontalAligh to justify.




<s:TileLayoutid="tileLayout"

           horizontalAlign="justify"

           verticalAlign="justify"

           />

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




<s:Listid="list"

      left="20"

      right="20"

      top="20"

      bottom="20"

      width="100%"

      height="100%"

      labelField="@label"

      selectedIndex="-1"

      contentBackgroundAlpha="0">