MX コンポーネントでは、Application、Module、Window など LayoutContainer クラスのサブクラスまたは、Panel、TitleWindow クラスなどの layout プロパティに対して "absolute"、"horizontal"、"vertical" といった文字列を定義することで、子表示オブジェクトのレイアウトを指定することができましたが、Flex 4 の Spark コンポーネントでは、layout プロパティに LayoutBase クラスのサブクラスを定義することで、子表示オブジェクトのレイアウトを指定することができます。

        <s:Group>
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    <s:Button x="0" y="0" />
    <s:Button x="100" y="0" />
</s:Group>
    

サンプルコード 01. layout プロパティに BasicLayout クラスを定義

なお、layout プロパティを持っているコンポーネントは、GroupBase クラスのサブクラスまたは、GroupBase のサブクラスを子表示オブジェクトとして保持している SkinnableContainer クラスや SkinnableDataContainer クラスのサブクラスです。以下のクラスは layout プロパティを持っている主なコンポーネントです。

Application
BorderContainer
DataGroup
DataRenderer
Graphic
Group
NavigatorContent
Panel
Skin
TitleWindow
Window ( AIR のみ )

新しいレイアウトクラス

Flex 4 の Spark コンポーネントでは、以下のレイアウトクラスが用意されています。すべて LayoutBase クラスのサブクラスです。

BasicLayout
HorizontalLayout
VerticalLayout
TileLayout

BasicLayout クラス

BasicLayout クラスは、「絶対レイアウト」クラスです。
各子表示オブジェクトの x プロパティと y プロパティ、または制約 ( left、right、top、bottom などのスタイルプロパティ ) の設定に従い配置させることができます。

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : BasicLayoutSample.fxp )

サンプル 01 : BasicLayoutSample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image/file

画像をクリックいただくとサンプルSWFファイルが表示されます

HorizontalLayout クラス

HorizontalLayout クラスは、「水平レイアウト」クラスです。
各子表示オブジェクトを水平方向に左から右の順序で配置させることができます。

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : HorizontalLayoutSample.fxp )

サンプル 02 : HorizontalLayoutSample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_0/file

画像をクリックいただくとサンプルSWFファイルが表示されます

VerticalLayoutLayout クラス

VerticalLayout クラスは、「垂直レイアウト」クラスです。
各子表示オブジェクトを垂直方向に上から下の順序で配置させることができます。

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : VerticalLayoutSample.fxp )

サンプル 03 : VerticalLayoutSample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_1/file

画像をクリックいただくとサンプルSWFファイルが表示されます

TileLayout クラス

TIleLayout クラスは、「タイルレイアウト」クラスです。
各子表示オブジェクトを同一サイズのセルの列と行に配置させることができます。

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : TileLayoutSample.fxp )

サンプル 04 : TileLayoutSample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_2/file

画像をクリックいただくとサンプルSWFファイルが表示されます

以上が Flex 4 の新しいレイアウトクラスでした。
Flex 3 以前の開発経験がある方は、以下の一覧でSpark コンポーネントがどの MX コンポーネントのレイアウト機能の代替を果たすのか、イメージが掴めると思います。

MX コンポーネント	Spark コンポーネント
Canvas	BasicLayout を定義した Group ( ただし Advanced Constraints は除く )
HBox	HorizontalLayout を定義した Group または HGroup
VBox	VerticalLayout を定義した Group または VGroup
Tile	TileLayout を定義した Group
List	VerticalLayout を定義した List
HorizontalList	HorizontalLayout を定義した List
TileList	TileLayout を定義した List

表 01 : MX コンポーネントと Spark コンポーネントのレイアウト機能代替一覧

新しいレイアウトクラスのプロパティ

HorizontalLayout クラスや VerticalLayout クラスなど、レイアウト機能がクラス化されたことにより、子表示オブジェクトの表示に関するプロパティが実装されました。いくつか例を挙げます。

gap プロパティ

各子表示オブジェクト間の間隔 ( ピクセル単位 ) を定義するプロパティです。
HorizontalLayout クラスの場合は水平方向、VerticalLayout クラスの場合は垂直方向の間隔を指定します。なお、TileLayout クラスには、horizontalGap プロパティと verticalGap プロパティが用意されています。

        <s:Group>
    <s:layout>
        <s:VerticalLayout gap="10" />
    </s:layout>
    <s:Button />
    <s:Button />
    …
</s:Group>
    

サンプルコード 02. gap プロパティ使用例

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : GapPropertySample.fxp )

サンプル 05 : GapPropertySample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_3/file

画像をクリックいただくとサンプルSWFファイルが表示されます

verticalAlign、horizontalAlign プロパティ

コンテナの幅または高さを基準にした配置位置を定義するプロパティです。
horizontalAlign は、水平方向の配置 ( "left"、 "center"、 "right" など ) を定義し、verticalAlign は、水平方向の配置 ( "top"、 "middle"、 "bottom" など ) を定義します。

        <s:Group>
    <s:layout>
        <s:VerticalLayout
            horizontalAlign = "center"
            verticalAlign = "middle"
        />
    </s:layout>
    <s:Button />
    <s:Button />
    …
</s:Group>
    

サンプルコード 03. verticalAlign、horizontalAlign プロパティ使用例

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : AlignPropertySample.fxp )

サンプル 06 : AlignPropertySample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_4/file

画像をクリックいただくとサンプルSWFファイルが表示されます

paddingBottom、paddingLeft、paddingRight、paddingTop プロパティ

コンテナの端と、最初または最後の子表示オブジェクトとの間にあるピクセル数を定義するプロパティです。
paddingBottom は、コンテナの下端とコンテナのすべての子表示オブジェクトの下端との間にあるピクセル数を定義し、paddingTop は、コンテナの上端とコンテナのすべての子表示オブジェクトの上端との間にあるピクセル数を定義します。
paddingLeft は、コンテナの左端と最初の子表示オブジェクトの左端との間にあるピクセル数を定義し、paddingRight は、コンテナの右端と最後の子表示オブジェクトの右端との間にあるピクセル数を定義します。

        <s:Group>
    <s:layout>
        <s:VerticalLayout
            paddingBottom="10"
            paddingLeft="10"
            paddingRight="10"
            paddingTop="10"
        />
    </s:layout>
    <s:Button />
    <s:Button />
    …
</s:Group>
    

サンプルコード 04. paddingBottom、paddingLeft、paddingRight、paddingTop プロパティ使用例

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : PaddingPropertySample.fxp )

サンプル 07 : PaddingPropertySample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_5/file

画像をクリックいただくとサンプルSWFファイルが表示されます

カスタムレイアウトクラス

LayoutBase クラスを拡張することによって、独自のカスタムレイアウトクラスを作成することができます。拡張するときに気をつけるべき点は、updateDisplayList() メソッドか measure() メソッドのどちらかをオーバーライドして実装するということです。

measure() メソッドは、レイアウトクラスを定義しているコンテナ ( target プロパティ ) のデフォルトサイズを計算します。updateDisplayList() メソッドは、レイアウトクラスを定義しているコンテナ ( target プロパティ ) の各子表示オブジェクトの位置とサイズを指定します。

下記サンプルコードは、子表示オブジェクトをランダムに配置するカスタムレイアウトクラスのupdateDisplayList() メソッドです。

        import mx.core.ILayoutElement;
import spark.layouts.supportClasses.LayoutBase;
public class RandomLayout extends LayoutBase {
    public function RandomLayout() {
        super();
    }
    public override function updateDisplayList(width:Number, height:Number):void {
        var i:int;
        var l:int;
        var ex:Number;
        var ey:Number;
        var ew:Number;
        var eh:Number;
        var element:ILayoutElement;

        l = target.numElements;

        for(i = 0; i < l; i++) {
            element = target.getVirtualElementAt(i);
            if(element != null) {
                ew = element.getPreferredBoundsWidth();
                eh = element.getPreferredBoundsHeight();
                ex = Math.random() * 10000 % ( width - ew );
                ey = Math.random() * 10000 % ( height - eh );
                element.setLayoutBoundsSize(ew, eh);
                element.setLayoutBoundsPosition(ex, ey);
            }
        }
    }
}
    

サンプルコード 05. 子表示オブジェクトをランダムに配置する RandomLayout クラス

RandomLayout クラスを定義しているコンテナの描画が更新されるたびに、RandomLayout クラスの updateDisplayList() メソッドが実行され、子表示オブジェクトをランダムに配置します。
保持する子表示オブジェクトの数は、コンテナの numElements プロパティで取得できます。
子表示オブジェクトのサイズを指定するときは子表示オブジェクトの setLayoutBoundsSize() メソッドを、配置位置を指定するときは setLayoutBoundsPosition() メソッドを使用します。

実際の動作サンプルは以下の通りです。 ( サンプルプロジェクト : RandomLayoutSample.fxp )

サンプル 08 : RandomLayoutSample.swf

/content/dotcom/jp/devnet/flex/articles/flex4_tutorials_no10/jcr:content/articlecontentAdobe/image_6/file

画像をクリックいただくとサンプルSWFファイルが表示されます

サンプルを表示させたら、ブラウザのウィンドウサイズを変えてみてください。サイズが変わるたびに、ボタンの配置位置が変わっていることに気付くはずです。この他にも、カスタムレイアウトクラスでは、子表示オブジェクトを 3D 表示させたりエフェクトをかけたり、さまざまな方法でカスタマイズすることが可能です。

おわりに

以上が Flex 4 から新しく採用された Spark Layouts でした。
Flex 3 以前では、コンポーネントにレイアウトのロジックも組み込まれていましたが、明確にクラス化されロジックが分離されて、よりシンプルに画面設計できることに気付けたかと思います。

これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションの表現の幅をより広げることができるでしょう。

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー（2011年9月30日更新）にご同意いただいたものとみなされます。

Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts

著者廣畑大雅 (taiga)氏

作成日

ページツール

Tags

必要条件

ユーザーレベル

必要な製品

Flex 4 マスターシリーズ連載記事一覧

はじめに

新しい layout プロパティ

新しいレイアウトクラス

BasicLayout クラス

HorizontalLayout クラス

VerticalLayoutLayout クラス

TileLayout クラス

新しいレイアウトクラスのプロパティ

gap プロパティ

verticalAlign、horizontalAlign プロパティ

paddingBottom、paddingLeft、paddingRight、paddingTop プロパティ

カスタムレイアウトクラス

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts

著者 廣畑 大雅 (taiga)氏

作成日

ページ ツール

Tags

必要条件

ユーザーレベル

必要な製品

Flex 4 マスターシリーズ 連載記事一覧

はじめに

新しい layout プロパティ

新しいレイアウトクラス

BasicLayout クラス

HorizontalLayout クラス

VerticalLayoutLayout クラス

TileLayout クラス

新しいレイアウトクラスのプロパティ

gap プロパティ

verticalAlign、horizontalAlign プロパティ

paddingBottom、paddingLeft、paddingRight、paddingTop プロパティ

カスタムレイアウトクラス

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

著者廣畑大雅 (taiga)氏

ページツール

Flex 4 マスターシリーズ連載記事一覧