Flex は、一連の規則に従ってコンポーネントのレイアウトを制御します。レイアウト規則は、個々のコンポーネントのサイズ設定規則と、コンテナのサイズ設定規則および配置規則を組み合せたものです。Flex では自動レイアウトをサポートしているので、多くの場合、最初にコンポーネントのサイズまたは位置を設定する必要はありません。レイアウトの制御は Flex に任せ、開発者はアプリケーションのロジックの構築に専念することができます。必要に応じて、後でインスタンスのサイズを調整できます。

各コンテナには、レイアウトを制御するための独自の規則があります。例えば、VBox コンテナでは、子は 1 つの列にレイアウトされます。Grid コンテナでは、子は行および列のセルにレイアウトされます。パディングは、Application コンテナでは 24 ピクセル、他の多くのコンテナでは 0 ピクセルです。

Flex にはビルトインのデフォルトレイアウト規則がありますが、コンポーネントのプロパティとメソッドを使用してレイアウトをカスタマイズできます。すべてのコンポーネントには、height や width など、コンポーネントのサイズを絶対値またはコンテナに対する相対値で指定するための複数のプロパティがあります。各コンテナにも、レイアウト属性の設定に使用できるプロパティとスタイルがあります。Tile コンテナの verticalGap スタイルや horizontalGap スタイルなどの設定を使用して子同士の間隔を設定したり、direction プロパティで行または列のレイアウトを指定したりできます。コンテナ内のコンポーネントをレイアウトする際に様々な配置手法を使用することもできます。例えば、一部のコンテナでは、x 絶対座標と y 絶対座標に基づく配置をサポートしています。

Flex でのレイアウトについて

Flex では、Layout Manager によってレイアウトが制御されます。Layout Manager は、次の 3 段階のプロセスでアプリケーション内の各コンポーネントのサイズと位置を決定します。

第 1 段階 - 処理パス 

アプリケーションの各コンポーネントのプロパティ設定を決定します。この段階では、コンテンツがプロパティ設定に依存するコンポーネントを、Flex によってサイズと位置が決定される前に設定できます。

処理パスでは、各コンポーネントは Layout Manager の指示で commitProperties() メソッドを実行してプロパティ値を決定します。

第 2 段階 - 計算パス 

アプリケーション内のすべてのコンポーネントのデフォルトサイズを計算します。このパスは、最も深くネストされたコンポーネントから始まり、Application コンテナに向けて進みます。計算パスでは、各コンポーネントの測定サイズ（デフォルトサイズ）が決定されます。各コンテナのデフォルトサイズは、子のデフォルトサイズまたは明示的なサイズ（指定されている場合）に基づきます。例えば、Box コンテナのデフォルトの幅は、すべての子のデフォルトの幅または明示的な幅の合計に、境界線の太さ、パディング、子同士の間隔を加えたものと等しくなります。

計算パスでは、各コンポーネントは Layout Manager の指示で measureSizes() メソッド（measure() メソッドを呼び出すプライベートメソッド）を実行して、コンポーネントのデフォルトサイズを決定します。

第 3 段階 - レイアウトパス 

コンポーネントの移動やサイズ変更などを行って、アプリケーションをレイアウトします。このパスは最も外側のコンテナから始まり、最も内側のコンポーネントに向けて進みます。レイアウトパスでは、各コンポーネントの実際のサイズと配置が決定されます。また、lineTo() メソッドや drawRect() メソッドの呼び出しなど、プログラムによる描画も実行されます。

レイアウトパスでは、Flex は、コンポーネントのサイズ設定プロパティで親に対するパーセント値としてサイズが指定されているかどうかを判別し、その設定を使用して子コンポーネントの実際のサイズを決定します。各コンポーネントは Layout Manager の指示で updateDisplayList() メソッドを実行して、コンポーネントの子をレイアウトします。そのため、このパスを「更新パス」と呼ぶこともあります。

Flex 基準系について

Flex では、位置とサイズを決定する際に次の基準系を使用します。

• ローカル領域とローカル座標系は、コンポーネントの外側の境界に対して相対的に表されます。コンポーネントの境界線やスクロールバーなどのビジュアルエレメントはローカル座標に含まれます。
• 可視領域は、コンポーネントのビジュアルエレメントの内側にある領域です。つまり、この領域はコンポーネントの表示されている部分であり、子コントロール、テキスト、イメージその他のコンテンツを含めることができます。Flex には、この領域用の別の座標系はありません。
• コンテンツ領域とコンテンツ座標系には、ビジュアルエレメントを除くコンポーネントのすべてのコンテンツが含まれます。この領域には、現在クリッピングされており、コンポーネントをスクロールしないと表示されない領域も含まれています。例えば、スクロール可能な TextArea コントロールのコンテンツ領域には、現在画面からスクロールアウトされているテキストの領域が含まれます。

Flex では、パーセント値ベースのサイズを決定するとき、および制約ベースのレイアウトを実行するときに可視領域を使用します。

絶対配置を指定するときに使用する Flex コンポーネントの x プロパティと y プロパティは、コンテンツ座標系にあります。

Flex 座標系の詳細については、Flex 座標の使用を参照してください。

コンポーネントのサイズ設定について

コンポーネントの高さと幅は、計算パスとレイアウトパスで決定されます。これらのサイズを取得するには、height プロパティと width プロパティを使用します。これらのプロパティや他のプロパティを使用して、コンポーネントのサイズを制御できます。

Flex では、次の方法でコントロールとコンテナのサイズを制御できます。

デフォルトサイズ設定  

コントロールとコンテナのサイズが自動的に決定されます。

明示的なサイズ設定  

height プロパティと width プロパティを絶対値に設定します。

パーセント値ベースのサイズ設定 

コンポーネントのサイズをコンテナのサイズに対するパーセント値で指定します。

制約ベースのレイアウト 

コンポーネントの端をコンテナ内の特定の位置に固定することにより、サイズと位置を制御します。

コンポーネントのサイズの制御の詳細については、コンポーネントのサイズ設定を参照してください。

コンポーネントの配置について

Flex では、アプリケーションを初期化するときにコンポーネントを配置します。また、アプリケーションまたはユーザーがビジュアルエレメントのサイズまたは位置に影響する可能性のある何らかの操作を実行した場合にも、レイアウトパスを実行し、コンポーネントを配置または再配置します。例えば、次のような場合です。

• アプリケーションによって、サイズ設定を指定するプロパティ（x、y、width、height、scaleX、scaleY など）が変更された場合。
• 変更によってコンポーネントの計算済みの幅または高さが影響を受ける場合。例えば、Button コントロールのラベルテキストが変更された場合や、ユーザーがコンポーネントのサイズを変更した場合などです。
• コンテナに子を追加するか、コンテナから子を削除した場合、子のサイズを変更した場合または子を移動した場合。例えば、アプリケーションでコンポーネントのサイズを変更できる場合、コンテナのレイアウトが更新され、子の新しいサイズに基づいて子が再配置されます。
• horizontalScrollPolicy や fontFamily など、測定や描画を必要とするプロパティまたはスタイルが変更された場合。

まれに、アプリケーションプログラマがコンポーネントのレイアウトを強制的に実行することが必要な場合があります。詳細については、レイアウトの手動での強制実行を参照してください。

Flex は、コントロールの配置とレイアウトのための次の 2 つのメカニズムを備えています。

自動配置 

Flex は、コンテナおよびコンポーネントに固有の一連の規則に従って、コンテナの子を自動的に配置します。Box、Grid、Form などのほとんどのコンテナでは、自動配置を使用します。自動配置は、「自動レイアウト」と呼ばれることもあります。

絶対配置 

それぞれの子の x プロパティと y プロパティを指定するか、制約ベースのレイアウトを使用します。制約ベースのレイアウトでは、コンテナの 1 つまたは複数の端と子の端、ベースラインまたは中心との距離を指定します。絶対配置は、「絶対レイアウト」と呼ばれることもあります。

絶対配置は、次の 3 種類のコンテナでサポートされています。

• Application コンテナと Panel コンテナは、デフォルトで自動配置を使用しますが、layout プロパティを "absolute" に指定した場合は絶対配置を使用します。
• Canvas コンテナは、常に絶対配置を使用します。

コントロールの位置の制御の詳細については、コントロールの配置とレイアウトを参照してください。

コンポーネントのレイアウトパターン

Flex では、コンテナとその子をレイアウトする際に、コンテナのタイプによってそれぞれ異なるレイアウトパターンを使用します。通常、これらのパターンは、次の表に分類されたタイプのいずれかに一致します。この表は、各タイプの一般的なレイアウト動作、コンテナのデフォルトサイズの決定方法およびパーセント値ベースの子のサイズ設定方法をまとめたものです。

基本的なレイアウト規則と注意事項

Flex では、次の基本規則に従ってレイアウトを実行します。これらの規則を覚えておくと、Flex でのレイアウトの詳細を理解しやすくなり、アプリケーションがそのようにレイアウトされた理由や、アプリケーションの外観を変更する方法を判断する上で役立ちます。

Flex でのコンポーネントのサイズ設定方法の詳細については、コンポーネントのサイズの決定と制御を参照してください。コンポーネントの配置の詳細については、コントロールの配置とレイアウトを参照してください。

• Flex では、まず、すべてのコンポーネントの測定（デフォルト）サイズまたは明示的に設定されたサイズを決定します。このサイズは、最も内側の子コントロールから順に決定され、最後に最も外側のコントロール（Application コントロール）のサイズが決定されます。これは、計算パスで実行されます。
• 計算パスが終了すると、次にパーセント値ベースのすべてのサイズを決定し、コンポーネントをレイアウトします。レイアウトは、最も外側のコンテナから開始され、最後に最も内側のコントロールがレイアウトされます。これは、レイアウトパスで実行されます。
• 開発者がピクセル値に設定したサイズは強制的に適用される固定サイズであり、コンポーネントに対して設定した最大サイズまたは最小サイズの指定よりも優先されます。
• 計算パスで決定されたデフォルトサイズは、明示的なサイズまたはパーセント値ベースのサイズが設定されていない（または制約ベースのレイアウトを使用する）コンポーネントのサイズを指定するものであり、このサイズは固定されます。
• パーセント値ベースのサイズ指定は、おおよその基準となるものです。レイアウトアルゴリズムは可能であればこの要求を満たし、パーセント値を使用して比例サイズを決定しますが、実際のサイズが要求されたサイズよりも小さくなる場合があります。パーセント値ベースのサイズは常にコンポーネントの最大サイズと最小サイズの範囲内にあり、それらの範囲の制約を受けます。パーセント値ベースのサイズを使用した場合、コンテナの子がコンテナのサイズを超えることはありません。

レイアウトの手動での強制実行

プログラムによってコンポーネントを再度レイアウトすることが必要になる場合があります。通常、Flex は、大量の計算を必要とするプロパティをスクリプトによって設定するときに、そのスクリプトの実行が終了するまでそれらのプロパティの処理を遅延します。例えば、width プロパティを設定すると、オブジェクトの子またはその親の幅の再計算が必要となることがあるので、このプロパティの設定は遅延されます。処理を遅延することにより、スクリプトで width プロパティが複数回設定された場合に、その処理を何度も繰り返すのを防ぐことができます。ただし、スクリプトが完了する前に、レイアウトを強制的に実行することが必要になる場合もあります。

レイアウトを強制的に実行する必要がある状況として、次のような場合が考えられます。

• PrintDataGrid クラスを使用して複数ページのデータグリッドを印刷する場合。
• エフェクトを再生する前に、ターゲットで開始値が設定された場合。
• プロパティを変更した後にビットマップデータをキャプチャする場合。

レイアウトを強制的に実行するには、レイアウトする必要のあるコンポーネントの validateNow() メソッドを呼び出します。このメソッドを呼び出すと、オブジェクトとそのすべての子のプロパティ、サイズおよびレイアウトが検証および更新され、必要に応じて再描画されます。このメソッドは計算負荷が高いので、必要な場合にのみ呼び出すように注意してください。

validateNow() メソッドの使用例については、PrintDataGrid レイアウトの更新を参照してください。