レイアウト2 (FormLayout と tabLayout)

FormLayout と tabLayout

ここでは FormLayout() と、 tabLayout() の使用方法を練習してみましょう。
formLayout() はレイアウトの中で最も自由がきくもので、 ウインドウの上下左右からの絶対位置や、 他の部品からの相対位置によって部品を配置することができます。
tabLayout() はタブを作成することができます。 この関数を実行すると、 それ以降の部品・レイアウトはタブグループになり、 1 つのタブになってゆきます。

FormLayout と tabLayout の使用例

まず、FormLayout() によってタブの部分と 閉じる ボタンを配置し、tabLayout() によって A・B ボタンのあるタブと C・D ボタンのあるタブを切替えることができるようにしてみましょう。

  1. 以下の MEL スクリプトを Python スクリプトに書き直して、 layout5.py という名前で保存します。
    string $windowName = `window -title "layout5"`;
    string $form = `formLayout`;
    string $closeButton = `button -label "閉じる" -command ("deleteUI " + $windowName)`;
    formLayout -edit
    	-attachForm $closeButton "top"    130
    	-attachForm $closeButton "left"   0
    	-attachForm $closeButton "bottom" 0
    	-attachForm $closeButton "right"  0
    	$form;
    string $tabs = `tabLayout -innerMarginWidth 10 -innerMarginHeight 10`;
    formLayout -edit
    	-attachForm $tabs "top"    0
    	-attachForm $tabs "left"   0
    	-attachControl $tabs "bottom" 10 $closeButton
    	-attachForm $tabs "right"  0
    	$form;
    string $tab1 = `columnLayout`;
    	button -label "A";
    	button -label "B";
    setParent ..;
    string $tab2 = `columnLayout`;
    	button -label "C";
    	button -label "D";
    setParent ..;
    tabLayout -edit -tabLabel $tab1 "タブ1" -tabLabel $tab2 "タブ2" $tabs;
    showWindow;
    
  2. 以下の Python スクリプトを layout5.py という名前で作ります。
    import pymel.core as pm
    
    with pm.window(title='layout5') as windowName:
        form = pm.formLayout()
        closeButton = pm.button(label=u'閉じる', command=pm.Callback(pm.deleteUI, windowName.name())
        pm.formLayout(form, edit=True,
    	attachForm=((closeButton, 'top',    130),
    		    (closeButton, 'left',   0),
    		    (closeButton, 'bottom', 0),
    		    (closeButton, 'right',  0)))
        with pm.tabLayout(innerMarginWidth=10, innerMarginHeight=10) as tabs:
            with pm.columnLayout() as tab1:
                pm.button(label='A')
                pm.button(label='B')
                pm.setParent('..')
            with pm.columnLayout() as tab2:
                pm.button(label='C')
                pm.button(label='D')
                pm.setParent('..')
        pm.formLayout(form, edit=True,
    	attachForm=((tabs, 'top',    0),
    		    (tabs, 'left',   0),
    		    (tabs, 'right',  0)),
    	attachControl=(tabs, 'bottom', 10, closeButton))
        pm.tabLayout(tabs, edit=True, tabLabel=((tab1, u'タブ1'), (tab2, u'タブ2')))
    
  3. スクリプト エディタ の ファイル → スクリプトのロード によって layout5.py を読み込んで、テンキーの Enter キーなどで実行します。
  4. 以下のウインドウが表示されます。
    各ボタンには関数を割り当てていないので押しても何も実行されません。
    [layout5.melの実行結果 タブ1] [layout5.melの実行結果 タブ2]

スクリプトの解説

import pymel.core as pm
pymel.core モジュールをインポートしてpmという名前で使用できるようにします。
with pm.window(title='layout5') as windowName:
ウインドウを layout5 というタイトルで作ります。
form = pm.formLayout()
formLayout を作ります。
closeButton = pm.button(label=u'閉じる', command=pm.Callback(pm.deleteUI, windowName.name())
ウインドウを閉じるためのボタンを作ります。
tabLayout の後で作るとタブグループの 1 部になってしまうのでここで作っておきます。
pm.formLayout(form, edit=True,\
attachForm=((closeButton, 'top', 130),\
(closeButton, 'left', 0),\
(closeButton, 'bottom', 0),\
(closeButton, 'right', 0)))
formLayout(form)をエディットモードによって編集します。
edit フラグによってあらかじめ作っておいた formLayout のパラメータを変更することができます。
この edit フラグは他の多くの PyMEL 関数でも使用できます。
form は formLayout の名前の入った変数です。
MEL のように -attachForm を複数並べることはできないので、 Python では attachForm に与えるパラメータの数値・文字列はタプル(リスト)の並んだタプル(リスト)になっています。
attachForm の後の部分は以下のような意味になります。
(closeButton, 'top', 130)
ボタン(closeButton)の上辺はウインドウ上辺から130ピクセルの位置にします。
(closeButton, 'left', 0)
ボタン(closeButton)の左辺はウインドウ左辺から0ピクセルの位置にします。
(closeButton, 'bottom', 0)
ボタン(closeButton)の下辺はウインドウ下辺から0ピクセルの位置にします。
(closeButton, 'right', 0)
ボタン($closeButton)の右辺はウインドウ右辺から0ピクセルの位置にします。
閉じるボタンの配置
with pm.tabLayout(innerMarginWidth=10, innerMarginHeight=10) as tabs:
tabLayout を作ります。
作られた tabLayout は後で formLayout 関数や tabLayout 関数で使用するので変数 tabs に代入しておきます。
innerMarginWidth=10
タブの内部に配置される部品の左右に置かれるマージンを 10 ピクセルにする。
innerMarginHeight=10
タブの内部に配置される部品の上下に置かれるマージン 10 ピクセルにする。
pm.formLayout(form, edit=True,\
attachForm=((tabs, 'top', 0),\
(tabs, 'left', 0),\
(tabs, 'right', 0)),\
attachControl=(tabs, 'bottom', 10, closeButton))
formLayout(form)をエディットモードによって編集します。
attachForm による位置は以下のように決められます。
(tabs, 'top', 0)
タブ(tabs)の上辺はウインドウ上辺から 0 ピクセルの位置にします。
(tabs, 'left', 0)
タブ(tabs)の左辺はウインドウ左辺から 0 ピクセルの位置にします。
(tabs, 'right', 0)
タブ(tabs)の右辺はウインドウ右辺から 0 ピクセルの位置にします。
attachControl による位置は以下のように決められます。
(tabs, 'bottom', 10, closeButton)
タブ(tabs)の下辺はボタン(closeButton)の上辺から 10 ピクセルの位置にします。
$tabs の配置
with pm.columnLayout() as tab1:
columnLayoutを作ります。
これが 1 つ目のタブグループになります。
pm.button(label='A')
A ボタンを作ります。
pm.button(label='B')
B ボタンを作ります。
with pm.columnLayout() as tab2:
columnLayout を作ります。
これが 2 つ目のタブグループになります。
pm.button(label='C')
C ボタンを作ります。
pm.button(label='D')
D ボタンを作ります。
pm.tabLayout(tabs, edit=True, tabLabel=((tab1, u'タブ1'), (tab2, u'タブ2')))
tabLayout を編集モードにして、 タブのラベルを変更しています。 tabLabel フラグにはたぷるの並んだタプルを与えています。 これによって、 1 つ目のタブ(tab1)に タブ1 というラベルを、 2 つ目のタブ(tab2)に タブ2 というラベルをつけます。
全体のレイアウト 全体のレイアウト

練習

まとめ

参考


Prev | Next
Home | Contents
Mail