Re: Learning Flex 3: Getting Up to Speed With Rich Internet Applications (Adobe Developer Library)
Chapter 8 : LAYING OUT YOUR APPLICATIONS |
返信 |
Book Flex |
絶対配置 - layout="absolute"。絶対座標でコンポーネントの位置を指定する。
Flex Builderのデフォルトだが、Panel等のコンテナの中は相対配置で指定するのが
一般的。
相対配置 - 他のコンポーネントの位置やサイズを考慮して位置を決定する。
layout="vertical", layout="horizontal"がよく使われる。
コンテナ - MXMLでは子要素として記述、またはASでaddChild()を使うことで、
任意の数のコンポーネントを含めることができる。
<mx:Panel> <mx:TextInput/> </mx:Panel>
Panel, HBox, VBox, Divided Box, Tile, Grid, Form等。
各子要素は0からインデックス番号がつけられ、getChildAt(1)でアクセスできる。
また、removeChild()で削除、swapChildren()で置換ができる。
サイズ - width, heightプロパティで、ピクセル数またはパーセントで指定できる。
ただし、ASではパーセント指定は、percentWidth, percentHeightで0-100の数値に
より行う。minWidth, maxWidth, minHeight, maxHeightで最小、最大サイズも指定
できる。
レイアウト - paddingLeft, paddingRight, paddingTop, paddingBottomで余白を
設定できる。また、horizontalGap, verticalGapで子要素間のギャップを指定する
方法もある。内部ではレイアウトは、以下の順に行われる。
- コンポーネントのデフォルトサイズの設定
- 最深の要素から順にサイズの算出
- 上位のコンテナから順にサイズと位置の決定
レイアウトのコントロール - Spacer, HRule, VRule等。
<mx:HBox width="250"> <mx:Button label="Left"/> <mx:Spacer width="100%"/> <mx:Button label="Right"/> </mx:HBox>
また、コンテナの属性、horizontalAlign, verticalAlignでleft, center, rightを
指定して並べ方を指定できる。
Constraint Rows/Columns - サイズ等の制約条件をconstraintRows, constraintColumns
に書くことができる。また、そのIDを指定して相対的な配置をtop="row1:10"のように
指定できる。
<mx:constraintRows> <mx:ConstraintRow id="row1" height="100"/> </mx:constraintRows> <mx:Button label="Button 1" top="row1:10" bottom="row1:10" left="10"/>
投稿者 6q7u9x | 返信 (0) | トラックバック (0)