うにてぃブログ

主にUnityとC#に関する記事を書いていきます

【Unity】HorizontalLayoutGroup や VerticalLayoutGroup の各パラメータについて

f:id:hacchi_man:20210730174636p:plain

パラメータがどういった影響を与えるのか分からなくなることがあるので、こちらにまとめる

※ Unity2020.3.14f1 での検証のため パラメータや挙動が異なる可能性がある

Padding

上下左右の余白部分のサイズ

0

f:id:hacchi_man:20210730212632p:plain:w200

5

f:id:hacchi_man:20210730212654p:plain:w225

20

f:id:hacchi_man:20210730212717p:plain:w300

Spacing

並べる要素間のサイズ

0

f:id:hacchi_man:20210730212350p:plain:w200

10

f:id:hacchi_man:20210730212411p:plain:w250

50

f:id:hacchi_man:20210730212432p:plain:w300

Child Alignment

子供のレイアウト要素の並べ方

f:id:hacchi_man:20210730211723p:plain:w400

Reverse Arrangement

子供の並び順を反転するかどうか

この並び順のとき

f:id:hacchi_man:20210730211043p:plain

無効

f:id:hacchi_man:20210730210923p:plain

有効

f:id:hacchi_man:20210730210937p:plain

Control Child Size

子供のサイズを制御するかどうか。

有効にした場合は Inspector でサイズを変更することができなくなります

f:id:hacchi_man:20210730175403p:plain

この際の制御されるサイズは LayoutElement, ContentSizeFitterなどによって計算され

Min ~ Preferred or Flexible の間のサイズに定まります

もう少し詳しく書くと ILayoutElement を実装しているクラスであれば適切なサイズが取得できます

そのため、 Text, TextMeshPro, Imageなどはそういった実装があるので LayoutElement を追加しなくてもサイズが取得できたりします

Use Child Scale

配置時に子供のスケールを考慮するか

Min Width: 50 を 3つ並べ、真ん中の Scale を 2にしたときの挙動が下図になる
上が 有効、下が 無効 にしたときの配置になる

f:id:hacchi_man:20210730180247p:plain:w300

見てわかるとおり 有効 にした際には、スケールを考慮した領域 (幅100) が確保されており

無効 にした場合は、考慮していない領域 (幅50) が確保されている

また 無効 にした際は Pivot による影響も受けるため、例えば Pivot を 1 にすると下図のようになってしまう

f:id:hacchi_man:20210730180625p:plain:w300

Child Force Expand

子の要素を強制的に拡張する

これは Control Child Size が有効かどうかで挙動が変わってくるため、

親の Width: 200、各子供の Width: 50 での状態で、各設定による変化を記述します

f:id:hacchi_man:20210730202747p:plain:w300

Control Child Size が有効

子供のサイズ変更が可能なため、子供の Rect が親のサイズに合わせて拡大します

子供のサイズ = 親 / 子供の数 で求められます

f:id:hacchi_man:20210730202855p:plain:w300

もし、子供に Layout Element があり Min もしくは Preferred が設定されていた場合は子供のサイズ計算が異なり

子供のサイズ = (親 - 子供のサイズ合計) / 子供の数 + 子供のサイズ で求められます

子供1 に Min Widht: 100、子供2に Min Width: 20 が設定されていた場合

子供1のサイズ = (200 -(100 + 20) / 2 + 100) = 140

子供2のサイズ = (200 -(100 + 20) / 2 + 20) = 60

となるため以下のようになります

f:id:hacchi_man:20210730204744p:plain:w300

Control Child Size が無効

子供のサイズ変更が無効なため子供のサイズは変わらず Aliegnment に合わせて各スペースが均等になるように配置されます

Left

f:id:hacchi_man:20210730204445p:plain:w300

Center

f:id:hacchi_man:20210730204532p:plain:w300

Right

f:id:hacchi_man:20210730204556p:plain:w300

おまけ

HorizontalLayoutGroup や VerticalLayoutGroup をつけている RectTransform のサイズを子供の数によって変えたい場合は ContentSizeFitter もつけると自動的にサイズを変えることができる

f:id:hacchi_man:20210730213243p:plain:w300