自動レイアウト

AutoLayout使ってる？

UIの配置を自動で行ってくれる。自動と言っても、もちろんAIが勝手に考えてくれるようなものではないが、少しのプロパティを設定するだけで各パーツのbounds（位置・サイズ）を自動で算出してくれる。これを使わない方法だと、各パーツの位置・サイズをいちいち全て指定しないといけない。UIパーツが増えるほど手間になってくるし、楽しい作業でもないのでめんどくさくなる⇒UIデザインに時間をかけなくなる⇒「ま、会社で使う分にはいいか」レベルでやめる⇒なんかどこか使いにくい。そんな悪循環から開放してくれて、UIデザインは楽しいんだぞ！と教えてくれるそんな素敵なAutoLayout。

スクリプトを勉強して1,2年経った頃、どこかから拾ってきた海外製のスクリプトの中身を見て「何だこれは！」と思ったのを覚えている。AutoLayoutという存在を知り調べてみるも、AutoLayoutの情報が少ない（もしかしたら書いてる書籍もあるのかもしれないが...）。なのでAutoLayoutについて書いてみる。

AEScriptを作る上で、自動レイアウトを使わない手はない。

メリット

• • • パーツ1つ1つの位置・サイズを考えなくていい（サイズ指定したい時は個別にできる）

    • ウィンドウリサイズ時の関数が1行で済む

    • 間隔を詰める・広げる、向きを横並びにする縦並びにする等、レイアウトの変更が超簡単。

などなど。

AEだけでなくPhotoshopなどでももちろん使える。

とにかく見ろ！

とにかく長い記事になってしまったので、読むの飽きる前に、見たほうが早い！

AutoLayoutが楽しくなるソースコードです。コピペしてESTKなりで実行してみてください。ウィンドウが出たらウィンドウの端っこをドラッグしてウィンドウのサイズを変更してみてください。boundsプロパティの指定は何処にもありません。

var w = new Window('dialog{ text : "ウィンドウの端をドラッグしてサイズを変えるんだ！早く！" , preferredSize : [400,300] , orientation : "column", properties : {resizeable : true} ,\

gr : Group{ orientation : "row" , alignment : ["fill","fill"],\

gr2 : Group{ orientation : "stack", alignment : ["fill","fill"] , \

btn1 : Button{ text : "left" , alignment : "left" }\

btn2 : Button{ text : "center" , alignment : "center"}\

btn3 : Button{ text : "right" , alignment : "right"}\

btn4 : Button{ text : "top" , alignment : "top"}\

btn5 : Button{ text : "bottom" , alignment : "bottom"}\

btn6 : Button{ text : "left,top" , alignment : ["left","top"]}\

btn7 : Button{ text : "right,top" , alignment : ["right","top"]}\

btn8 : Button{ text : "left,bottom" , alignment : ["left","bottom"]}\

btn9 : Button{ text : "right,bottom" , alignment : ["right","bottom"]}\

btn10 : Button{ text : "left,center" , alignment : ["left","center"]}\

}\

btn11 : Button{ text : "right,fill" , alignment : ["right","fill"]}\

}\

btn12 : Button{ text : "fill,bottom" , alignment : ["fill","bottom"]}\

}');

w.onResize = function(){

w.layout.resize();

}

w.show();

実行してみましたか？どうでしょう。

「AutoLayoutな！知ってるぜ！」って人は、こんなところでフラフラしてないで、あなたのスクリプト制作を進めたほうがいいかもしれない。

「えっ！？どうなってんの！？Buttonにもbounds与えてないし...」て思った人は、この長いページを読む価値があるかもしれない。

「えっ、ちょっと何言ってるか全く理解できん」という人は、ここに来るのが早すぎたかもしれない。

layout()メソッドの使用方法

UIパーツを配置するときに、boundsを指定しない。undefinedにしてやればいい。さすれば、boundsが設定されていないパーツはAutoLayoutの対象になる。

もし、

[WindowObject].add("button",[0,0,100,20],"OK");

のようにbounds（例でいうところの[0,0,100,20]）を与えてしまうと対象にはならない。

一方で、bounds値がないままだと描画位置・サイズが不明ということなので、表示ができない。なので結局、最終的にはboundsを与える必要があるのだが、それを行ってくれるのがAutoLayoutManagerのlayout()メソッド。

//Windowで起動した時の例

var w = new Window('dialog');

/*

boundsを与えないでUIを作成して

*/

w.layout.layout(); //これによってboundsが算出される

w.show(); //各パーツにboundsが与えられたので無事に表示できる

layout()直後からbounds値が存在する。

Windowをshow()した時にも自動で実行される。なのでWindowの時は実は書かなくても表示できちゃう。でも事故の元だからやめたほうがいい。ちなみにドッキング可能なScriptUI Panelの時は書かないとUIが何も表示されず、パネルだけが出るので、やっぱりクセで書いといたほうがいい。この後、このページで出てくる例では省略しているが、真似してはいけない。

resize()メソッドの使用方法

WindowやPanelをリサイズした時、その大きさに合わせてUIパーツも位置やサイズ変更したいことがほとんどだと思う。

AutoLayoutを使わない時は、WindowのonResize関数に、結構な量のコードを書かないといけない。ウィンドウに対してこれは何％でその隣のパーツは何ピクセル空けるように移動、そしてサイズも云々........。全てのパーツに対してこれを設定していくのか........？？？ぐわあわわああーーーーーーーーー！！！！！！！

resize()はonResize関数内で次のように使う。

w.onResize = function(){

w.layout.resize();

}

これだけ。これだけで、AutoLayoutしたパーツたちが勝手にboundsを修正してくれる。涙出るわ。

AutoLayoutに関わるプロパティたち

AutoLayoutしてくれると言ってもAIが考えるわけではない（2回目）。なんとなくの指示はこちらから出さないといけない。その指示を出すためのプロパティを知っておかないと何もできない。

• • • orientation：パーツを並べる方向

    • alignment/alignChildren：揃え

    • indent : 字下げ

    • spacing：間隔

    • margins：余白

    • preferredSize：希望のサイズ

    • characters：希望の文字数

orientation

各コンテナに対して、格納するパーツの並び順を指定する。指定方法は「行（横）」か「列（縦）」か「重ねる」か。

orientation = "row" //行（横→）方向にパーツを並べる。Groupの初期値。

orientation = "column" //列（縦↓）方向にパーツを並べる。Window、Panelの初期値。

orientation = "stack" //スタック、つまり重ねていくということ。並び方向の指示がない状態。

orientationを指定しない場合は初期値が適用される。個人的にはstackはほとんど使うことがない。rowとcolumnでだいたいの場合、事足りる。

行列の入れ替えみたいなイメージ。これを気軽にやろうと思うと関数を組むのがなかなか面倒だと思う。UI作成中にやっぱ並び順変更したいってことはまぁまぁある（私、設計図書かずに脳内イメージだけで始める人なので...）。orientationの変更だけで変えられるのは嬉しいのでは。

alignment/alignChildren

「alignment」=「整列」であることからなんとなくは察せる。ウィンドウの端っこにいてほしいとか、中心にいてほしいとか、ウィンドウに合わせて目一杯表示とか、いろいろな事情があると思う。そういう指示を出すためのプロパティ。

alignmentは全てのパーツに対して設定できる。対してalignChildrenはChildrenの文字が示す通り、「子」に影響するプロパティ。コンテナのalignChildrenを指定することで、その子になっているパーツ全てのalignmentを一括で指定できる。alignChildrenした後で、子のパーツに個々に対して別のalignmentを指定することもできる。

alignmentとalignChildrenどちらも指定できる値は同じだが、親コンテナのorientationによって有効な値が変わる。

alignmentについては見てもらったとおり。サイズ変更を伴うものはfillのみ。それ以外は位置のみの指示。

そしてlayout.resize()を使用すれば、Windowのリサイズ時も常に、上下左右、またはいっぱいいっぱい表示のままついてくる。ここまでが基本。

実はalignmentプロパティは配列でも与えることができる。

alignment : ["left","fill"]

といった具合。配列の最初の要素が「left、center、right、fill」、２番目が「top、center、bottom、fill」ということだけ注意したい。うっかり逆にしてしまうと思い通りに動かない。

個人的には配列で与えるほうが圧倒的に多い。「親コンテナのorientationによって有効な値が変わる。」と先に書いたが、配列で与えた場合、これを無視できる。

正確には無視するというよりかは、

「本来は配列で与えるのが正式で、長さ2の配列で初期値を持っている。配列じゃない場合は配列のどちらの要素に代入するのかを、親コンテナのorientationによって決めている。」

というのが真実かと思う。多分。

indent

文章で言うところの「字下げ」の量を指定する。alignment を left か top に指定している時のみ効果がある。

spacing

これは簡単。子パーツ間の間隔を指定する。別のパーツを含むことができる、コンテナに指定する。

参考までに各コンテナの初期値は次のよう。

• • • Window：15

    • Panel：10

    • Group：10

とりあえず指定せずに組んでみて気に入らなかったらこれを目安に数値を変更してみては。

margins

これもコンテナに対しての指定。そのコンテナ内の四方のマージン（余白）を指定する。これは下の画像を見れば早い。

margin's' とsがついていることから複数形、つまり配列であろうことが見て取れる。[left,top,right,bottom]の順で辺ごとに余白を設定することができる。個人的には上の例のように数値をダイレクトに入れてしまう事が多い。配列ではなく数値を入れると[left,top,right,bottom]全てを同じ値に設定できる。

参考までに各コンテナの初期値は次のよう。

• • • Window：[15,15,15,15]

    • Panel：[15,10,15,10]

    • Group：[0,0,0,0]

こちらもとりあえず指定せずに組んでみて気に入らなかったらこれを目安に数値を変更してみては。

preferredSize

「preferred」 = 「優先の」つまり「優先サイズ」。AutoLayoutで自動計算されるサイズよりもpreferredSizeで指定したサイズが「優先される」。AutoLayoutでは自動でboundsが計算されるので位置・サイズが自動的に決まる。しかし「このボタンだけはこのサイズにしたい」など希望サイズがあればそれを伝えておくことができる。

本来サイズの指定にはboundsやsizeを使うところだが、AutoLayoutする前はまだboundsが未確定であるので使用できない（使うとAutoLayoutの対象外になる）。なのでその代わりに使う。

WindowのpreferredSizeを指定して、ウィンドウ表示の初期サイズを指定するのにも使うことが多い。ただし、コンテナに使用する時は子のパーツが重なったり隠れないように、AutoLayoutによって自動的に指定サイズよりも広がることがあるので、必ずしもそのサイズになるとは限らないと覚えておく。

また、alignmentにfillを使用していると、そちらが優先になる。

どちらかに「-1」を入れた場合、その方向に関してはpreferredSizeで「指定しない」と認識されるので覚えておく。例えば、ボタンの幅はalignmentで計算してほしいけど高さだけは自分で決めときたい、とか。例を見ればわかる。

終わり

長すぎた...。読んでくれた方ありがとうございまる○

これが何処かの誰かの役に立たんことを...。

ロケットビーバイ。