レイアウト

ウィンドウの次は、ウィンドウの中に配置するコントロール(ボタン、チェックボックスなどなど)
についてメモろうかと思ったのですがその前に「レイアウト」について。

「レイアウト」は、ボタンやチェックボックスなどの子コントロールを、親であるウィンドウ内に配置する際の位置関係の事って
覚えているんだけどちがうかなー。

※この「レイアウト」を設定しなければ、コントロールは置けません。


ということでレイアウトの主なバリエーションをクソースと共に列挙。

※実行結果はタイトルが見えるように少しだけリサイズしているものもあります。


■ 列配置する「columnLayout」

# -----------------------------
# インポート
# -----------------------------
import maya.cmds as mc
import os


#-------------------------------------
# オプションメニュー変更時コールバック
# 第2引数に変更後のメニューが渡されます
#-------------------------------------
def onButtonPush(item):
print u"ボタンおしました"

#------------------------------
# メイン関数
#------------------------------
def Main():

windowName = u"OptionMenuTest" # ウィンドウ名
windowTitle = u"LayoutTest -> ColumnLayout" # ウィンドウタイトル
windowWidth = 240 # 横幅
windowHeight = 320 # 縦幅

# もしウィンドウが存在するなら作成せずに終了
if mc.window(windowName,query=True,exists=True):
mc.deleteUI(windowName)

# ウィンドウ作成(オプションにサイズをあわせるため)
windowName = mc.window( windowName,title=windowTitle,titleBar=True,resizeToFitChildren=True)

  # 他レイアウトのプログラムはここから

# 縦置き
mc.columnLayout(width=100, # レイアウトの横幅
height=100, # レイアウトの縦幅
visible=True, # 可視/不可視
adjustableColumn=True # 配置する子コントロールのサイズを親にフィットさせる
)

# ボタンを縦に配置(別項でメモります)
mc.button(label=u"test0",enable=True,command=onButtonPush)
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.button(label=u"test2",enable=True,command=onButtonPush)
mc.button(label=u"test4",enable=True,command=onButtonPush)

# ここまでの間を書き換える

# 1段上がる(レイアウトから脱出?)
mc.setParent("..")

# ウィンドウ表示
mc.showWindow(windowName)

if __name__ == '__main__':
Main()

■結果




■ 行配置する「rowLayout」


mc.rowLayout(visible=True,
numberOfColumns=4 # カラム数を指定する
)
mc.button(label=u"test0",enable=True,command=onButtonPush)
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.button(label=u"test2",enable=True,command=onButtonPush)
mc.button(label=u"test4",enable=True,command=onButtonPush)

■結果




■ 作成したフレーム内に子を含ませる「frameLayout」


  # フレームレイアウト
mc.frameLayout( label=' frame label ', # ラベル名
labelAlign='center', # フレームラベルのアライン 「top」,「center」、「bottom」
borderStyle='etchedIn', # 境界のスタイル 「in」、「out」、「etchedIn」、「etchedOut」
borderVisible=True, # 境界の可視/不可視
numberOfChildren=4) # 子供の数
# フレームレイアウト内にカラムを入れる
mc.columnLayout(adjustableColumn=True)
# ボタンを縦に配置
mc.button(label=u"test0",enable=True,command=onButtonPush)
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.button(label=u"test2",enable=True,command=onButtonPush)
mc.button(label=u"test4",enable=True,command=onButtonPush)

■結果

フレームの枠線が窪んだ感じになっているあたりのがborderStyleの「'etchedIn'」効果。




■グリッド状にコントロールを配置する「gridLayout」


mc.gridLayout( numberOfColumns=4, # カラムの数
cellWidthHeight=(100,100), # セルのサイズ
columnsResizable=False) # カラム数を子を元に調整するかどうか
# ボタンを配置
i = 0
while True:
mc.button(label=u"test"+str(i),enable=True,command=onButtonPush)
i = i + 1
if i == 16:
break

■結果




■メニューバーを含むことが出来るレイアウト作成の「menuBarLayout」


# メニューバーを置けるレイアウトを作成する
mc.menuBarLayout( width=100, # 横幅
height=100, # 高さ
enable=True, # 有効/無効
visible=True) # 可視/不可視

# レイアウト作成だけでは肝心のメニューが作成されないのでmenu()を使って追加。
# メニューの項目はmenuItem()で追加。
mc.menu(label=u"ファイル")
mc.menuItem(label=u"新規作成", # ラベル名
postMenuCommand=onShowMenuItem) # 項目が表示された時に呼ばれる。
mc.menuItem(label=u"開く", postMenuCommand=onShowMenuItem)
mc.menuItem(label=u"最近開いたファイル", postMenuCommand=onShowMenuItem)
mc.rowLayout(numberOfColumns=4)

# ボタンを配置
mc.button(label=u"test0",enable=True,command=onButtonPush) #onButtonPushは各自定義
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.button(label=u"test2",enable=True,command=onButtonPush)
mc.button(label=u"test3",enable=True,command=onButtonPush)

■結果




■コントロール配置場所を分割する「paneLayout」


# ペインレイアウトを作成する
# configurationのバリエーション
# 「single」、「horizontal2」、「vertical2」、「horizontal3」、「vertical3」、「top3」
# 「left3」、「bottom3」、「right3」、「horizontal4」、「vertical4」、
# 「top4」、「left4」、「bottom4」、「right4」、「quad」
mc.paneLayout(width=320,height=160,configuration='horizontal2',enable=True)
# 上面パネル
mc.columnLayout()
mc.button(label=u"test0",enable=True,command=onButtonPush)
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.setParent("..")
# 下
mc.rowLayout(numberOfColumns=3)
mc.button(label=u"test2",enable=True,command=onButtonPush)
mc.button(label=u"test3",enable=True,command=onButtonPush)
mc.button(label=u"test4",enable=True,command=onButtonPush)
■結果




■スクロールバーをつける「scrollLayout」


# スクロールレイアウト
mc.scrollLayout( horizontalScrollBarThickness=16, # 水平スクロールバーの厚み
verticalScrollBarThickness=16) # 垂直スクロールバーの厚み
# グリッド状ににボタンを配置してみる
mc.gridLayout(numberOfColumns=8,cellWidthHeight=(100,100))
# ボタン
i = 0
while True:
mc.button(label=u"test"+str(i),enable=True,command=onButtonPush)
i = i + 1
if i==64:
break
# スクロールレイアウトへ
mc.setParent("..")
■結果




■タブを作成する「tabLayout」


# タブレイアウト作成
tabs = mc.tabLayout(innerMarginWidth=5, innerMarginHeight=5)
# タブに登録するレイアウト
layout0 = mc.columnLayout()
mc.button(label=u"test0",enable=True,command=onButtonPush)
mc.setParent("..")
# タブに登録するレイアウト
layout1 = mc.columnLayout()
mc.button(label=u"test1",enable=True,command=onButtonPush)
mc.setParent("..")
# タブ追加
mc.tabLayout( tabs, edit=True, tabLabel=( ( layout0, 'Tab0' ) , ( layout1, 'Tab1' ) ) )
■結果




■ドラッグ&ドロップ検知出来るシェルフを作成する「shelfLayout」


# タブレイアウト作成
tabs = mc.tabLayout(innerMarginWidth=5, innerMarginHeight=5)
# シェルフを追加
mc.shelfLayout("shelf0")
mc.button(label="test0")
mc.setParent("..")
mc.shelfLayout("shelf1")
mc.button(label="test1")
mc.setParent("..")
mc.shelfLayout("shelf2")
mc.button(label="test2")
mc.setParent("..")
■結果




■比較的自由に子コントロールの位置を決定できる「formLayout」

layout = mc.formLayout()
button0 = mc.button(label="test0")
button1 = mc.button(label="test1")
button2 = mc.button(label="test2")
mc.formLayout( layout, #編集したいフォームレイアウトの指定
edit=True, # エディットモードをTrueにして
attachPosition=[(button0,"left",0,10), # 位置を細かく指定できる。
(button1,"bottom",0,50),
(button2,"left",0,30)])

■結果





上以外にもまだ幾つかあるので知りたい人はMayaOnlineHelpを参照していただければと思います。

■参考サイト
 □Autodesk Maya オンラインヘルプ
  http://me.autodesk.jp/wam/maya/docs/Maya2009/index.html