ビジュアルコンポーネントのサイズ設定 -- Flex 2.01

Flex のサイズ設定およびレイアウトメカニズムでは、次の方法でビジュアルコンポーネントのサイズを制御できます。

デフォルトサイズ設定 コントロールとコンテナのサイズを自動的に決定します。デフォルトサイズ設定を使用するには、コンポーネントのサイズやレイアウト制約を指定しないようにします。

明示的サイズ設定 height プロパティと width プロパティにピクセル値を設定します。こうすると、コンポーネントのサイズが絶対サイズに設定されます。これらの値が Flex によってオーバーライドされることはありません。たとえば次の <mx:Application> タグは、Application のサイズを明示的に設定します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="300" 
    width="600">

パーセント値ベースのサイズ設定 コンポーネントのサイズをコンテナサイズのパーセント値で指定します。そのためには、percentHeight プロパティと percentWidth プロパティを指定するか、または MXML タグ内で height プロパティと width プロパティを 100% などのパーセント値に設定します。たとえば次のコードは、HBox コンテナに対してパーセント値ベースのサイズを設定します。

<mx:HBox id="hBox1" xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="30%" width="90%"/>

次の ActionScript 行は、HBox の幅を異なるパーセント値に再設定します。

hBox1.percentWidth=40;

制約ベースのレイアウト コンポーネントの端または中心をコンテナ内の特定の位置に固定することで、サイズと位置を同時に制御できます。指定可能なスタイルには、top、bottom、left、right、horizontalCenter、および verticalCenter があります。制約ベースのレイアウトを使用できるのは、絶対レイアウトを使用するコンテナの子のみです。Application コンテナと Panel コンテナはオプションでこのレイアウト方式を使用できます。Canvas コンテナは常にこのレイアウト方式を使用します。次の例では、制約ベースのレイアウトを使用して HBox の水平方向の位置を指定し、垂直方向の高さと位置は明示的に設定しています。

<mx:HBox id="hBox2" xmlns:mx="http://www.adobe.com/2006/mxml" 
    left="30"right="30" 
    y="150" 
    height="100"/>

サイズ設定方法は組み合わせることができますが、適切な組み合わせにする必要があります。コンポーネントのサイズに対して複数のサイズ設定を指定しないでください。たとえば、1 つのコンポーネントに対して height と percentHeight を同時に指定することは避けてください。また、結果的なサイズが適切であることも確認する必要があります。たとえば、スクロールバーを使わない場合やコンポーネントがクリッピングされないようにする場合には、コンテナの子のサイズがコンテナのサイズを超えないようにしてください。

Flex でコンポーネントのサイズがどのように設定されるか、およびサイズ設定の指定方法の詳細については、コンポーネントのサイズと位置の制御を参照してください。

サブトピック

コンポーネントのサイズ設定の例

次の例は、明示的にサイズ設定されたコンテナの中に幅が明示的に指定された子コントロールとパーセント値で指定された子コントロールが混在している場合を示します。これは、コンポーネントのサイズを決定する際に伴う柔軟性と複雑さを表しています。後でサイズ設定動作を確認できるように、コンポーネントのサイズを "flashlog.txt" にログ出力しています。

<?xml version="1.0"?>
<!-- components\CompSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="logSizes();">

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hb1" width="250">
        <mx:Label id="lb1" 
            text="Hello" 
            width="50"/>
        <mx:Image id="img1" 
            source="@Embed(source='assets/flexlogo.jpg')" 
            width="75%"/>
        <mx:Button id="b1" 
            label="Button" 
            width="25%"/>
    </mx:HBox>
</mx:Application>

このアプリケーションは、幅 250 ピクセルの HBox コンテナと、その中に含まれる幅 50 ピクセルのラベル、コンテナの幅の 75% を要求するイメージ、およびコンテナの幅の 25% を要求するボタンから成ります。コンポーネントのサイズは次のように決定されます。

ボタンとイメージの size プロパティを 50% に変更すると、ボタンの最小サイズが要求サイズより小さくなるため、ボタンとイメージにそれぞれ残りの領域の 50% (92 ピクセル) が割り当てられます。

次の例では、Image コントロールのサイズを明示的に設定し、Button コントロールにはデフォルトサイズを使用しています。このコードでも、上の例と同じ結果になります。

<?xml version="1.0"?>
<!-- components\CompSizingExplicit.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="logSizes();">

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hb1" width="250">
        <mx:Label id="lb1" 
            text="Hello" 
            width="50"/>
        <mx:Image id="img1" 
            source="@Embed(source='assets/flexlogo.jpg')" 
            width="119" />
        <mx:Button id="b1" 
            label="Button"/>
    </mx:HBox>
</mx:Application>

パーセント値ベースのサイズ設定を使用すると、サイズ計算時にコンテナの間隔と余白を考慮する必要がなくなりますが、その最大の利点はコンテナのサイズを変更したときに発揮されます。コンテナのサイズを変更すると、パーセント値ベースの子のサイズも、使用可能なコンテナのサイズに基づいて自動的に変更されます。次の例では、ブラウザのサイズを変更すると、左側に配置された一連のコントロールのサイズも変更されます。ただし、右側に配置された同じコントロールは、コンテナのサイズが固定されているため、同じサイズのまま維持されます。最初の Button コントロールをクリックすると、コンポーネントのサイズが "flashlog.txt" にログ出力されます。

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

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%">
        <mx:HBox id="hb1" width="40%" borderStyle="solid">
            <mx:Label id="lb1"
                text="Hello" 
                width="50"/>
            <mx:Image id="img1" 
                source="@Embed(source='assets/flexlogo.jpg')" 
                width="60%"/>
            <mx:Button id="b1" 
                label="Button" 
                width="40%"
                click="logSizes();"/>
        </mx:HBox>
        
        <mx:HBox width="260" borderStyle="solid">
            <mx:Label 
                text="Hello" 
                width="50"/>
            <mx:Image 
                source="@Embed(source='assets/flexlogo.jpg')" 
                width="119" />
            <mx:Button 
                label="Button"/>
        </mx:HBox>
    </mx:HBox>
</mx:Application>