Changing a Tile container’s child layout direction

The following example lets you change a Tile container’s direction property to control whether the container’s children are arranged from left to right, or top to bottom. You can also use two slider controls to change the value of the tileWidth and tileHeight properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-tile-containers-child-layout-direction/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Tile {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="direction:" />
        <mx:ComboBox id="comboBox">
            <mx:dataProvider>
                <mx:String>{mx.containers.TileDirection.HORIZONTAL}</mx:String>
                <mx:String>{mx.containers.TileDirection.VERTICAL}</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="50%" />

        <mx:Label text="tileWidth ({tileW.value}):" />
        <mx:HSlider id="tileW"
                minimum="30"
                maximum="90"
                value="30"
                liveDragging="true"
                snapInterval="5"
                tickInterval="10"
                dataTipPrecision="0" />

        <mx:Spacer width="50%" />

        <mx:Label text="tileHeight ({tileH.value}):" />
        <mx:HSlider id="tileH"
                minimum="30"
                maximum="60"
                value="30"
                liveDragging="true"
                snapInterval="5"
                tickInterval="10"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Tile backgroundColor="haloSilver"
            direction="{comboBox.selectedItem}"
            tileWidth="{tileW.value}"
            tileHeight="{tileH.value}">
        <mx:Button label="1" width="100%" height="100%" />
        <mx:Button label="2" width="100%" height="100%" />
        <mx:Button label="3" width="100%" height="100%" />
        <mx:Button label="4" width="100%" height="100%" />
        <mx:Button label="5" width="100%" height="100%" />
        <mx:Button label="6" width="100%" height="100%" />
        <mx:Button label="7" width="100%" height="100%" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.

When the Tile container’s direction property is set to “horizontal” (or TileDirection.HORIZONTAL) you can see that the children are laid out left to right then top to bottom, like:

[1][2][3]
[4][5][6]
[7]

But if you change the direction property to “vertical” (or TileDirection.VERTICAL) you can see that the children are laid out top to bottom then left to right, like:

[1][4][7]
[2][5]
[3][6]

Happy Flexing!

Tagged as: direction, tileHeight, tileWidth