レイアウト1

レイアウトとは

GUIにおいて部品(ボタンなど)を配置(レイアウト)してゆく場合、レイアウトコマンドによって行なう。
これまではcolumnLayoutによって縦1列に部品を並べていったが、それ以外の並べ方をする場合にはそのためのレイアウト(コマンド)を使用する。

レイアウトの種類

レイアウト(コマンド)には以下のような種類がある。

columnLayout: 部品を縦1列に並べるレイアウト。
rowLayout: 部品を横1列に並べるレイアウト。
rowColumnLayout: 部品を縦・横に並べるレイアウト。
formLayout: 部品を絶対的・相対的な位置指定で並べるレイアウト。
frameLayout: 部品に枠(フレーム)をつけて表示する。
gridLayout: 部品を同じ大きさのセルに入れて表示する。
menuBarLayout: 部品にメニューバーをつけて表示する。
paneLayout: 子どもの部品を様々な方向で分割して表示する。
scrollLayout: スクロール付で部品を表示する。
shelfLayout: シェルフレイアウトを作る。
shelfTabLayout: シェルレイアウトを作る。
tabLayout: タブを作る。

複数のレイアウト

レイアウトの中にレイアウトを入れ子にしておくこともできる。
そうすることによって、複雑な部品の配置を実現できる。
その場合にsetParent ..;によってどこまでが特定のレイアウトの範囲なのかを決める。

複数のレイアウトの例

レイアウトによってボタンを縦・横にGUIを作ってみよう。
GUIの部品を横に並べるためにはrowLayoutなどを使用する。
以下のMELスクリプトをlayout1.melという名前で作る。


window -title "layout1";
columnLayout;
button -label "A";
rowLayout -numberOfColumns 2 -columnWidth2 20 20;
	button -label "B";
	button -label "C";
setParent ..;
button -label "D";
rowLayout -numberOfColumns 3 -columnWidth3 20 20 20;
	button -label "E";
	button -label "F";
	button -label "G";
setParent ..;
showWindow;

このMELスクリプトを読み込んで実行すると以下のウインドウが表示される。
(各ボタンにはコマンドを割り当てていないので押しても何も実行されない。)

window -title "layout1"; ウインドウを作る。
columnLayout; columnLayoutをつくる。
これ以後の部品は縦1列に並んでゆく。
button -label "A"; Aというラベルのついたボタン。
rowLayout -numberOfColumns 2 -columnWidth2 20 20; rowLayoutコマンドにより、これ以後の部品は横1列に並んでゆく。

-numberOfColumn
横に何個の部品を並べるかを指定する。
-columnWidth2
各部品を並べる間隔の指定である。(2個の場合)
button -label "B"; Bというラベルのついたボタン。
button -label "C"; Cというラベルのついたボタン。
setParent ..; rowLayoutの有効な範囲の終り。
これ以後はcolumnLayoutが有効なので、部品は縦1列に並ぶ。
button -label "D"; Dというラベルのついたボタン。
rowLayout -numberOfColumns 3 -columnWidth3 20 20 20; rowLayoutコマンドにより、これ以後の部品は横1列に並んでゆく。
部品が3個の場合は-columnWidth3を使用する。
button -label "E"; Eというラベルのついたボタン。
button -label "F"; Fというラベルのついたボタン。
button -label "G"; Gというラベルのついたボタン。
setParent ..; rowLayoutの有効な範囲の終り。
これ以後はcolumnLayoutが有効なので、部品は縦1列に並ぶ。
showWindow; windowを表示する。

練習

以下のようにボタンが並ぶようなレイアウトのMELスクリプト(layout2.mel)を作れ。

まとめ

レイアウトは複数の種類を組み合わせて使用できる。
そうすることによって複雑なレイアウトを実現できる。

参考

Prev | Next
Home | Contents

abe@injapan.net