2020年7月13日月曜日

formLayoutのTips

自作のツールを作るとき、ウィンドウへUIを載せるために、まず、レイアウトを作成しないといけません。
単純なものなら rowLayout columnLayout、これらをくっつけたrowColumnLayout

で、UIを正確に配置したいとなったときに使うのが formLayoutです。


formLayout の配置に関連した良く使うフラグとしては、
  • attachForm(-af) string string int
  • attachControl(-ac) string string int string
  • attachPosition(-ap) string string int int
の3つじゃないかと思います。後ろの型は必要な引数です。
 -af Control  Edge Offset  
 -ac Control Edge Offset  Control 
 -ap Control Edge Offset Position 

ちょっと複雑な感じもしますが、覚えてしまえば簡単です。
この3つを使ってボタンを配置するサンプル
{
	string $window ="myWindow";
	if(`window -q -ex $window`) deleteUI -wnd $window;
	
	window $window;
	
	string $form=`formLayout -w 128 -h 128`;
		string $btn0 =`button -l "Form"`;
		string $btn1 =`button -l "Control"`;
		string $btn2 =`button -l "Position"`;
		
	
	formLayout -e 
		-af $btn0 "left" 4       -af $btn0 "right" 100     -af $btn0 "top" 4       -af $btn0 "bottom" 100
		-ac $btn1 "left" 0 $btn0 -ac $btn1 "right" 0 $btn2 -ac $btn1 "top" 0 $btn0 -ac $btn1 "bottom" 0 $btn2
		-ap $btn2 "left" 0 50    -ap $btn2 "right" 0 80    -ap $btn2 "top" 0 50    -ap $btn2 "bottom" 0 80
		$form;
	
	showWindow $window;
	
}
こんな感じのウィンドウが出来ます。

初期状態では、そんな、使い分けなくても良いような気もしますが、ウィンドウのサイズを変えると、それぞれのフラグに違いが出てきます。
attachForm は、オフセットの値を保持してボタンが伸縮。今回は、ボタンですが、tabLayoutframeLayoutをウィンドウにフィットさせる場合に良く使います。

attachControl は、指定したエッジが、指定した別のUIの位置に合うよう移動します。
rowLayout や columnLayout のような使い方が出来ますが、オフセットを指定できるので、これらレイアウトを使うよりもマージンなんかを個別に調節できる自由度があります。

attachPosition は、ウィンドウでの位置の割り合いを保持した状態でボタンが伸縮します。

今回は単純なサンプルにするため、各ボタンごとに同じフラグを指定して配置していますが、各ボタンの各エッジごとにフラグは変えてしまっても問題ありません。

他にも、それぞれ attachOppositeForm, attachOppositeControl, attachOppositePosition という反対側を指定するフラグもありますが、配置しているときに混乱してしまうのでほとんど使用していません。

ボタンを引き延ばしたくない場合は、エッジにオフセットとかを指定しない事もできます。


今回の Tips で使用するフラグは、attachPosition になります。
attachPositonだけを使ったサンプル
{
    string $window ="myWindow2";
    if(`window -q -ex $window`) deleteUI -wnd $window;
    
    window $window;
    
    string $form=`formLayout -w 128 -h 128`;
        string $btn0 =`button -l ""`;
        string $btn1 =`button -l ""`;
        string $btn2 =`button -l ""`;
        string $btn3 =`button -l ""`;
        string $btn4 =`button -l ""`;
        string $btn5 =`button -l ""`;
        string $btn6 =`button -l ""`;
        string $btn7 =`button -l ""`;
        
    
    formLayout -e 
        -ap $btn0 "left" 0 10 -ap $btn0 "right" 0 30 -ap $btn0 "top" 0 10 -ap $btn0 "bottom" 0 25
        -ap $btn1 "left" 0 10 -ap $btn1 "right" 0 30 -ap $btn1 "top" 0 30 -ap $btn1 "bottom" 0 45
        -ap $btn2 "left" 0 10 -ap $btn2 "right" 0 30 -ap $btn2 "top" 0 50 -ap $btn2 "bottom" 0 65
        -ap $btn3 "left" 0 10 -ap $btn3 "right" 0 30 -ap $btn3 "top" 0 70 -ap $btn3 "bottom" 0 85
        -ap $btn4 "left" 0 60 -ap $btn4 "right" 0 80 -ap $btn4 "top" 0 10 -ap $btn4 "bottom" 0 25
        -ap $btn5 "left" 0 60 -ap $btn5 "right" 0 80 -ap $btn5 "top" 0 30 -ap $btn5 "bottom" 0 45
        -ap $btn6 "left" 0 60 -ap $btn6 "right" 0 80 -ap $btn6 "top" 0 50 -ap $btn6 "bottom" 0 65
        -ap $btn7 "left" 0 60 -ap $btn7 "right" 0 80 -ap $btn7 "top" 0 70 -ap $btn7 "bottom" 0 85
        $form;
    
    showWindow $window;
    
}
こんな風にボタンを大量に配置してみます。

ま、ピッカーとかなんですけど、配置したい値がどのくらいかアタリを付けるために separator を配置します。
{
    string $window ="myWindow3";
    if(`window -q -ex $window`) deleteUI -wnd $window;
    
    window $window;
    
    string $form=`formLayout -w 128 -h 128`;
        string $vSep0 =`separator -hr false`;
        string $vSep1 =`separator -hr false`;
        string $vSep2 =`separator -hr false`;
        
        string $hSep0 =`separator -hr true`;
        string $hSep1 =`separator -hr true`;
        string $hSep2 =`separator -hr true`;
        
        string $btn0 =`button -l ""`;
        string $btn1 =`button -l ""`;
        string $btn2 =`button -l ""`;
        string $btn3 =`button -l ""`;
        string $btn4 =`button -l ""`;
        string $btn5 =`button -l ""`;
        string $btn6 =`button -l ""`;
        string $btn7 =`button -l ""`;
        
    
    formLayout -e 
        -ap $vSep0 "left" 0 25 -ap $vSep0 "right" 0 25 -af $vSep0 "top" 0 -af $vSep0 "bottom" 0
        -ap $vSep1 "left" 0 50 -ap $vSep1 "right" 0 50 -af $vSep1 "top" 0 -af $vSep1 "bottom" 0
        -ap $vSep2 "left" 0 75 -ap $vSep2 "right" 0 75 -af $vSep2 "top" 0 -af $vSep2 "bottom" 0
        
        -af $hSep0 "left" 0 -af $hSep0 "right" 0 -ap $hSep0 "top" 0 25 -ap $hSep0 "bottom" 0 25
        -af $hSep1 "left" 0 -af $hSep1 "right" 0 -ap $hSep1 "top" 0 50 -ap $hSep1 "bottom" 0 50
        -af $hSep2 "left" 0 -af $hSep2 "right" 0 -ap $hSep2 "top" 0 75 -ap $hSep2 "bottom" 0 75
        
        -ap $btn0 "left" 0 10 -ap $btn0 "right" 0 30 -ap $btn0 "top" 0 10 -ap $btn0 "bottom" 0 25
        -ap $btn1 "left" 0 10 -ap $btn1 "right" 0 30 -ap $btn1 "top" 0 30 -ap $btn1 "bottom" 0 45
        -ap $btn2 "left" 0 10 -ap $btn2 "right" 0 30 -ap $btn2 "top" 0 50 -ap $btn2 "bottom" 0 65
        -ap $btn3 "left" 0 10 -ap $btn3 "right" 0 30 -ap $btn3 "top" 0 70 -ap $btn3 "bottom" 0 85
        -ap $btn4 "left" 0 60 -ap $btn4 "right" 0 80 -ap $btn4 "top" 0 10 -ap $btn4 "bottom" 0 25
        -ap $btn5 "left" 0 60 -ap $btn5 "right" 0 80 -ap $btn5 "top" 0 30 -ap $btn5 "bottom" 0 45
        -ap $btn6 "left" 0 60 -ap $btn6 "right" 0 80 -ap $btn6 "top" 0 50 -ap $btn6 "bottom" 0 65
        -ap $btn7 "left" 0 60 -ap $btn7 "right" 0 80 -ap $btn7 "top" 0 70 -ap $btn7 "bottom" 0 85
        $form;
    
    showWindow $window;
    
}
こんな感じで、25、50、75がどのくらいなのか分かります。
buttonコマンドの前にseparatorコマンドを使っているので、線がボタンの奥に描画されています。作成順で、UIの描画順が変わることも覚えておくと良いでしょう。

使い終わった separator は、隅の方に配置して、昔の frameLayoutみたいにしてみても良いかもしれません。



この attachPosition と併せて覚えておきたいフラグとして、numberOfDivisions というのがあります。
これを設定していない場合、attachPosition は100が最大値になりますが、numberOfDivisions を設定すると、これに設定した値がattachPositionの最大値となります。

上のサンプルコードで、7行目の formLayout に -numberOfDivisions 85 を追記します。すると、-ap の方を編集していなくても、ボタンの配置がこんな風になります。

更に-numberOfDivisions 60 を設定すると、-ap に 85 が設定されているため、エラーでスクリプトは停止してしまいます。

0 件のコメント:

コメントを投稿