API version 1

- ‐

LayoutContainerObject

• Object

  • DisplayObject

    • ContainerObject

      • LayoutContainerObject

内部に配置された子オブジェクトのレイアウト機能を持ったクラスの基底クラスです。

LayoutContainerObjectクラスは仮想クラスで、それ自体をインスタンス化することはできません。

レイアウトについて

childLayout プロパティに値を設定することで、レイアウトの種類を指定します。

親オブジェクトや子オブジェクトの各種プロパティを設定することでレイアウトの詳細を調整することができます。

子オブジェクトの配置の設定に使用されるプロパティ

子オブジェクトは個々のオブジェクトの以下のプロパティを設定して配置を行います。

placement プロパティの初期値はnullで、その場合は、x、y、width、heightが有効です。

placementプロパティに値が設定されている場合は、そちらが優先されます。

プロパティ	説明
x	水平方向の表示位置を示します。
y	垂直方向の表示位置を示します。
width	水平方向の表示サイズを示します。
height	垂直方向の表示サイズを示します。
placement.left	オブジェクト左端が、配置可能領域左端からleft指定値だけ右に来るように配置します。
placement.right	オブジェクト右端が、配置可能領域右端からright指定値だけ左に来るように配置します。
placement.horizontalCenter	オブジェクトの中央位置の配置可能領域中央からの水平方向の移動量を示します。left、rightが共に指定されていない場合のみ有効です。
placement.top	オブジェクト上端が、配置可能領域上端からtop指定値だけ下に来るように配置します。
placement.bottom	オブジェクト下端が、配置可能領域下端からbottom指定値だけ上に来るように配置します。
placement.verticalCenter	オブジェクトの中央位置の配置可能領域中央からの垂直方向の移動量を示します。top、bottomが共に指定されていない場合のみ有効です。
placement.width	水平方向の表示サイズを示します。left、rightが両方指定されている時は無視されます。
placement.maxWidth	widthをパーセント指定したときに、表示される幅の計算値がこの値より大きい場合はこの値の幅で表示されます。
placement.minWidth	widthをパーセント指定したときに、表示される幅の計算値がこの値より小さい場合はこの値の幅で表示されます。
placement.height	垂直方向の表示サイズを示します。top、bottomが両方指定されている時は無視されます。
placement.maxHeight	heightをパーセント指定したときに、表示される高さの計算値がこの値より大きい場合はこの値の高さで表示されます。
placement.minHeight	heightをパーセント指定したときに、表示される高さの計算値がこの値より小さい場合はこの値の高さで表示されます。

レイアウトの種類

以下の様なレイアウトが可能です。

標準のレイアウト

各子オブジェクトのx、y、width、height、placementプロパティの値に従って配置します。

childLayoutプロパティの設定値はCHILD_STDです。

水平方向のレイアウト

子オブジェクトを水平方向に1列に並べて配置します。

childLayoutプロパティの設定値はCHILD_HORIZONTALです。

調整可能なプロパティは以下の通りです。

プロパティ	説明
horizontalSpacing	子オブジェクト同士の間隔を指定します。
verticalAlign	子オブジェクトの整列方法(上寄せ・中央寄せ・下寄せ)を指定します。
horizontalAlign	子オブジェクト全体の親オブジェクト内の配置(左寄せ・中央寄せ・右寄せ)を指定します。

垂直方向のレイアウト

子オブジェクトを垂直方向に1列に並べて配置します。

childLayoutプロパティの設定値はCHILD_VERTICALです。

調整可能なプロパティは以下の通りです。

プロパティ	説明
verticalSpacing	子オブジェクト同士の間隔を指定します。
horizontalAlign	子オブジェクトの整列方法(左寄せ・中央寄せ・右寄せ)を指定します。
verticalAlign	子オブジェクト全体の親オブジェクト内の配置(上寄せ・中央寄せ・下寄せ)を指定します。

グリッド状のレイアウト

子オブジェクトを縦横に整列させて配置します。

グリッド状のレイアウトには2通りの設定方法があります。

1. グリッド全体を格納するオブジェクト内に、各セルに相当する子オブジェクトを直接配置しセル座標を設定する。

この方法の場合、親オブジェクトのchildLayoutプロパティにCHILD_GRIDを指定します。

Form FormGrid      { x =  10; y = 335; width = 305; height = 130;
  childLayout=CHILD_GRID;
  var p0 = new Placement { width="60px"; height="60px";}
  Button button0_0 { title = "button0_0"; placement = p0; var p = placement; p.top = 0; p.left = 0; placement = p;}
  Button button0_1 { title = "button01_1";placement = p0; var p = placement; p.top = 0; p.left = 1; p.bottom=1; p.height = null; placement = p;}
  Button button0_2 { title = "button0_2"; placement = p0; var p = placement; p.top = 0; p.left = 2; placement = p;}
  Button button0_3 { title = "button0_3"; placement = p0; var p = placement; p.top = 0; p.left = 3; placement = p;}
  Button button0_4 { title = "button0_4"; placement = p0; var p = placement; p.top = 0; p.left = 4; placement = p;}
  p0 = new Placement { height="60px"; } #width不指定なので、1行目の幅指定に合わされる
  Button button1_0 { title = "button1_0"; placement = p0; var p = placement; p.top = 1; p.left = 0; placement = p;}
  # top = 1; left = 1 には割り当てなし(上行のセルが占有)
  Button button1_2 { title = "button1_2"; placement = p0; var p = placement; p.top = 1; p.left = 2; placement = p;}
  #2セル分
  Button button1_3 { title = "button1_34";placement = p0; var p = placement; p.top = 1; p.left = 3; p.right = 4; placement = p; }
}

2. グリッド全体を格納するオブジェクト内に、1行分の子オブジェクトを格納するオブジェクトを並べて配置する。

この方法の場合、グリッド全体を格納するオブジェクトのchildLayoutプロパティにCHILD_GRIDを指定し、1行分の子オブジェクトを格納するオブジェクトのchildLayoutプロパティにCHILD_GRIDROWを指定します。

縦に2セル以上の大きさを持つセルを設定することは出来ません。

Form FormGridRow   { x = 325; y = 335; width = 305; height = 130;
  childLayout=CHILD_GRID;
  var p0 = new Placement { width="60px"; height="60px";}
  #GridRowを使う場合は、セルを上下に複数行を割り当てることはできない。
  Form formGridRow1 { #top = 0に自動割り当て
      childLayout=CHILD_GRIDROW;
      border=BORDER_NONE;
      Button button0_0 { title = "button0_0"; placement = p0; } #left = 0に自動割り当て
      Button button0_1 { title = "button0_1"; placement = p0; } #left = 1に自動割り当て
      Button button0_2 { title = "button0_2"; placement = p0; } #left = 2に自動割り当て
      Button button0_3 { title = "button0_3"; placement = p0; } #left = 3に自動割り当て
      Button button0_4 { title = "button0_4"; placement = p0; } #left = 4に自動割り当て
  }
  p0 = new Placement { height="60px"; } #width不指定なので、1行目の幅指定に合わされる
  Form formGridRow2 { #top = 1に自動割り当て
      childLayout=CHILD_GRIDROW;
      border=BORDER_NONE;
      Button button1_0 { title = "button1_0"; placement = p0; } #left = 0に自動割り当て
      #相対指定 left=1のため、絶対座標でleft=2に割り当て
      Button button1_2 { title = "button1_2"; placement = p0; var p = placement; p.left = 1; placement = p; }
      #left = 3に自動割り当て
      #相対指定 right=1のため、絶対座標でright=4に割り当て
      #left = 3～4の2セル分占有
      Button button1_3 { title = "button1_34"; placement = p0; var p = placement; p.right = 1; placement = p; }
  }
}

基本的にはchildLayoutプロパティにCHILD_GRIDを指定したオブジェクトの内部には、子オブジェクトが上から順に配置されます。

CHILD_GRIDROWを指定したオブジェクトの内部には、子オブジェクトが左から順に配置されます。

子オブジェクトのplacementプロパティの各値を設定することで、セルの位置や大きさを設定することが出来ます。

placementプロパティに数値を設定すると、通常はピクセル単位の指定となりますが、グリッド状のレイアウトの場合はセル座標として扱われます。

1番目の方法の場合は、セル座標は左上を(0,0)とする絶対座標となります。

2番目の方法の場合は、セル座標は水平方向の相対座標となります。

例えば、placement.left=1とすると左端が右へ1ずれるので左に1セル分の空白ができ、placement.right=1とすると右端が右へ1ずれるので1セル分幅が広がります。

プロパティ	説明
placement.left	横方向の配置を指定します。
placement.top	縦方向の配置を指定します。CHILD_GRIDROWを指定したオブジェクトの内部では意味を持ちません。
placement.right	横方向に複数のセル領域を占有する場合に右端のセル座標を指定します。
placement.bottom	縦方向に複数のセル領域を占有する場合に下端のセル座標を指定します。CHILD_GRIDROWを指定したオブジェクトの内部では意味を持ちません。
placement.height	セルの高さを指定します。同一行内の複数のセルに異なる値を設定した時は、最大値が適用されます。
placement.width	セルの幅を指定します。同一列内の複数のセルに異なる値を設定した時は、最大値が適用されます。

親オブジェクトの調整可能なプロパティは以下の通りです。

プロパティ	説明
horizontalSpacing	子オブジェクトの水平方向の間隔を指定します。
verticalSpacing	子オブジェクトの垂直方向の間隔を指定します。

最大表示のレイアウト

全ての子オブジェクトをフルサイズに配置し、どれか一つだけ表示させます。

childLayoutプロパティの設定値はCHILD_STACKです。

フローレイアウト

子オブジェクトを親オブジェクト内に敷き詰めるように配置します。

子オブジェクトは、先に配置した子オブジェクトの右に十分な空間があれば右に配置し、無ければその下に左に詰めて配置します。

childLayoutプロパティの設定値はCHILD_FLOWです。

子オブジェクトのサイズ調整について

水平・垂直方向あるいはグリッド状に子オブジェクトを整列させる場合で、列の幅や行の高さにピクセル指定(文字数指定なども含む)とパーセント指定が混在するときは、領域の配分は以下の手順で行われます。

例として列の幅の場合を示しますが、行の高さも同様です。

1. 領域全体の幅からピクセル指定の列の幅を設定値で確保します。

2. 余った領域の幅をパーセント指定の列数で等分し、幅の計算値がそれより小さくなる列は設定値で確保します。

3. 幅の計算値がオーバーする列や、幅を指定していない列で残りの領域を等分します。

余白について

親オブジェクトの内側に余白を設けるには、margin プロパティや padding プロパティを指定します。

• paddingプロパティで設定された余白に子オブジェクトがはみ出した場合は、はみ出した部分も表示されます。

• marginプロパティで設定された余白に子オブジェクトがはみ出した場合は、はみ出した部分は表示されません。

• 親オブジェクトがchildLayout=CHILD_STDのときは、placementプロパティが未設定の子オブジェクトにはpaddingは適用されません。

• paddingプロパティとmarginプロパティを併用したときは、marginプロパティで設定された余白の内側にpaddingプロパティで設定された余白があるような状態になります。

• プロパティ
• メソッド
• イベント
• オペレータ
• 定数