制約ベースのレイアウトを使用するか、制約を受ける行と列を使用して、子コンポーネントのサイズと位置を同時に管理できます。制約ベースのレイアウトでは、コンポーネントのコンテナの可視領域に対して相対的な位置にコンポーネントの端または中心を固定できます。「可視領域」は、コンポーネントの表示されている部分であり、子コントロール、テキスト、イメージその他のコンテンツを含めることができます。

制約を受ける行と列を使用してコンテナを垂直および水平方向の制約領域にさらに分割すると、子コンポーネント間および親コンテナ内での子コンポーネントのサイズと配置を制御できます。

制約ベースのレイアウトの作成

制約ベースのレイアウトを使用すると、絶対配置をサポートしている任意のコンテナの直下の子の位置とサイズを決定できます。制約ベースのレイアウトでは、次のことができます。

• コンポーネントの 1 つまたは複数の端を、コンテナの可視領域の対応する端から指定したピクセル離れた位置に固定します。固定された子の端は、コンテナのサイズが変更されても、親の端から等距離に維持されます。上端と下端など、サイズの両端を固定すると、コンテナのサイズが変更された場合にコンポーネントのサイズも変更されます。
• 子の水平または垂直方向の中心（またはこの両方の中心）を、コンテナの可視領域の中心から指定したピクセル離れた位置に固定します。この場合、パーセント値ベースのサイズ設定を併用しない限り、子のサイズは指定されたサイズのまま変更されません。
• コンポーネントのベースラインを、親コンテナの上端から指定したピクセル離れた位置に固定します。

制約ベースのレイアウトは、任意の Flex フレームワークコンポーネント、つまり UIComponent クラスを拡張する任意のコンポーネントに対して指定できます。制約ベースのレイアウトを使用して、コンポーネントの位置とサイズを設定する際の規則を次に示します。

• Canvas コンテナまたは layout プロパティが absolute に設定されている Application コンテナまたは Panel コンテナの中にコンポーネントを直接配置します。
• 制約を指定するときは、top、bottom、left、right、horizontalCenter、verticalCenter のいずれかのスタイルを使用します。

  top、bottom、leftおよび right の各スタイルでは、コンポーネントの端と対応するコンテナの端との距離を指定します。

  baseline 制約は、コンポーネントのベースライン位置と親コンテナの上端との距離を指定します。すべてのコンポーネントのベースライン位置は、コンポーネントのテキストの 1 行目のベースラインの y 座標として算出されます。UIComponent オブジェクトにテキストが含まれない場合、そのベースラインは、UIComponent オブジェクトにコンポーネントのスタイルを使用する UITextField オブジェクトが含まれ、 UITextField オブジェクトの最上部がコンポーネントの最上部と一致するものとして算出されます。

  horizontalCenter スタイルと verticalCenter スタイルでは、コンポーネントの中心点とコンテナの中心との特定の方向の距離を指定します。負の数値を指定すると、コンポーネントが中心から左または上に移動します。

  次の例では、Form コントロールの左右の端をコンテナの端から 20 ピクセル離れた位置に固定しています。

  <mx:Form id="myForm" left="20" right="20"/>
  
  

• top スタイルまたは bottom スタイルを verticalCenter スタイルと同時に指定しないでください。verticalCenter の値は他のプロパティよりも優先されます。同様に、left スタイルまたは right スタイルを horizontalCenter スタイルと同時に指定しないでください。
• 制約ベースのレイアウトによって決定されたサイズは、明示的なサイズ指定またはパーセント値ベースのサイズの指定より優先されます。例えば、left 制約と right 制約を指定すると、制約ベースによって決定された幅が、width プロパティまたは percentWidth プロパティで設定された幅より優先されます。

制約ベースのコンポーネントの優先規則

• 他のサイズ設定パラメータまたは配置パラメータを指定せずに、端の制約（left、right、top または bottom）を 1 つ指定した場合、コンポーネントのサイズはデフォルトサイズになり、制約値によって位置が決定されます。サイズパラメータ（幅または高さ）を指定した場合は、そのパラメータによってサイズが決定されます。
• 制約の組み合わせ（left-right または top-bottom）を指定した場合、これらの制約値によってコンポーネントのサイズと位置が決定されます。中心の制約（horizontalCenter または verticalCenter）も指定すると、端の制約からコンポーネントのサイズが計算され、中心の制約値によって位置が決定されます。
• 制約ベースのレイアウトのプロパティの組み合わせ（left-right または top-bottom）によって決定されたコンポーネントのサイズは、明示的なサイズまたはパーセント値ベースのサイズの指定よりも優先されます。例えば、left 制約と right 制約の両方を指定した場合、width プロパティまたは percentWidth プロパティで設定された幅よりも、計算された制約ベースの幅が優先されます。
• 端の制約は、baseline 制約よりも優先されます。

例：フォームに対する制約ベースのレイアウトの使用

次のコード例は、フォームに対して制約ベースのレイアウトを使用する方法を示しています。この例では、Form コントロールで制約ベースのレイアウトを使用して、その上端をキャンバスのパディングのすぐ内側に配置しています。フォームの左端と右端は、Canvas コンテナの左右の端から 20 ピクセル離れた位置になります。ボタンを含む HBox は、制約ベースのレイアウトを使用して、Canvas の右端から 20 ピクセル、Canvas の下端から 10 ピクセル離れた位置に配置されます。

ブラウザまたはスタンドアローン Flash Player または AIR アプリケーションのサイズを変更すると、Form レイアウト上の Application コンテナのサイズが動的に変更される効果を確認できます。例えば、アプリケーションのサイズが小さくなるにつれて、フォームとボタンが重なります。通常、ボタンはフォームの最後の FormItem に含めます。ただし、次の例では、サイズ変更の効果がよくわかるように、ボタンを HBox コンテナ内で分けています。

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

    <!-- Use a Canvas container in the Application to prevent 
        unnecessary scroll bars on the Application. -->
    <mx:Canvas width="100%" height="100%">

         <!-- Anchor the top of the form at the top of the canvas.
            Anchor the form sides 20 pixels from the canvas sides. -->
        <mx:Form id="myForm" 
                backgroundColor="#DDDDDD"
                top="0" 
                left="20" 
                right="20">
                
            <mx:FormItem label="Product:" width="100%">
                <!-- Specify a fixed width to keep the ComboBox control from 
                    resizing as you change the application size. -->
                <mx:ComboBox width="200"/>
            </mx:FormItem>

            <mx:FormItem label="User" width="100%">
                <mx:ComboBox width="200"/>
            </mx:FormItem>

            <mx:FormItem label="Date">
                <mx:DateField/>
            </mx:FormItem>

            <mx:FormItem width="100%" 
                    direction="horizontal" 
                    label="Hours:">
                <mx:TextInput width="75"/>
                <mx:Label text="Minutes" width="48"/>
                <mx:TextInput width="75"/>
            </mx:FormItem>
        </mx:Form>

        <!-- Anchor the box with the buttons 20 pixels from the canvas
            right edge and 10 pixels from the bottom. -->
        <mx:HBox id="okCancelBox" 
                right="20" 
                bottom="10">
            <mx:Button label="OK"/>
            <mx:Button label="Cancel"/>
        </mx:HBox>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

制約を受ける行と列の使用

絶対配置をサポートするコンテナを垂直および水平方向の制約領域にさらに分割すると、子コンポーネント間および親コンテナに対する子コンポーネントのサイズと配置を制御できます。

コンテナの水平および垂直方向の制約領域は、constraintRows プロパティと constraintColumns プロパティで定義します。これらのプロパティには、コンテナを水平方向に分割する制約オブジェクト（ConstraintColumn オブジェクト）の配列と、垂直方向に分割する制約オブジェクト（ConstraintRow オブジェクト）の配列が含まれます。ConstraintRow オブジェクトは、定義された順序でコンテナの上から下にレイアウトされます。ConstraintColumn オブジェクトは、定義された順序で左から右にレイアウトされます。

次の例は、2 つの垂直領域と 2 つの水平領域に分割された Canvas コンテナを示しています。制約を受ける 1 つ目の列は、Canvas の左端から 212 ピクセル分の領域を占めます。制約を受ける 2 つ目の列は、残りの Canvas 幅の全領域を占めます。この例の各行は、上から下に Canvas コンテナの高さのそれぞれ 80 ％と 20 ％を占めます。

<?xml version="1.0"?>
<!-- constraints\BasicRowColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Canvas>
        <mx:constraintColumns>
            <mx:ConstraintColumn id="col1" width="212"/>
            <mx:ConstraintColumn id="col2" width="100%"/>
        </mx:constraintColumns>
        <mx:constraintRows>
            <mx:ConstraintRow id="row1" height="80%"/>
            <mx:ConstraintRow id="row2" height="20%"/>
        </mx:constraintRows>
    </mx:Canvas>
</mx:Application>

制約を受ける行と列がコンテナの使用可能領域の 100 ％を占める必要はありません。次の例は、Canvas 幅の 20 ％を占める制約を受ける単一の列を示しています。コンテナの 80 ％は割り当てられていません。

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

    <mx:Canvas>
        <mx:constraintColumns>
            <mx:ConstraintColumn id="col1" width="20%"/>
        </mx:constraintColumns>
    </mx:Canvas>

</mx:Application>

制約を受ける行と列の作成

制約を受ける列と行には、固定、パーセントおよびコンテンツの 3 つのサイズ設定オプションがあります。これらのオプションは、コンテナで制約領域が占める領域の量を示します。子コンポーネントが親コンテナに追加されるか、親コンテナから削除されると、親コンテナのサイズ設定オプションに基づいて、ConstraintColumn および ConstraintRow の各インスタンスに割り当てる領域が算出されます。

• 「固定サイズ」は、制約領域に割り当てる領域が固定されたピクセルサイズであることを意味します。次の例では、ConstraintColumn インスタンスに 100 ピクセルの固定幅を設定しています。

  <mx:ConstraintColumn id="col1" width="100"/> 
  
  

  親コンテナが拡大または縮小しても、ConstraintColumn インスタンスの幅は 100 ピクセルのまま変化しません。

• 「パーセントサイズ」は、制約を受ける行と列に割り当てる領域が、使用可能領域から固定サイズとコンテンツサイズの子オブジェクトに割り当てられた領域を差し引いた後の親コンテナ内の残りの領域のパーセント値として算出されることを意味します。

  次の例では、ConstraintColumn インスタンスに 80 ％の幅を設定しています。

  <mx:ConstraintColumn  id="col1" width="80%"/> 
  
  

  親コンテナが拡大または縮小するに伴い、ConstraintColumn は常に使用可能な幅の 80 ％を占めるように拡大または縮小します。

  パーセント制約を指定する際のベストプラクティスは、すべてのパーセント制約の合計が 100 ％以下になるようにすることです。ただし、パーセント指定の合計値が 100 ％を超える場合、実際に割り当てられるパーセント値は、すべての制約の比例値の合計が 100 ％になるように計算されます。例えば、2 つの制約オブジェクトのパーセント値が 100 ％と 50 ％に指定されている場合、これらの値は 66.6 ％と 33.3 ％（1 つ目の値に 2/3、2 つ目の値に 1/3）に調整されます。

• 「コンテンツサイズ」（デフォルト）は、制約領域に割り当てる領域をその領域内の子オブジェクトのサイズで示すことを意味します。コンテンツのサイズが変更されると、領域のサイズも変更されます。固定またはパーセント値のサイズ設定パラメータのいずれも指定しない場合、コンテンツサイズ設定がデフォルトになります。

  次の例では、明示的な幅設定をすべて省略することによって、コンテンツサイズを指定しています。

  <mx:ConstraintColumn  id="col1"/> 
  
  

  この ConstraintColumn の幅は、その最大の子の幅によって決定されます。子がコンテンツサイズ指定の複数の制約を受ける行または列にまたがる場合、行および列の間で、子が使用する領域が配分されます。

ConstraintColumn クラスに対しては、maxWidth プロパティおよび minWidth プロパティを使用して列の幅を制限することも可能です。ConstraintRow クラスに対しては、maxHeight プロパティおよび minHeight プロパティを使用して行の高さを制限できます。親コンテナのサイズを変更した場合、制約を受ける列と行の最小サイズと最大サイズによって、制約領域の拡大量または縮小量が制限されます。制約領域を含む親コンテナのサイズ変更時に、コンテナをその制約領域の最小サイズよりも小さいサイズに縮小した場合、クリッピングされたコンテンツを表示するためにスクロールバーが表示されます。

制約を受ける行と列に基づく子コンポーネントの配置

子の制約パラメータに制約領域の ID を付加することによって、子コンポーネントを制約を受ける行または列に固定します。例えば、ConstraintColumn の ID が「col1」の場合、子の制約のセットをleft="col1:10"、right="col1:30"、horizontalCenter="col1:0" のように指定できます。

制約パラメータ（left, right, top および bottom）が制約領域 ID で修飾されていない場合、コンポーネントの制約は親コンテナの端を基準に設定されます。コンポーネントは、1 つの制約領域（行または列）だけを占めることも、複数の領域にまたがることもできます。

次の例では、制約を受ける行と列を使用して、Canvas コンテナ内に 3 つの Button コントロールを配置しています。

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

    <mx:Canvas id="myCanvas" backgroundColor="0x6699FF">

        <mx:constraintColumns>
            <mx:ConstraintColumn id="col1" width="100"/>
            <mx:ConstraintColumn id="col2" width="100"/>
        </mx:constraintColumns>
        <mx:constraintRows>
            <mx:ConstraintRow id="row1" height="100"/>
            <mx:ConstraintRow id="row2" height="100"/>
        </mx:constraintRows>

        <mx:Button label="Button 1" 
            top="row1:10" bottom="row1:10" 
            left="10"/>
        <mx:Button label="Button 2" 
            left="col2:10" right="col2:10"/>
        <mx:Button label="Button 3" 
            top="row2:10" bottom="row2:10" 
            left="col1:10" right="10"/>
    </mx:Canvas>

    <mx:Label text="canvas width:{myCanvas.width}"/>
    <mx:Label text="canvas height:{myCanvas.height}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例では、制約を受ける行と列をパーセント値で定義しています。アプリケーションのサイズを変更すると、Button コントロールのサイズもそれに応じて変更されます。

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

    <mx:Canvas id="myCanvas"
        backgroundColor="0x6699FF" 
        width="100%" height="100%">

        <mx:constraintColumns>
            <mx:ConstraintColumn id="col1" width="30%"/>
            <mx:ConstraintColumn id="col2" width="40%"/>
            <mx:ConstraintColumn id="col3" width="30%"/>
        </mx:constraintColumns>
        <mx:constraintRows>
            <mx:ConstraintRow id="row1" height="35%"/>
            <mx:ConstraintRow id="row2" height="55%"/>
        </mx:constraintRows>

        <mx:Button label="Button 1" 
            top="row1:10" bottom="row2:10" 
            left="10"/>
        <mx:Button label="Button 2" 
            left="col2:10" right="col3:10"/>
        <mx:Button label="Button 3" 
            top="row2:10" bottom="row2:10" 
            left="col3:10" right="col3:10"/>
    </mx:Canvas>

    <mx:Label text="canvas width:{myCanvas.width}"/>
    <mx:Label text="canvas height:{myCanvas.height}"/>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

修飾された制約と修飾されていない制約の組み合わせを指定できるだけでなく、一部の制約プロパティを無効にできます。サイズ設定と配置の制約の優先順位は、次のようになります。

1. コントロールの位置を決定する場合、中心の制約の指定は、他のすべての制約値よりも優先されます。
2. 次に、左端と上部の位置が決定されます。
3. 最後に、右端と下部の位置が、コンポーネントが最適に収まるように計算されます。

次の表は、制約を受けるコンポーネントが 1 つの制約領域に含まれる場合のコンポーネントの動作を定義したものです。「Edge 1」は、子コンポーネントに最初に指定された端の制約（left、 right、top または bottom）です。「Edge 2」は、2 番目に指定された端の制約の組み合わせ（left と right、top と bottom）です。「Size」は、子コンポーネントの明示的なサイズ（width、height）です。「Center」は、子オブジェクトを中央に配置する配置制約（horizontalCenter または verticalCenter）です。