Grid Layout Groupって何?【Unity】

もくじ

Grid Layout Groupって一体何?

「Grid Layout Group」の名前の通り、オブジェクトを格子状にレイアウトしたいときに使うコンポーネントです。

Grid Layout Groupを使うための準備

オブジェクトの準備

f:id:penyop:20210517204631p:plain
Buttonを作成

Hierarchyウィンドウで右クリック > 「UI」 > 「Button」を選択してButtonを作成します。
するとCanvasCanvasの子オブジェクトのButtonが追加されました。

f:id:penyop:20210517210014p:plain
空のゲームオブジェクトを作成

HierarchyウィンドウのCanvasの上で右クリック >「Create Empty」を選択し、空のゲームオブジェクトを作成します。
分かりやすいようオブジェクトの名前を「ButtonLayout」に変更しました。

Grid Layout Groupコンポーネントを追加

f:id:penyop:20210517210633p:plain
コンポートを追加

作成した空のゲームオブジェクト「ButtonLayout」を選択 > Inspectorウィンドウから「Add Component」を押します。
検索欄に「grid」と入力すると、「Grid Layout Group」が表示されるので選択。

f:id:penyop:20210517211525p:plain
Grid Layout Groupコンポーネントが追加された

InspectorウィンドウにGrid Layout Groupコンポーネントが追加されました。

並べたいオブジェクトをGrid Layout Groupコンポーネントを持つオブジェクトの子オブジェクトにする

f:id:penyop:20210517213404p:plain
親子関係

Hierarchyウィンドウで「Button」をGrid Layout Groupコンポーネントが追加された「ButtonLayout」にドラッグ&ドロップし、親子関係にしました。

Grid Layout Groupを使ってみる

f:id:penyop:20210517225444p:plain
buttonをコピー&ペースト

Hierarchyウィンドウで「Button」をコピー&ペーストで増やしました。

f:id:penyop:20210518113502p:plain
縦に並んでしまう

格子状に並べたかったのに縦に並んでしまいました。
これは、ボタンの親要素が小さすぎてボタンが収まりきらないことが原因です。
親要素をキャンバスいっぱいに広げます。

f:id:penyop:20210518120341p:plain
アンカーを設定

アンカーを縦横ストレッチに設定しました。

f:id:penyop:20210518121149p:plain
Buttonの親をCanvasいっぱいに広げた

Left、Top、Pos Z、Right、Bottomの値を全て0にしました。これでButtonの親要素がキャンバスいっぱいに広がり、Buttonは格子状に配置されました。

f:id:penyop:20210518140114p:plain
ボタンが格子状に配置された

プロパティを変更してみよう

ボタンを格子状に配置することは出来ましたが、キャンバスからはみ出てしまっていますね。
Grid Layout Groupプロパティを設定して見た目を整えていきます。以下がGrid Layout Groupのプロパティです。

f:id:penyop:20210517231508p:plain
Grid Layout Groupプロパティ
  • Padding : 要素の集合に設定する余白
  • Cell Size : 各要素のサイズ
  • Spacing : 要素間の空白
  • Start Corner : どの角から順番に要素を並べていくか
  • Start Axis : 水平方向、垂直方向どちらの方向へ要素を並べていくか
  • Child Alignment : 整列方法(左寄せ、中央寄せ、右寄せなど)
  • Constraint : 列数や行数の制限

要素の大きさを変更する

全てのボタンをキャンバスに収めるため大きさを変更します。
Cell Sizeのxとyの値を50に設定しました。

f:id:penyop:20210518144902p:plain
Cell Sizeを変更
f:id:penyop:20210518141832p:plain
ボタンが小さくなった

要素同士の間隔を空ける

要素同士がくっつきすぎなので間隔を空けます。
Spacingのxとyの値を10に設定しました。

f:id:penyop:20210518145048p:plain
Spacingを設定
f:id:penyop:20210518142610p:plain
隙間ができた

中央寄せにする

デフォルトだと左上に寄せられているので、中央寄せにしたいと思います。
Child AlignmentをMiddle Centerに設定しました。

f:id:penyop:20210518145246p:plain
Child Algnmentを設定
f:id:penyop:20210518143140p:plain
垂直方向、水平方向ともに中央寄せになった

列数の上限を設定する

ConstraintをFixed Column Countに設定すると、Constraint Countという項目が現れます。
Constraint Countの値に4を設定しました。

f:id:penyop:20210518145438p:plain
Constraintを設定
f:id:penyop:20210518143709p:plain
列数が4列に制限された

簡単に一定間隔でボタンを配置することができました!