Flex クイックスタート： はじめに
目次
Flex コンポーネントの位置指定と配置
ほとんどの Flex コンテナではあらかじめ設定されたルールを使用して、コンテナ内で定義したすべての子コンポーネントの位置を自動的に決定します。 Canvas コンテナを使用する場合、または Application コンテナや Panel コンテナを layout プロパティを "absolute" に設定して使用する場合は、その子に対して絶対位置を指定したり、制約レイアウトを使用したりすることができます。
Flex アプリケーションのコンポーネントの位置は、次の 3 つの方法で指定することができます。
自動位置指定の使用
ほとんどのコンテナの場合は、レイアウトの方向、コンテナのパディング、コンテナのそれぞれの子の間隔など、コンテナのレイアウトルールに基づいてコンテナの子の位置が自動的に決定されます。
自動位置指定を使用するコンテナの場合は、子コンポーネントの x または y プロパティを直接設定したり、 move() メソッドを呼び出したりしても、効果がないか一時的に効果が適用されるだけです。これは、コンポーネントの位置が指定した値ではなく、計算された結果に基づいて決定されるためです。
コンテナプロパティを指定してレイアウトをさまざまに制御することができます。 次によく使われるプロパティを示します。
layout: 有効値："horizontal","vertical"といったDIV要素の"absolute". ■訳を後の文節にまとめました■"horizontal"に設定すると、コンテナの子が横 1 列に配置されます。 ■訳を後の文節にまとめました■"vertical"に設定すると、コンテナの子が縦 1 列に配置されます。 ■訳を後の文節にまとめました■"absolute"設定について詳しくは、絶対位置指定および制約レイアウトの節を参照してください。horizontalAlign: 有効値："left","center"といったDIV要素の"right".verticalAlign: 有効値："top","middle"といったDIV要素の"bottom".
■訳を後の文節にまとめました■ "left" ■訳を後の文節にまとめました■ horizontalAlign ■訳を後の文節にまとめました■ "top" ■訳を後の文節にまとめました■ verticalAlign Application コンテナの horizontalAlign プロパティのデフォルト設定は "left"、verticalAlign プロパティのデフォルト設定は "top" です。 "center" および "middle"次の例では、デフォルト設定を無効にして、それぞれのプロパティを "center" および "middle" に設定します。■訳をまとめました■
■訳を後の文節にまとめました■ "vertical" ■訳を後の文節にまとめました■ layout また、Panel コンテナの layout プロパティのデフォルト設定 "vertical" も無効にして、Label および Button コントロールが横に並んで表示されるようにします。 この padding Panel コンテナの padding プロパティを使用して、コンテナのマージン領域をピクセルで指定できます。■タグのみの部分を開けませんでした■
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutAutomatic/index.html" horizontalAlign="center" verticalAlign="middle" width="380" height="150" > <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" layout="horizontal" verticalAlign="middle" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!';" /> </mx:Panel> </mx:Application>
結果
このコンテンツを視聴するには Flash が必要です
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
絶対位置指定の使用
次の 3 つのコンテナに絶対位置指定を使用することができます。
- Application および Panel コントロールに絶対位置指定を使用する場合は、
layoutプロパティを "absolute" に設定します。■タグのみの部分を開けません■"absolute". - Canvas コンテナの場合は常に絶対位置指定が使用されます。
絶対位置指定の場合は、子コントロールの位置を x および y プロパティを使用して指定するか、制約レイアウトを指定します。それ以外の場合は、子が親コンテナの 0,0 の位置に配置されます。 x と y 座標を指定する場合は、プロパティ値を変更した場合にのみ、コントロールが再配置されます。
次の例では、Panel コンテナの layout プロパティを "absolute" に設定します。■タグのみの文節を開けません■ "absolute". 次に、Label および Button コントロールの x および y プロパティを設定して、2 つのコントロールが重なるようにします。
ヒント：Flex のコントロールを重ねることができるのは、絶対位置指定を使用する場合だけです。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutAbsolute/index.html" horizontalAlign="center" verticalAlign="middle" width="280" height="170" > <mx:Panel title="My Application" layout="absolute" width="220" height="90" > <mx:Label id="myLabel" x="10" y="10" width="180" fontWeight="bold" fontSize="24" /> <mx:Button id="myButton" x="60" y="10" label="Click Me!" click="myLabel.text = 'Hello, World!';" /> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
制約レイアウトの使用
制約レイアウトを使用して、子コンポーネントのサイズと位置を同時に操作することができます。このレイアウトでは、コンポーネントの辺または中心を固定して、コンポーネントのコンテナに対する相対位置に配置することができます。
絶対位置指定が使用可能なコンテナの場合は、制約レイアウトを使用して、その直接の子の位置とサイズを設定することができます。
制約を指定するには、子コンポーネントの top, bottom, left, right, horizontalCenterといったDIV要素の verticalCenter スタイルプロパティを使用します。
コンポーネントのエッジの固定
コンテナの対応するエッジに対してピクセル単位のオフセットで、コンポーネントのエッジを固定することができます。 コンテナのサイズを変更しても、固定された子のエッジの親のエッジに対する距離は変わりません。
この top, bottomや left、 right スタイルプロパティを使用して、コンポーネントの辺とコンテナの対応する辺の距離をピクセルで指定することができます。
次の例では、Button コントロールの下および右のエッジを、Button コントロールが含まれる Panel コンテナのエッジから 10 ピクセルの位置に固定します。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutConstraintsBottomRight/index.html" horizontalAlign="center" verticalAlign="middle" width="360" height="200" > <mx:Panel title="My Application" layout="absolute" width="300" height="130" > <mx:Button id="myButton" label="A button" bottom="10" right="10"
/> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
コンポーネントの拡大
たとえば上と下のように 2 つのエッジを固定した場合は、コンテナのサイズを変更するとコンポーネントのサイズも変更されます。 次の例では、Button コントロールの 4 つのエッジすべてを、Button コントロールが含まれる Panel コンテナのエッジから 10 ピクセルの位置に固定します。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutConstraintsEdges/index.html" horizontalAlign="center" verticalAlign="middle" width="360" height="200" > <mx:Panel title="My Application" layout="absolute" width="300" height="130" > <mx:Button id="myButton" label="A button" top="10" bottom="10" left="10" right="10"
/> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
コンポーネントの中心の固定
コンテナの中心に対してピクセル単位のオフセットで、子コンポーネントの水平中心や垂直中心を固定することもできます。 パーセントのサイズを使用しなければ、子の指定した寸法は変更されません。
上記の horizontalCenter と verticalCenter スタイルを使用して、コンポーネントの中心点とコンテナの中心の指定した方向の距離を指定します。負の値を指定するとコンポーネントが中心から左または上に移動します。
上記の horizontalCenter と verticalCenter スタイルはコンテナの中心からのオフセットをピクセルで指定し、コントロールを配置する位置を決定します。 次の例では、Button コントロールの両方のスタイルを 0 （ゼロ）に指定して、Panel コンテナの中心に正確に配置します。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutConstraintsCenter/index.html" horizontalAlign="center" verticalAlign="middle" width="360" height="200" > <mx:Panel title="My Application" layout="absolute" width="300" height="130" > <mx:Button id="myButton" label="A button" verticalCenter="0" horizontalCenter="0" /> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
複雑な例
次の例では、制約レイアウトを使用して Label コントロールを中心に配置し、Button コントロールを Panel とほぼ同じ大きさに拡大します。 Label コントロールの top プロパティを 10 に設定して、Panel の上部から 10 ピクセルの位置に表示されるようにします。 Label コントロールの horizontalCenter プロパティを 10 に設定して、Panel の中心に正確に配置します。
Button コントロールの left および right プロパティを 10 に設定して、Panel の両端から 10 ピクセルの位置まで拡大します。 bottom プロパティを 10 に設定して、Button コントロールの下のエッジを Panel の下のエッジから 10 ピクセル離れた位置に固定します。
次の図は、プロパティを設定した結果を視覚的に示しています。 視覚的なレイアウトコントロールは Flex Builder 2 のデザインビューで表示することができます。
ヒント：■訳を後の文節にまとめました■ top または bottom スタイルプロパティを verticalCenter スタイルプロパティと共に指定しないでください。 verticalCenter 値は他のプロパティより優先されます。 同様に、 left または right スタイルプロパティを horizontalCenter スタイルプロパティと共に指定しないでください。
制約レイアウトで設定したサイズは、明示的に指定したサイズやパーセントで指定したサイズより優先されます。 たとえば、 left および right スタイルプロパティを指定した場合に制約レイアウトで設定される幅は、 width または percentWidth プロパティで設定される幅よりも優先されます。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/LayoutConstraints/index.html" horizontalAlign="center" verticalAlign="middle" width="360" height="200" > <mx:Panel title="My Application" layout="absolute" width="300" height="130" > <mx:Label id="myLabel" fontWeight="bold" fontSize="24" top="10" horizontalCenter="0" /> <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!';" bottom="10" height="22" left="10" right="10" /> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
詳細情報
アセットの埋め込みについて詳しくは、『Flex 2 Developer's Guide』の「Sizing and Positioning Components」の節を参照してください。
著者について
Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。
