レイアウト1 ( rowLayout )

レイアウトとは

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

レイアウトの種類

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

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

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

複数のレイアウト

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

複数のレイアウトの例

レイアウトによってボタンを縦・横に並べる 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;
このコマンドによって、これ以降に作られる部品は縦に並んでゆきます。
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