Grid レイアウトコンテナを使用すると、セルで構成される行と列として子を配置できます。これは HTML テーブルとよく似ています。次の例に、9 つのセルが 3 x 3 のパターンで構成されている Grid コンテナを示します。

Grid コンテナの各セルには、0 または 1 つの子を配置できます。1 つのセル内に複数の子を配置する場合は、セル内にコンテナを配置してから、そのコンテナに子を追加します。1 つの行内のセルの高さはすべて同じですが、各行の高さは異なっていてもかまいません。1 つの列内のセルの幅はすべて同じですが、各列の幅は異なっていてもかまいません。

Grid コンテナの行または列ごとに、異なるセル数を定義できます。さらに、コンテナの複数の列や行にまたがる 1 つのセルを配置することもできます。

明示的にサイズ設定したセルより、その子のデフォルトまたは明示的なサイズが大きい場合は、子はセルの境界線で切り取られます。

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

詳細については、『Adobe Flex リファレンスガイド』を参照してください。すべてのセルを同じサイズでレイアウトする機能を持つ Tile コンテナの詳細については、Tile レイアウトコンテナを参照してください。

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

Grid レイアウトコンテナは、次のように作成します。

• Grid コンテナを定義するには、<mx:Grid> タグを使用します。このタグ内には、任意の数の <mx:GridRow> 子タグを含めることができます。
• 各行を定義するには、<mx:GridRow> タグを使用します。これは <mx:Grid> タグの子である必要があり、任意の数の <mx:GridItem> 子タグを含めることができます。
• <mx:GridItem> タグを使用して、行のセルを定義します。これは <mx:GridRow> タグの子である必要があります。

<mx:GridItem> タグには、アイテムの配置を定義する以下のオプションプロパティを指定できます。

次の図では、3 行と 3 列で構成される Grid コンテナを示しています。

左側の図は、Grid コンテナが Flash Player でどのように表示されるかを示します。右側の図は、行と列の構成を示す分割線が配置された Grid コンテナです。この例では、先頭（最上）行の各ボタンがそれぞれ 1 つのセルを占めています。2 番目の行のボタンは 3 つの列を占めており、3 番目の行のボタンは 2 列目と 3 列目にまたがっています。

Grid コンテナ内の各行に対し、同じ数のセルを定義する必要はありません。これを次の図で示します。この Grid コンテナの 1 行目では、5 つのセルが定義されています。2 行目では、3 つのセルにまたがる 1 つのアイテムが配置されています。3 行目では、1 つの空白セルに続き、2 つのセルにまたがる 1 つのアイテムが配置されています。

次の MXML コードでは、このセクションの最初の図に示した、3 つの行と 3 つの列からなる Grid コンテナを作成します。

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

    <mx:Grid id="myGrid">

        <!-- Define Row 1. -->
        <mx:GridRow id="row1">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1"/>
            </mx:GridItem>
            <!-- Define the second cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="2"/>
            </mx:GridItem>
            <!-- Define the third cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 3"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 2. -->
        <mx:GridRow id="row2">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center">
                <mx:Button label="Long-Named Button 4"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 3. -->
        <mx:GridRow id="row3">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem/>
            <!-- Define a cell to span columns 2 and 3 of Row 3. -->
            <mx:GridItem colSpan="2" horizontalAlign="center">
                <mx:Button label="Button 5"/>
            </mx:GridItem>
        </mx:GridRow>

    </mx:Grid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例を修正し、先頭行に 5 つのボタンを配置するには、最初の <mx:GridRow> タグを次のように変更します。

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

    <mx:Grid id="myGrid">

        <!-- Define Row 1. -->
        <mx:GridRow id="row1">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="2"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="Button 3"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="Button 3a"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="Button 3b"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 2. -->
        <mx:GridRow id="row2">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center">
                <mx:Button label="Long-Named Button 4"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 3. -->
        <mx:GridRow id="row3">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem/>
            <!-- Define a cell to span columns 2 and 3 of Row 3. -->
            <mx:GridItem colSpan="2" horizontalAlign="center">
                <mx:Button label="Button 5"/>
            </mx:GridItem>
        </mx:GridRow>

    </mx:Grid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

行と列の範囲の設定

GridItem コンテナの colSpan および rowSpan プロパティを使用すると、複数のグリッド行やグリッド列を占めるグリッドアイテムを作成できます。複数の行または列を占めるアイテムを作成する場合、その子コントロールまたは子コンテナは必ずしも拡大されません。領域に合わせて、子のサイズを適切に調整する必要があります。この例を次に示します。

次に、Grid レイアウトコンテナの作成の例を変更した図を示します。ここでは新たに、Button 3a は 2 つの行、Button 3b は 3 つの行、Button 5 は 3 つの列をそれぞれ占めています。

次のコードは、この結果を得るために加えた変更内容を示します。

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

    <mx:Grid id="myGrid">

        <!-- Define Row 1. -->
        <mx:GridRow id="row1" height="33%">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="2"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="Button 3"/>
            </mx:GridItem>
            <mx:GridItem rowSpan="2">
                <mx:Button label="Button 3a" height="100%"/>
            </mx:GridItem>
            <mx:GridItem rowSpan="3">
                <mx:Button label="Button 3b" height="100%"/>
            </mx:GridItem>
        </mx:GridRow>
        
        <!-- Define Row 2. -->
        <mx:GridRow id="row2" height="33%">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center">
                <mx:Button label="Long-Named Button 4"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 3. -->
        <mx:GridRow id="row3" height="33%">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem/>
            <!-- Define a cell to span columns 2 and 3 and 4 of Row 3. -->
            <mx:GridItem colSpan="3">
                <mx:Button 
                    label="Button 5 expands across 3 columns" 
                    width="75%"/>
            </mx:GridItem>
        </mx:GridRow>

    </mx:Grid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で行った変更には、以下の効果があります。

• 各行の高さをグリッドの 33 ％に設定することで、すべての行を同じ高さにしています。
• Button 3a および Button 3b の rowSpan プロパティを設定し、各ボタンがそれぞれ 2 行、および 3 行にまたがるようにしています。
• Button 3a および Button 3b の height プロパティを 100 ％に設定し、これらのボタンが、それぞれがまたがる全行を占有するようにします。それぞれのボタンにこのプロパティを設定しないと、ボタンはデフォルトの高さに設定されるので、行をまたいで表示されません。
• Button 5 が 3 行にまたがるように設定し、幅をパーセント値で 75 ％に設定します。この例に指定したテキストの場合、このボタンは 3 列分の幅をすべて使用する必要があります。このため、ボタンのサイズには、指定した 75 ％ではなく、テキストが完全に収まるようにデフォルトサイズが設定されます。width プロパティの設定を省略した場合も、同じ結果となります。パーセント値による幅の指定が反映されるようにするには、指定内容はそのままにして、ラベルテキストの長さを短くします。これで、ボタンは 3 列の 3/4 を占め、中央揃えで中央の列に表示されるようになります。

この結果作成されるグリッドには、いくつかの特徴が追加されます。2 行目の定義では、3 列にまたがるセルを定義した <mx:GridItem> タグが 1 つしか指定されていませんが、Button 3a および Button 3b がこの行に拡張表示されるように、さらに 2 つのセルが自動的に作成されます。3 行目も、5 つのセルからなります。先頭セルは、空白の <mx:gridItem/> タグによって定義されます。2 ～ 4 番目のセルは、3 列にまたがる Button 5 を保持する GridItem によって定義されます。5 列目は、1 行目の最後のアイテムが、3 列すべてにまたがるように指定されているために作成されます。