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

行と列の範囲の設定

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

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


行と列の範囲を使用する Grid コンテナ

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

<?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>

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

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

Flex 2.01