レイアウト1 ( rowLayout )

レイアウトとは

ウインドウ上に、ボタンなどの部品を配置(レイアウト)してゆくにはレイアウトコマンドが必要です。
これまでは、 columnLayout によって縦 1 列に部品を並べていきました。 しかし、横に並べたり、もっと自由にレイアウトを行いたい場合には、 そのためのレイアウトコマンドを使用します。

レイアウトの種類

レイアウトコマンドには、以下のような種類があります。

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

サンプルプログラムと図は Layoutの一覧 を参照してください。

複数のレイアウト

いままでは columnLayout のような単純なレイアウトだけでしたが、 1 つのレイアウトだけではできないような、 複雑なレイアウトを実現するためにはどうしたら良いでしょうか。
実は、レイアウトは入れ子にすることができるので、 いくらでも複雑なレイアウトを作ることができます。
ただ入れ子にする場合には、あるレイアウトの範囲がどこまでなのかを決めなければなりません。 ウインドウ上の部品は、必ずある 1 つのレイアウトの範囲内にある必要があるからです。 そのために setParent ..; コマンドを使用して、 どこまでが特定のレイアウトの範囲なのかを決めてゆきます。

複数のレイアウトの例

レイアウトによってボタンを縦・横に並べる GUI を作ってみましょう。
ここでは、ウインドウの部品を横に並べるために rowLayout を使用してみます。
なお、このスクリプトはレイアウトの練習なので、各ボタンを押しても何も実行しません。

  1. 以下の MEL スクリプトを layout1.mel という名前で作ります。 
    window -title "レイアウト 1";
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. スクリプト エディタ の ファイル → ソーススクリプト によって layout1.mel を読み込みます。
  3. 以下のようなウインドウが表示されます。
    [layout1.melの実行結果]

スクリプトの解説

window -title "layout1";
layout1 というタイトルのついたウインドウを作ります。
columnLayout;
このコマンドによって、これ以降に作られる部品は縦に並んでゆきます。
button -label "A";
A というラベルのついたボタンを作ります。
rowLayout -numberOfColumns 2 -columnWidth2 20 20;
このコマンドにより、これ以後作られる部品は横 1 列に並んでゆきます。
各フラグの意味は以下の通りです。
-numberOfColumn 2
横に何個の部品を並べるかを指定します。
-columnWidth2 20 20
各部品を並べる間隔の指定です。(2 個の場合)
この場合、B・C ボタンがそれぞれ 20 ピクセル幅の範囲にレイアウトされます。
3 個の部品を並べる場合には代わりに -columnWidth3 を使用します。
button -label "B";
B というラベルのついたボタンを作ります。
button -label "C";
C というラベルのついたボタンを作ります。
rowLayout コマンドの有効範囲なので B ボタンの横に並びます。
setParent ..;
rowLayout の有効範囲の終りです。
これ以後は columnLayout が有効になるので、これ以降は部品が縦に並びます。
button -label "D";
D というラベルのついたボタン作ります。
ここは columnLayout の有効範囲なのでボタンは縦に並びます。
rowLayout -numberOfColumns 3 -columnWidth3 20 20 20;
このコマンドにより、これ以後作られた部品は横 1 列に並んでゆきます。
-numberOfColumn 3
横に何個の部品を並べるかを指定します。
-columnWidth3 20 20 20
各部品を並べる間隔の指定です。(3 個の場合)
この場合、E・F・G ボタンがそれぞれ 20 ピクセル幅の範囲にレイアウトされます。
button -label "E";
E というラベルのついたボタンを作ります。
button -label "F";
F というラベルのついたボタンを作ります。
rowLayout コマンドの有効範囲なので、 E ボタンの横に並びます。
button -label "G";
G というラベルのついたボタン作ります。
rowLayout コマンドの有効範囲なので、 F ボタンの横に並びます。
setParent ..;
rowLayout の有効範囲の終りです。
これ以後は columnLayout が有効なので、部品は縦に並びます。
showWindow;
ウインドウを表示します。
[layout1.mel のレイアウト構成図]

Tips

上の setParent コマンドの説明で、 このコマンドはレイアウトの範囲を決めるために使うと説明してきましたが、 今までのウインドウを作成するスクリプトでは setParent コマンドは使っていませんでした。
実は、今までの各スクリプトの最初に実行されている columnLayout コマンドに対応する、 setParent コマンドは省略してあります。
省略しないとどうなるかは、以下のスクリプトを実行してみるとわかります。 


window;
columnLayout;
setParent ..;
showWindow;

実行すると何もないウインドウが表示されます。
表示された後で、 button; コマンドを実行してみてください。
するとウインドウにボタンが現れます。
同様に、部品を作るコマンド(スライダなど)を実行すると、 ウインドウに部品が追加されてゆくのがわかると思います。

練習

まとめ

練習課題

参考

Prev | Next
Home | Contents
Mail