デフォルトでは、Canvas コンテナの子を除くすべてのコンポーネントが自動的に配置されます。Canvas コンテナ、または layout プロパティが absolute に設定されている Application コンテナまたは Panel コンテナを使用する場合、子に絶対位置を指定するか、制約ベースのレイアウトを使用します。x プロパティと y プロパティを使用して、自動配置と絶対配置を使用できます。配置とサイズ設定の両方を制御できる制約ベースのレイアウトの使用の詳細については、制約の使用によるコンポーネントレイアウトの制御を参照してください。

自動配置

ほとんどのコンテナでは、レイアウト方向、コンテナのパディング、コンテナの子同士の間隔など、コンテナのレイアウト規則に従ってコンテナの子が自動的に配置されます。

自動配置を使用するコンテナでは、x プロパティまたは y プロパティを直接設定したり、move() を呼び出したりしても何も効果がないか、効果があっても一時的に過ぎません。これは、レイアウト計算で x 位置は指定された値ではなく、計算結果に設定されるためです。ただし、場合によっては、これらのコンテナの子の絶対位置を指定できることがあります。詳細については、自動配置の一時的な無効化を参照してください。

コンテナのプロパティを指定してレイアウトの属性を制御できます。プロパティの詳細については、『Adobe Flex リファレンスガイド』に記載されているコンテナのプロパティの説明を参照してください。コンポーネントのサイズを制御したり、スペーサの追加などの手法を使用したりすることによって、レイアウトを制御することもできます。

Spacer コントロールを使用したレイアウトの制御

Flex には、親コンテナ内での子のレイアウトに役立つ Spacer コントロールが用意されています。Spacer コントロールは実際には表示されませんが、親の内側の領域を割り当てます。

次の例では、Button コントロールを HBox コンテナの右端に揃えるために、パーセント値ベースの Spacer コントロールを使用して Button コントロールを右に寄せています。

<?xml version="1.0"?>
<!-- components\SpacerHBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            [Embed(source="assets/flexlogo.jpg")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </mx:Script> 
    
    <mx:HBox width="400">
        <mx:Image source="{imgCls}"/>
        <mx:Label text="Company XYZ"/>
        <mx:Spacer width="100%"/>
        <mx:Button label="Close"/> 
    </mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、HBox コンテナに含まれるパーセント値ベースのコンポーネントは Spacer コントロールだけです。そのため、Spacer コントロールは、HBox コンテナ内で他のコンポーネントが必要としないすべての使用可能領域を占めるようにサイズ設定されます。Flex は、Spacer コントロールを拡大することによって、Button コントロールをコンテナの右端に寄せます。

Spacer コントロールでは、サイズ設定と配置に関するすべてのプロパティ（width、height、maxWidth、maxHeight、minWidth、minHeight など）を使用できます。

自動配置の一時的な無効化

Move や Zoom などのエフェクトを使用すると、ユーザーアクションに応じて子のサイズや位置を変更できます。例えば、ユーザーが子を選択したときに、その子をコンテナの上部に移動し、サイズを倍にするように子を定義できます。このようなエフェクトでは、エフェクトの一部として子の x プロパティと y プロパティが変更されます。同様に、ボタンのクリックなどに応じてコントロールの x 座標値または y 座標値を変更することで、コントロールの位置を変更することもできます。

自動配置を使用するコンテナでは、レイアウトの更新時に子の x プロパティと y プロパティの値は無視されます。したがって、エフェクトによって実行された x プロパティと y プロパティに対する変更はレイアウト更新時に取り消され、子の新しい位置は維持されません。

コンテナの autoLayout プロパティを false に設定することにより、アプリケーションの要求したアクションと矛盾する自動配置の更新が実行されないようにすることができます。このプロパティを false に設定すると、Flex は子が移動またはサイズ変更されたときにコンテナのコンテンツをレイアウトできなくなります。Flex では、autoLayout プロパティは Container クラスで定義されているので、すべてのコンテナがこのプロパティを継承します。デフォルト値は true であり、Flex によるレイアウトの更新が有効になっています。

コンテナの autoLayout プロパティを false に設定した場合でも、コンテナに子を追加するかコンテナから子を削除したときにはレイアウトが更新されます。アプリケーションの初期化、遅延インスタンス化および <mx:Repeater> タグでは、子が追加または削除されるので、これらのプロセスでは、autoLayout プロパティの値に関係なくレイアウトの更新が必ず発生します。したがって、autoLayout プロパティの値に関係なく、コンテナの初期化中にコンテナの子の初期レイアウトが定義されます。

次の例では、VBox コンテナのレイアウト更新を無効にしています。

<?xml version="1.0"?>
<!-- components\DisableVBoxLayout.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:VBox autoLayout="false" 
        width="200" 
        height="200">

        <mx:Button/>
        <mx:Button id="btn" 
            click="btn.x += 10;"/>
        <mx:Button id="btn2" 
            creationComplete="btn2.x = 100; btn2.y = 75;"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、3 つの Button コントロールはすべて、最初は VBox コンテナの規則に従ってレイアウトされます。VBox コントロールで子がレイアウトされた後、Flex によってボタンが表示される前に、3 つ目のボタンの creationComplete イベントリスナーが送出されます。したがって、3 つ目のボタンが表示されるときに、ボタンの位置は creationComplete リスナーによって指定された x 位置および y 位置になります。ボタンが表示された後、ユーザーが 2 つ目のボタンをクリックするたびに、ボタンが 10 ピクセルずつ右に移動します。

コンテナの autoLayout プロパティを false に設定すると、子を移動またはサイズ変更した後に、Flex はコンテナのレイアウトを更新できなくなります。そのため、どうしても必要な場合以外は、このプロパティを false に設定しないようにしてください。autoLayout プロパティをデフォルト値の true に設定した状態でアプリケーションを必ずテストし、特定のコンテナおよびそのコンテナでの子の特定のアクションに必要な場合にのみ、false に設定することをお勧めします。

エフェクトの詳細については、ビヘイビアの使用を参照してください。

非表示コントロールのレイアウトの防止

デフォルトでは、レイアウトと領域の確保は非表示コンポーネントを含めたすべてのコンポーネントに対して行われますが、非表示コントロールは表示されません。非表示コントロールを表示状態にしたときにコントロールが表示されることになる場所は、空白の領域として示されます。非表示コントロールの場所には、コンテナの背景が表示されます。ただし、コンテナが次のいずれかのコンポーネントの場合、コンポーネントの子コンポーネントの includeInLayout プロパティを false に設定することにより、コンテナのその他の子をレイアウトするときに、子コンポーネントが考慮されないようにすることができます。

• Box、またはそのサブクラスのいずれか：HBox、VBox、DividedBox、HDividedBox、VdividedBox、Grid、GridItem、GridRow、ControlBar、ApplicationControlBar
• Form
• Tile とそのサブクラスである Legend
• ToolBar

コンポーネントの includeInLayout プロパティが false の場合、そのコンポーネントは他のコンポーネントのレイアウト計算には含まれませんが、レイアウトは行われます。つまり、そのコンポーネントの領域が確保されないまま、コンポーネントが描画されます。その結果、コンポーネントは、レイアウト順で後続のコンポーネントの下に表示される場合があります。コンポーネントが描画されないようにするには、visible プロパティも false に設定する必要があります。

次の例は、includeInLayout プロパティと visible プロパティの効果を示しています。この例では、VBox コントロールの 3 つの Panel コントロールの真ん中の部分で、この 2 つのプロパティを個別に切り替えることができます。

<?xml version="1.0"?>
<!-- components\HiddenBoxLayout.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:VBox>
        <mx:Panel id="p1" 
            title="Panel 1" 
            backgroundColor="#FF0000"/>
        <mx:Panel id="p2" 
            title="Panel 2" 
            backgroundColor="#00FF00"/>
        <mx:Panel id="p3" 
            title="Panel 3" 
            backgroundColor="#0000FF"/>
    </mx:VBox>

    <mx:HBox>
        <mx:Button label="Toggle Panel 2 Visible" 
            click="{p2.visible=!p2.visible;}"/>
        <mx:Button label="Toggle Panel 2 in Layout" 
            click="{p2.includeInLayout=!p2.includeInLayout;}"/>
    </mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このアプリケーションを実行し、ボタンをクリックして、visible プロパティと includeInLayout プロパティの様々な組み合わせの結果を確認します。この例の動作は次のとおりです。

• レイアウトに 2 つ目の Panel コントロールを含め、このコントロールを非表示にした場合、コントロールの領域が確保されます。コントロールの場所には、VBox コンテナの背景が表示されます。
• レイアウトに 2 つ目の Panel コントロールを含めなかった場合、VBox のサイズが変更され、HBox がボタンと共に上に移動します。その後、レイアウトに 2 つ目の Panel コントロールを含めると、VBox のサイズが再度変更され、HBox とボタンが下に移動します。
• レイアウトに 2 つ目の Panel コントロールを含めずに、このコントロールが表示されるようにすると、コントロールは描画されますが、3 つ目の Panel コントロールのレイアウト時に考慮されないので、2 つのパネルが重なって表示されます。Panel コントロールのタイトルのアルファはデフォルトの 0.5 に設定されているので、2 つ目の Panel の位置で 2 つ目と 3 つ目の Panel コントロールが結合されます。

絶対配置

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

• layout プロパティを "absolute"（ContainerLayout.ABSOLUTE）に指定した場合、Application コントロールと Panel コントロールは絶対配置を使用します。
• Canvas コンテナは、常に絶対配置を使用します。

絶対配置では、x プロパティと y プロパティを使用して子コントロールの位置を指定するか、制約ベースのレイアウトを指定します。それ以外の場合、子は親コンテナの 0,0 の位置に配置されます。x 座標と y 座標を指定したときは、プロパティ値を変更した場合にのみコントロールが再配置されます。次の例では、絶対配置を使用して VBox コントロールを Canvas コントロール内に配置しています。

<?xml version="1.0"?>
<!-- components\CanvasLayout.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">

    <mx:Canvas 
        width="100" height="100" 
        backgroundColor="#999999">

        <mx:VBox id="b1" 
            width="80" height="80" 
            x="20" y="20"
            backgroundColor="#A9C0E7">
        </mx:VBox>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次のイメージが生成されます。

絶対配置を使用すると、コンテナの子の位置を完全に制御できます。そのため、コンポーネントを重ねることができます。次の例では、前の例に 2 つ目の VBox を追加して、最初のボックスと部分的に重ねています。

<?xml version="1.0"?>
<!-- components\CanvasLayoutOverlap.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">

    <mx:Canvas 
        width="100" height="100" 
        backgroundColor="#999999">

        <mx:VBox id="b1" 
            width="80" height="80" 
            x="20" y="20"
            backgroundColor="#A9C0E7">
        </mx:VBox>
        
        <mx:VBox id="b2" 
            width="50" height="50" 
            x="0" y="50"
            backgroundColor="#FF0000">
        </mx:VBox>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次のイメージが生成されます。