uGUIのLayoutElementのMin/Preferred/Flexible解説

概要

LayoutElementコンポーネントには主に３つのパラメータを設定できます。

• Min
• Preferred
• Flexible

多くの人はドキュメント等の字面からは、Minの理解はすぐ出来ますが、PreferredやFlexibleの挙動を掴みにくいと思います。
解説を記していこうと思います。

結論

結論を先に書きます。

• Min ピクセル
  • 親が縮んでもサイズ保証する

• Preferred ピクセル兼割合

  • 親が広がった時、自分も広がる。が、ある程度のサイズで止めたい場合に利用する。

• Flexible 割合

  • 余白を出さずに伸ばしきる。
  • 例えば、親が広がって余白ができる場合、Flexibleを設定すると割合に応じて伸びる
  • 割合とは同居している他のLayoutElementのFlexible。

解説

Min

• Minは最低表示領域を保証します
• 下記はAB共にmin=100が設定されている状態です。
• 数字はHeightです。

• 親を150まで縮めてみます。

うまくHeightが保証されました。
これがMinの機能です。

Preferred

• Preferredはサイズに余裕がある時に、開発者が設定したサイズまで伸びます。
• 下記はMinを一旦Offにし、ABそれぞれPreferred=150の状態です。
• 親をまた縮めた状態にします。

Minが無いのでいくらでも縮まりますが、親を伸ばすとどうでしょうか？

子の要素Preferredに設定したサイズまでまで伸びました。
しかしそれ以上伸びることはありません。

Flexible

• Flexibleは余白を埋めるように引き伸ばしします。
• 下記は先ほどのABそれぞれPreferred=150の状態です

• BにだけPreferredを外してFlexibleを設定してみます。設定値はデフォルトの１

• Bによって余白を埋めたことが分かります。
• 今度はABどちらもFlexible=1にしてみましょう

• AB等しく引き延ばされました
• 次は値を変化させてみましょう
  • A:Flexible=2 B:Flexible=1

結果、伸ばされ具合が2:1になりました。
というわけで、どちらががどのくらい伸ばすかを設定するのがFlexibleとなります。

Preferred + Flexible

• Preferred + Flexibleを双方設定した場合どうなるか？
• まずは前述のAB Flexible=1の状態から。

• その状態でAにだけPreferred=100を追加してみます。

• この場合、全長からPreferredもしくはMinを除いた長さ、つまり本来余白となるはずだった部分を、各Flexibleが按分して引き延ばします。
• 本来は300の余白を等しく分けるのでA=250 B=150となりそうですがFlexible単品のオブジェクトとFlexible+Prefered混成のオブジェクトが一緒に存在する場合は少し補正が入るようです。