Flex Pasta

Flex 4.5: Spark TileLayout Finally Pays off for Multi-Screen Apps

Consider from the beginning of Flex, there have always been 4 layout types inside the SDK: Absolute, Horizontal, Vertical, and Tile.  Yes, tile layout(formerly the tilelist in 3.5), the much forgotten child, has been given new life in the Flex 4.5 SDK.  For the most part in applications, I never really had a use for a tile layout.  Enter Flex 4.5 and the multitude of different screen sizes that now exist for mobile applications.  For more larger mobile applications, the home screen component usually consists of some sort of navigation.  For example, icons tiled in a scrollable list:

Tile layout makes it easy to have an icon screen that flows among many different screen sizes, without any coding changes.  The same code generated the two screens above.  One showing the Motorola Droid and the other is the Samsung Tab.  The tile layout automatically takes advantage of the space given to it and lays out the icons to get the maximum utilization of the space.

Here is a live example on the Droid.  Notice that TileLayout automatically repositions the icons when the phone changes from portrait to landscape mode.

Check out how simple the code is to accomplish a tile layout.

<?xml version=”1.0″ encoding=”utf-8″?>

<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009”

xmlns:s=”library://ns.adobe.com/flex/spark” title=”Tile Layout Droid“>

<s:layout>

<s:VerticalLayout horizontalAlign=”center” paddingLeft=”10” paddingRight=”10“/>

</s:layout>

<s:List itemRenderer=”ir.TileIR” width=”100%“>

<s:layout>

<s:TileLayout paddingLeft=”5” paddingRight=”5” horizontalGap=”5” verticalGap=”20” columnAlign=”justifyUsingWidth“/>

</s:layout>

<s:dataProvider>

<s:ArrayCollection>

<fx:Object label=”Gmail” icon=”@Embed(source=’/assets/icon1.png’)“/>

<fx:Object label=”Youtube” icon=”@Embed(source=’/assets/icon2.jpg’)“/>

<fx:Object label=”iTunes” icon=”@Embed(source=’/assets/icon3.png’)“/>

<fx:Object label=”Tour de Flex” icon=”@Embed(source=’/assets/icon4.png’)“/>

<fx:Object label=”Adobe” icon=”@Embed(source=’/assets/icon5.jpg’)“/>

<fx:Object label=”RSS Feed” icon=”@Embed(source=’/assets/icon6.png’)“/>

</s:ArrayCollection>

</s:dataProvider>

</s:List>

</s:View>