Flex学習記06 - MXMLのレイアウト

これまでのエントリ

FlexのUIについてです。

MXMLファイルによるレイアウトを自在に操れるようになるのがポイント
HTMLでいうところの、tableとかdivを使ったレイアウト手法
Flex Builderにはビジュアルレイアウトエディタがあるものの、微調整は難しい。
ソースを直接操れるようにしたい。
要するに手書き推奨（HTMLも同じかと思う）

とりあえず、Flexレイアウト手書き勉強会 - はてな技術発表会日記を読んでおくべきでしょう（以下はほとんど引用です）

コンテナは基本 height/width を100%にする。
子は親コンテナのheight/width によってレイアウトが決まる
親のheight/widthを入れないと、子のサイズによって自動で親のサイズが決まる
VBox(縦)、HBox(横) でほとんどのレイアウトを組める
- VBox : 縦配置
- HBox : 横配置

簡単・きれいに配置するためのテンプレ

基本的にはこんな感じのをテンプレとして用意しておくといいと思います。
Flex学習記04 - プロジェクトの作成についてで作成したプロジェクトに、MXMLアプリケーション(src/layout1.xml)を追加します。

src/layout1.xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#ffffff"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  >
  <mx:Style>
    <![CDATA[
    ]]>
  </mx:Style>
  <mx:VBox
    width="100%"
    height="100%"
  >
  	<mx:HBox
      width="100%"
      height="100%"
  	>
  	</mx:HBox>
  </mx:VBox>
</mx:Application>

全面真っ白になりますが、右クリックするとFlashが再生されているのが分かります。

次に、実際にコンテナを配置してみたサンプルです。

src/layout2.xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#ffffff"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  >
  <mx:Style>
    <![CDATA[
    ]]>
  </mx:Style>
  <mx:VBox
    width="100%"
    height="100%"
  >
    <!-- VBoxによる縦配置-->
    <mx:TitleWindow width="100%" title="TitleWindow-A" height="100%" backgroundColor="0xAAAAAA" />
    <mx:TitleWindow width="100%" title="TitleWindow-B" height="100%" backgroundColor="0xFFFFFF" />
    <!-- /VBoxによる縦配置-->
  	<mx:HBox
      width="100%"
      height="100%"
  	>
      <!-- HBoxによる横配置-->
      <mx:TitleWindow width="100%" title="TitleWindow-C" height="100%" backgroundColor="0xCCCCCC" />
      <mx:TitleWindow width="100%" title="TitleWindow-D" height="100%" backgroundColor="0xDDDDDD" />
      <!-- /HBoxによる横配置-->
  	</mx:HBox>
  </mx:VBox>
</mx:Application>

ブラウザのリサイズに応じてコンテナのサイズも変わります。

余白の調整にはSpacer

余白の調整には Spacer コンポーネントを上手く使うべし。
- - paddingでも同様のことができるが、MXMLが汚くなってしまうので

src/spacer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#ffffff"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  viewSourceURL="src/spacer.mxml"
  >
  <mx:Style>
    <![CDATA[
    HBox {
      borderStyle:solid;
    }
    VBox {
      borderStyle:solid;
    }
    ]]>
  </mx:Style>
  <mx:VBox
    width="100%"
    height="100%"
  >
    <mx:Label text="縦に積まれるVBox" />
    <mx:Spacer height="5" />
    <mx:Button  label="Button-A" />
    <mx:Button  label="Button-B" />
    <!-- HBoxによる横配置-->
    <mx:HBox
      width="100%"
    >
      <mx:Label text="横に並べられるHBox" />
      <mx:Button  label="Button-C" />
      <mx:Spacer width="20" />
      <mx:Button  label="Button-D" />
    </mx:HBox>
    <mx:HBox
      width="100%"
      horizontalAlign="right"
    >
      <mx:Label text="横に並べられるHBox(右寄せ)" />
      <mx:Button  label="Button-E" />
      <mx:Spacer width="20" />
      <mx:Button  label="Button-F" />
    </mx:HBox>
    <!-- /HBoxによる横配置-->
    <mx:Label text="縦に積まれるVBox" />
    <mx:Spacer height="5" />
    <mx:Button  label="Button-Y" />
    <mx:Button  label="Button-Z" />
  </mx:VBox>
</mx:Application>

実際、Spacerのサイズ調整には気を遣いそうですが、シンプルに組めて良さそうです。