Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > レイアウトコンテナの使用 > Grid レイアウトコンテナ > Grid レイアウトコンテナの作成

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

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

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

プロパティ

データ型

用途

説明
rowSpan

Number

プロパティ

Grid コンテナのセルの範囲となる行数を指定します。デフォルト値は 1 です。1 つのセルを、Grid コンテナ内の行数を超えて拡張することはできません。

colSpan

数値

プロパティ

Grid コンテナのセルの範囲となる列数を指定します。デフォルト値は 1 です。1 つのセルを、Grid 内の列数を超えて拡張することはできません。

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


Grid container with three rows and three columns

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

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


Grid container with five cells in the first row

次の 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>

この例を修正し、先頭行に 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>

Flex 2.01