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

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

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

Padding

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

0

5

20

Spacing

並べる要素間のサイズ

0

10

50

Child Alignment

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

Reverse Arrangement

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

この並び順のとき

無効

有効

Control Child Size

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

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

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

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

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

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

Use Child Scale

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

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

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

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

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

Child Force Expand

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

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

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

Control Child Size が有効

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

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

もし、子供に 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

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

Control Child Size が無効

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

Left

Center

Right

おまけ

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