2013/10/21

Flex:: レイアウトを綺麗に整えるconstraintsについて

Flex 4.10:: Flexでレイアウトを綺麗にするためにconstraintsを使います。
constraintsには以下のものがあります。
  • right
  • left
  • top
  • bottom
  • baseline
  • horizontalCenter
  • verticalCenter
constraintsは親コンテイナーに対する位置とサイズを制御します。

位置について
  • rightは親コンテイナーの右端からコンポーネント右端までの距離(ピクセル)です。(leftは左端から)
  • topは親コンテイナーの上端からコンポーネントの上端までの距離(ピクセル)です。(bottomは下端から)
  • baselineは親コンテイナーの上端からコンポーネントのラベル位置の下端までの距離です。
  • horizontalCenterは親コンテイナーの中心点からコンポーネントの中心点のｘ座標の距離です。(verticalCenterはy座標の距離)
※right or leftとhorizontalCenterが同時にセットされた場合はhorizontalCenterが優先されます。（top, bottom, baselineとverticalCenterも同様）
※baselineとtopとの違いは、違う種類のコンポーネント（ボタンとラベルなど）を配置した際に、topを同じ値にしてもそれぞれのコンポーネントの上端で揃うために、綺麗にそろいません。しかし、baselineを同じ値にセットすると、綺麗に揃います。（下の結果の画像を参照）

サイズについて
  • rightのみがセットされた場合はデフォルトの幅になります。（widthが明示してある場合はその値になる）（leftも同様）
  • topのみがセットしてある場合はデフォルトの高さになります。（heightが明示してある場合はその値になる）（bottom, baselineも同様）
  • rightとleftが両方ともセットしてある場合は、コンポーネントの幅はその値に合わせて変化します。（topとbottomも同様）
※rightとleftがセットしてあり、かつwidthもセットしてある場合は、right-leftの値が優先され、widthは無視されます。（top-bottomとheightも同様）


下はright, left, top, bottom, baselineの値を５０にセットしたサンプルです。
■結果（画像）

■ソースコード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
 <s:BorderContainer width="300" height="300">
  <s:Button label="left" left="50"/>
  <s:Button label="right" right="50"/>
  <s:Button label="bottom" bottom="50"/>
  <s:Button label="top" top="50" />
  <s:Label text="top" top="50" x="70"/>
  <s:Button label="baseline" baseline="50" x="100"/>
  <s:Label text="baseline" baseline="50" x="170"/>
 </s:BorderContainer>
</s:Application>
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)