Grid Layout Groupって何?【Unity】
もくじ
Grid Layout Groupって一体何?
「Grid Layout Group」の名前の通り、オブジェクトを格子状にレイアウトしたいときに使うコンポーネントです。
Grid Layout Groupを使うための準備
オブジェクトの準備
Hierarchyウィンドウで右クリック ＞ 「UI」 > 「Button」を選択してButtonを作成します。
するとCanvasとCanvasの子オブジェクトのButtonが追加されました。
HierarchyウィンドウのCanvasの上で右クリック ＞「Create Empty」を選択し、空のゲームオブジェクトを作成します。
分かりやすいようオブジェクトの名前を「ButtonLayout」に変更しました。
Grid Layout Groupを使ってみる
Hierarchyウィンドウで「Button」をコピー&ペーストで増やしました。
格子状に並べたかったのに縦に並んでしまいました。
これは、ボタンの親要素が小さすぎてボタンが収まりきらないことが原因です。
親要素をキャンバスいっぱいに広げます。
アンカーを縦横ストレッチに設定しました。
Left、Top、Pos Z、Right、Bottomの値を全て0にしました。これでButtonの親要素がキャンバスいっぱいに広がり、Buttonは格子状に配置されました。
プロパティを変更してみよう
ボタンを格子状に配置することは出来ましたが、キャンバスからはみ出てしまっていますね。
Grid Layout Groupプロパティを設定して見た目を整えていきます。以下がGrid Layout Groupのプロパティです。
- Padding : 要素の集合に設定する余白
- Cell Size : 各要素のサイズ
- Spacing : 要素間の空白
- Start Corner : どの角から順番に要素を並べていくか
- Start Axis : 水平方向、垂直方向どちらの方向へ要素を並べていくか
- Child Alignment : 整列方法（左寄せ、中央寄せ、右寄せなど）
- Constraint : 列数や行数の制限
要素の大きさを変更する
全てのボタンをキャンバスに収めるため大きさを変更します。
Cell Sizeのxとyの値を50に設定しました。
要素同士の間隔を空ける
要素同士がくっつきすぎなので間隔を空けます。
Spacingのxとyの値を10に設定しました。
中央寄せにする
デフォルトだと左上に寄せられているので、中央寄せにしたいと思います。
Child AlignmentをMiddle Centerに設定しました。
列数の上限を設定する
ConstraintをFixed Column Countに設定すると、Constraint Countという項目が現れます。
Constraint Countの値に4を設定しました。
簡単に一定間隔でボタンを配置することができました！
