Tile レイアウトコンテナは、子を 1 つまたは複数の垂直列または水平行に配置し、必要に応じて新しい行や列を開始します。direction プロパティによってレイアウトが決まります。direction プロパティの有効値は、列レイアウトの場合は vertical、行レイアウトの場合は horizontal（デフォルト）です。

Grid レイアウトコンテナのセルと異なり（Grid レイアウトコンテナを参照）、Tile コンテナのすべてのセルは同一サイズです。Flex は Tile コンテナのセルを四角形のグリッド内に配置します。各セルには、1 つの子コンポーネントが保持されます。例えば、16 個の子を Tile レイアウトコンテナに定義すると、横に 4 つのセル、縦に 4 つのセルが配置されます。13 個の子を定義した場合は、横に 4 つのセル、縦に 4 つのセルが配置されますが、4 行目の最後の 3 つのセルは空のままです。

次の図に、水平および垂直方向の Tile コンテナの例を示します。

詳細については、『Adobe Flex リファレンスガイド』の Tile を参照してください。

Tile レイアウトコンテナの作成

MXML で Tile コンテナを定義するには、<mx:Tile> タグを使用します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。tileHeight および tileWidth プロパティを使用すると、タイルのサイズを明示的に指定できます。

次の例では、Tile レイアウトコンテナの図で示した水平方向の Tile コンテナを作成します。すべてのセルには、最大の子の高さと幅が適用されます（高さ 50 ピクセル、幅 100 ピクセル）。

<?xml version="1.0"?>
<!-- containers\layouts\TileSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Tile id="myFlow" 
        direction="horizontal" 
        borderStyle="solid"
        paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10" 
        verticalGap="15" horizontalGap="10">
        
        <mx:TextInput id="text1" text="1" height="50" width="75"/>
        <mx:TextInput id="text2" text="2" height="50" width="100"/>
        <mx:TextInput id="text3" text="3" height="50" width="75"/>
        <mx:TextInput id="text4" text="4" height="50" width="75"/>
        <mx:TextInput id="text5" text="5" height="50" width="75"/>
    </mx:Tile>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Tile コンテナの子のサイズと位置の制御

Flex では、各 Tile セルのデフォルトサイズとして、最も高い子の高さと最も幅の広い子の幅が適用されます。すべてのセルのデフォルトサイズは同一です。tileHeight および tileWidth プロパティを使用して明示的にセルのサイズを設定した場合など、子のデフォルトサイズがセルよりも大きくなるときは、子のサイズはセルの境界線内に収まるように自動的に制御されます。その結果、コントロールの内容が切り取られる場合があります。例えば、ボタン自体はセル内に収まっても、ボタンのラベルが切り取られることがあります。子のサイズを tileHeight または tileWidth プロパティ値より大きな値に明示的に指定すると、子は自動的に切り取られます。

子の幅または高さのデフォルト値がセルよりも小さい場合、デフォルトでは、セル内の子の水平方向の整列は left で、垂直方向の整列は top です。子の配置を制御するには、<mx:Tile> タグの horizontalAlign および verticalAlign プロパティを使用します。

子のサイズをパーセントベースで指定すると、子はセルの指定のパーセントに従って拡大または縮小されます。Tile レイアウトコンテナの作成の例では、text2 という名前の TextInput コントロールの幅が 100 ピクセルでした。したがって、すべての Tile セルのデフォルト幅は 100 ピクセルとなり、ほとんどの子のサイズはセルサイズより小さくなります。すべての子コントロールのサイズをセル幅に合わせて拡大するには、次の例に示すように、各子の width プロパティを 100 ％に設定します。この例では、Tile コントロールの tileWidth プロパティを使用してタイルの幅を指定する方法も示します。

<?xml version="1.0"?>
<!-- containers\layouts\TileSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Tile id="myFlow" 
        direction="horizontal" 
        borderStyle="solid" 
        paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10" 
        verticalGap="15" horizontalGap="10" 
        tileWidth="100">
        
        <mx:TextInput id="fname" text="1" height="50" width="100%"/>
        <mx:TextInput id="lname" text="2" height="50" width="100%"/>
        <mx:TextInput id="addr1" text="3" height="50" width="100%"/>
        <mx:TextInput id="addr2" text="4" height="50" width="100%"/>
        <mx:TextInput id="addr3" text="5" height="50" width="100%"/>
    </mx:Tile>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。