1 Reply Latest reply on Jun 3, 2010 10:24 AM by David_F57

    Flex 4 TileLayout confusion

    jsd99 Level 3

      I'm trying to make a TileLayout that makes every entry in a List as wide as possible, to fill up 100% of the parent container.  No luck.  Here's my example application:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#000000" width="520">
          <fx:Declarations>
              <s:ArrayCollection id="foo">
                  <fx:String>Miami</fx:String>
                  <fx:String>New York</fx:String>
                  <fx:String>London</fx:String>
                  <fx:String>Los Angeles</fx:String>
                  <fx:String>Kuala Lumpur</fx:String>
              </s:ArrayCollection>
          </fx:Declarations>
          
          <s:Group top="0" left="0" right="0" bottom="0">
              <s:List dataProvider="{foo}" width="100%">
                  <s:layout>
                      <s:TileLayout columnAlign="justifyUsingWidth" horizontalGap="0" horizontalAlign="justify" verticalAlign="middle"/>
                  </s:layout>
              </s:List>       
          </s:Group>       
      </s:Application>

       

      I've tried every permutation of columnAlign/horizontalAlign possible but no joy.  What I want is 520/5 equal sized columns with the city name centered horizontally and vertically within each tile.

        • 1. Re: Flex 4 TileLayout confusion
          David_F57 Level 5

          hi,

           

          if you set your column count each column will be width/column count pixels or slightly less with scrollbars, in your renderer just assign 100% to widths.

           

          <s:List width="500" height="400" itemRenderer="userlist">

          <s:layout>

          <s:TileLayout requestedColumnCount="5" columnAlign="justifyUsingWidth"/>

          </s:layout>

          <s:dataProvider>

          <s:XMLListCollection id="myData"/>

          </s:dataProvider>

          </s:List>

           

          from the earlier post - you can use 100% or left=0 right=0

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx"

          autoDrawBackground="false">

          <s:states>

          <s:State name="normal" />

          <s:State name="hovered" />

          <s:State name="selected" />

          </s:states>

          <s:Rect left="0" right="0" top="0" bottom="0">

          <s:fill>

          <s:SolidColor color="0x444444" alpha.normal="0" alpha.hovered="0.3" alpha.selected="0.7"/>

          </s:fill>

          </s:Rect>

          <s:VGroup width="100%" paddingTop="5" gap="5" paddingBottom="5" buttonMode="true">

          <s:Label text="{data.@username}" width="100%" textAlign="center" color="#000000" color.selected="#FF0000"/>

          <s:Label text="{data.@insession}" width="100%" textAlign="center"/>

          </s:VGroup>

          </s:ItemRenderer>

           

          David