レイアウト1

レイアウトとは ( rowLayout )

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

レイアウトの種類

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

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

複数のレイアウト

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

複数のレイアウトの例

レイアウトによってボタンを縦・横に並べるGUIを作ってみよう。
GUIの部品を横に並べるためにはrowLayoutなどを使用する。

  1. 以下の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;
  2. Script Editorの File → Source Script によってlayout1.melを読み込む。
  3. 以下のようなウインドウが表示される。
    (各ボタンにはコマンドを割り当てていないので押しても何も実行されない。)
    [layout1.melの実行結果]

スクリプトの解説

window -title "layout1";
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というラベルのついたボタン。
rowLayoutコマンドの有効範囲なのでBボタンの横に並ぶ。
setParent ..;
rowLayoutの有効範囲の終り。
これ以後はcolumnLayoutが有効なので、部品は縦1列に並ぶ。
button -label "D";
Dというラベルのついたボタン。
ここはcolumnLayoutの有効範囲なのでボタンは縦に並ぶ。
rowLayout -numberOfColumns 3 -columnWidth3 20 20 20;
rowLayoutコマンドにより、これ以後の部品は横1列に並んでゆく。
各部品の間隔を指定するために、部品が3個の場合は-columnWidth3を使用する。
button -label "E";
Eというラベルのついたボタン。
button -label "F";
Fというラベルのついたボタン。
rowLayoutコマンドの有効範囲なのでEボタンの横に並ぶ。
button -label "G";
Gというラベルのついたボタン。
rowLayoutコマンドの有効範囲なのでFボタンの横に並ぶ。
setParent ..;
rowLayoutの有効範囲の終り。
これ以後はcolumnLayoutが有効なので、部品は縦1列に並ぶ。
showWindow;
ウインドウを表示する。

練習

まとめ

参考

Prev | Next
Home | Contents
abe@injapan.net