« Flex2 コントロール - ナビゲーション - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part2 - »

2006年7月19日 (水)

Flex2 コントロール - レイアウト・コンテナ Part1 -

画面をレイアウトする際に使用するコンテナのサンプルと簡単な使用例です。
コントロール サンプルページ
example.mxml

  • HBox
    中身を横方向に配置するBoxです。
    Boxのdirectionにhorizontalを指定した場合と同じようです。
    BoxはHTMLの div タグのような感覚で使用できそうです。
    <mx:HBox>
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:HBox>
    
    <mx:Box direction="horizontal">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Box>
  • VBox
    中身を縦方向に配置するBoxです。
    Boxのdirectionにverticalを指定した場合と同じようです。
    <mx:VBox>
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:VBox>
    
    <mx:Box direction="vertical">
        <mx:Button label="button1" />
        <mx:Button label="button2" />
        <mx:Button label="button3" />
    </mx:Box>
  • Grid
    中身を格子状に配置します。
    HTMLの table タグのような感覚で使用できそうです。
    GridRowで行を区切ります。
    列はGridItemの中身の数で自動的に調整されるようです。
    <mx:Grid>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="Row1 Col1" />
                <mx:Button label="Row1 Col2" />
                <mx:Button label="Row1 Col3" />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="Row2 Col1" />
                <mx:Button label="Row2 Col2" />
                <mx:Button label="Row2 Col3" />
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
  • Tile
    こちらも、中身を格子状に配置する際に使用します。
    Gridと違い、列や行の数が大きさや中身の数によって変化します。
    width 及び height を指定すると、それに収まるように自動調整されるようです。
    指定しない場合は、中身の数のよってバランスよく配置されるように自動調整されるようですね。
    direction に vertical を指定すると配置順が縦方向になります。
    <mx:Tile>
        <mx:Button label="1" />
        <mx:Button label="2" />
        <mx:Button label="3" />
        <mx:Button label="4" />
        <mx:Button label="5" />
        <mx:Button label="6" />
        <mx:Button label="7" />
        <mx:Button label="8" />
        <mx:Button label="9" />
    </mx:Tile>
  • Spacer
    スペーサーです。
    width 及び height に間隔を指定します。
    <mx:Label text="label" />
    <mx:Spacer width="20" />
    <mx:Button label="button1" />

|

« Flex2 コントロール - ナビゲーション - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part2 - »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11003746

この記事へのトラックバック一覧です: Flex2 コントロール - レイアウト・コンテナ Part1 -:

« Flex2 コントロール - ナビゲーション - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part2 - »