mx.containers
Grid クラス

Grid コンテナを使用すると、HTML テーブルのように子をセルの行や列として配置できます。Grid コンテナは、各セルに 1 つの子を配置します。この子は、コントロールまたはコンテナです。コンテナを指定した場合は、このコンテナに子コンポーネントを含めることができます。

ある 1 行に含まれるセルの高さはすべて同じですが、行ごとに高さを変えることはできます。ある 1 列に含まれるセルの幅はすべて同じですが、列ごとに幅を変えることはできます。Grid コンテナの行ごとまたは列ごとに、異なるセル数を定義できます。また、1 つのセルが、コンテナの複数の列または行にまたがることもできます。

<mx:Grid> タグは、Grid コンテナを定義します。<mx:GridRow> タグは、グリッド行を定義します。このグリッド行にはセルが含まれます。<mx:GridItem> タグは、グリッドセルを定義します。このタグは <GridRow> タグの子である必要があります。<mx:GridItem> タグには、任意の数の子を含めることができます。1 つのセルに複数のコンポーネントを挿入するには、セル内にコンテナを作成し、この子コンテナの内部に子を作成します。

MXML シンタックス

<mx:Grid> タグは、Box クラスのすべてのプロパティ (direction プロパティを除く) を継承します。

 <mx:Grid
   horizontalGap="8"
   verticalGap="8">
   ...
   These child tags are examples only:
      <mx:GridRow id="row1"<
       <mx:GridItem
         rowSpan="1"
         colSpan="1">
           <mx:Button label="Button 1"/>
       </mx:GridItem>
       ...
      </mx:GridRow>
   ...
 /> 

関連項目
    GridRow
    GridItem

Grid

layoutChildren

Grid コンテナは、Box コンテナと同じレイアウト規則に従います。GridRow コンテナの位置とサイズの計算方法は、VBox コンテナが子の位置とサイズを決める場合と同一です。同様に、GridRow コンテナが GridItemコンテナの位置を決めるときに使用するレイアウトアルゴリズムは、HBox コンテナが使用するアルゴリズムと似ています。

唯一の違いは、GridRow コンテナの場合、子の位置とサイズがすべて同一に設定されるように (Grid コンテナの列が一列に並ぶように)、すべてのコンテナ同士が協調することです。

このメソッドは直接呼び出さないでください。これは Flex LayoutManager によって適切なタイミングで呼び出されます。アプリケーション起動時には、Flex LayoutManager によって、すべてのコンポーネントの layoutChildren() メソッドがルートから下層に向かう順序で呼び出されます。

これは、サブクラス化で使用する高度なメソッドです。このメソッドをオーバーライドする場合、実装で super.layoutChildren()メソッドを呼び出すか、それぞれの子で move() および setSizeNoLayout() メソッドを呼び出す必要があります。レイアウトを実行するために、このコンテナのサイズは width および height プロパティではなく、layoutWidthおよび layoutHeight の各プロパティから取得してください。width および height プロパティは、このコンテナの scaleX および scaleY プロパティの値を考慮しません。

measure

Grid コンテナがその寸法を計算する方法について理解するため、すべての GridItem コンテナの rowSpan プロパティおよび colSpan プロパティが 1 に設定されていると仮定します。Grid コンテナの最初の列の推奨幅は、最初の列にあるすべての GridItem コンテナの推奨幅の中で最大の値に等しくなります。同様に、2 番目の列の推奨幅は、2 番目の列にあるすべての GridItem コンテナの推奨幅の中で最大の値になり、以降も同様に続きます。Grid コンテナ全体の preferredWidth は、すべての列の推奨幅の合計に、境界線の幅と、左右のマージンと、隣接グリッドセル間の水平方向の隙間の幅を加えた値になります。

preferredHeight、minWidth、minHeight、maxWidth、および maxHeight は、たとえば GridItem コンテナの preferredHeight プロパティに minWidth プロパティを加えるなどのように、すべて同様の方法で計算されます。

ある GridItem コンテナの colSpan プロパティが 3 の場合、この GridItem コンテナの preferredWidth は 3 列で割られます。preferredWidth が等分されると、3 つの列のそれぞれが推奨幅を計算します。このとき、GridItem コンテナがその列のみに存在し、GridItem コンテナの preferredWidth が実際の値の 1/3 であるかのように仮定して計算します。

ただし、GridItem コンテナの preferredWidth は、このコンテナがまたがるすべての列の間で等分されるとは限りません。列の一部のプロパティが width のパーセント値である場合、GridItem コンテナの preferredWidth が割られ、Grid の必要な比率を各列に配分しようとします。

上記の値はすべて、Grid の計算された幅と高さです。ユーザーは setSize() メソッドを呼び出すか、または次のプロパティの値を明示的に指定することにより、測定値をオーバーライドできます。

• minHeight
• minWidth
• maxHeight
• maxWidth
• preferredHeight
• preferredWidth
• height
• width

このメソッドは直接呼び出さないでください。これは Flex LayoutManger によって適切なタイミングで呼び出されます。アプリケーションの起動時に、Flex LayoutManager は子から親までのすべてのコンポーネントを、最終的なサイズに設定する前に測定しようとします。

これは、サブクラス化で使用する高度なメソッドです。このメソッドを独自の実装でオーバーライドする場合は、その実装で super.measure() メソッドを呼び出すか、または _measuredPreferredHeight および _measuredPreferredWidth プロパティを設定する必要があります。また、任意で以下のプロパティも設定します。

• _measuredMinWidth
• _measuredMinHeight

<?xml version="1.0"?>
<!-- Grid レイアウトの使用方法を示す簡単な例 -->
<mx:Application borderStyle="none" xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">
    
<mx:Panel title="Grid Panel">
	
	<mx:Grid>

<!-- Row 1 を定義します。-->
<mx:GridRow borderStyle="inset" id="row1">

<!-- Row 1 の最初のセルを定義します。-->
<mx:GridItem borderStyle="outset" >
<!-- このボタンは、「アイコン付きボタン」のように、イメージを構成できます。 -->
<mx:Button id="iconButton" icon="@Embed('FlexLogo.gif')" label="Button with icon" labelPlacement="right" color="#993300"/>
</mx:GridItem>

<!-- Row 1 の 2 番目のセルを定義します。-->
<mx:GridItem borderStyle="outset">
<!-- ボタンのサイズおよびラベル属性はカスタマイズできます。 -->
<mx:Button label="Customized button" toggle="true" selected="true" textAlign="left" fontStyle="italic"
fontSize="13" width="{iconButton.width}"/>
</mx:GridItem>

<!-- Row 1 の 3 番目のセルを定義します。-->
<mx:GridItem borderStyle="outset">
<!-- デフォルトでは、作成するボタンの外観と操作性は「デフォルトボタン」と似たものになります。 -->
<mx:Button label="Default button" repeatInterval="35"/>
</mx:GridItem>

</mx:GridRow>

<!-- Row 2 を定義します。-->
<mx:GridRow borderStyle="inset" id="row2">

<!-- Row 2 の 3 つの列にまたがる 1 つのセルを定義します。 -->
<mx:GridItem borderStyle="outset" horizontalAlign="center" colSpan="3" backgroundColor="#FFFFFF">
<mx:Button label="Long-Named Button 4"/>
</mx:GridItem>

</mx:GridRow>

<!-- Row 3 を定義します。-->
<mx:GridRow borderStyle="inset" id="row3">

<!-- Row 3 の空の最初のセルを定義します。-->
<mx:GridItem/>

<!-- Row 3 の列 2 および 3 にまたがるセルを定義します。 -->
<mx:GridItem borderStyle="outset" horizontalAlign="center" colSpan="2">
<mx:Button label="Button 5"/>
</mx:GridItem>

</mx:GridRow>

</mx:Grid>
	
</mx:Panel>		

</mx:Application>