Scroll ViewとLayoutコンポーネント群②LayoutElement
Unity 2019.2.0f1 Personal(2019年8月)
今回はLayout系コンポーネントの中でも
LayoutElementというコンポーネントについて調査します！
UnityのAuto Layout機能を使う上で欠かせないコンポーネントです！
ここらへんのコンポーネントについて頭の中で整理できていると
スムーズにUIを組み立てられるようになります！
LayoutElementとは？
LayoutElementはコンテンツを複数並べた時にコンテンツの幅(Widht/Height)を自動で調整してくれます。
LayoutElementはコンテンツそのものに付けます。
アイテムリストでいうアイテムひとつひとつにLayoutElementが付いているイメージです。
LayoutELementはコンテンツの親オブジェクトにLayoutGroup系のコンポーネントが付いていないと機能しません。
Scroll Viewでいうとコンテンツ配置先であるContentオブジェクトにLayoutGroupを付けておきます。
LayoutElementを使ってみる
それではScroll Viewの中でLayoutElementを使っていきましょう〜
まずはScroll Viewを作成します！
hiyotama.hatenablog.com
RectTransformはWidth:600とHeight:200に、
ScrollRectのVerticalをfalseに設定します〜
続いてContentにHorizontalLayoutGroupコンポーネントを付け、
Spacingを10、Control Child SizeのWidthとHeightをtrueに設定します〜
続いてContent配下にImageのUIオブジェクトを作成します！
Control Child Sizeを有効にしたLayoutGroupの配下にImage（名前：MinImage）を置くと、
Width:0、Height:0となってしまいます。（LayoutGroupについては次回以降解説します。）
ImageにLayout Elementコンポーネントを付け、
Min Width：150、Min Height：150に設定することで
Imageが表示されます！
Min Width/Heightとは？
Layout ElementのMin Width/Heightを設定することでMin Imageが表示されました。
Min Width/Heightは最低でも必ず表示される幅を設定することができます。
親オブジェクトがLayoutElementの付いたオブジェクトより小さくなっても表示されるので、強力です。
Prefered Width/Heightとは？
Layout Elementには他にPrefered Width/Heightという項目があります。
こちらは表示する領域が残っていたら表示されます。
先ほどMin Imageを配置したContentの下に、もうひとつImage（名前：Prefered Image）を作成してみます。
そのImageにLayout Elementコンポーネントを付け、Prefered Width：150、Prefered Height：150に設定します。
縦横共に表示する余裕が残っているのでそのまま表示されます。
それではMin ImageのMin Widthを500に設定してみましょう。
90しか余裕がなかったので、Prefered ImageのWidthは90となりました。
表示する領域が残っていたら、とはこのような意味です。
Flexible Widht/Heightとは？
最後にFlexible Width/Heightですが、Min系とPrefered系以外の部分に表示されます。
Min系とPrefered系で埋まっていたらFlexible系は表示されません。
MinとPreferedに設定する数値はピクセルですが、Flexibleのみ割合を表す点に注意です。
なんの割合かというと、Flexible系のオブジェクトが2つ以上存在した場合の幅の割合です。
Layout Elementを付けたImageを２つ用意し、
Flexible Widthを0.6と0.4設定すると、6対4の割合で表示されます。
表示される優先度でいうとFlexible系が一番優先度が低くなります。
Min系 > Prefered系 > Flexible系
という優先度です。
