【Unity】UIを整えて表示したい : Grid Layout Group ~

例えばオプション画面の作成などで等間隔のUI配置をしたい場合があると思います。

そんな時に役立つのが「Grid Layout Group」というコンポーネントです。

CellSizeは設定するGridの大きさ

PaddingはGridの余白

SpacingはGrid事の間隔

Paddingはgridの端の余白

StartCornerは生成場所です。

今回は生成場所は左上から開始されます。

下にアタッチされている「Content Size Fitter 」はコンテンツサイズに合わせたUIを設計するコンポーネントです。

今回は配置するUIの大きさに合わせて変化する「Preferred Size」に設定します

【ボタンを増やす】

上記の設定で子オブジェクトのボタンを増やして見ましょう。

右側に増やしたボタンが配置されました。

これはGrid Layout GroupのConstraintを「Flexible」に設定しているためです。

では、その前にSpacingの値を変えて見たらどうなるでしょうか？

ご覧の通りボタン毎の間隔が開きました。

SpacingはGridの間隔を設定する値です。

間隔を開けて配置したい場合に使用しましょう。

では、本題のConstraintを変更した場合、どうなるのか見てみましょう。

Constraintを「Fixed Row Count」に、Constraint Count」を 2 に設定します。

前回と違って「縦」にボタンが配置されました。

Constraintは「縦か横でGrid数の上限」を設定し、それに合わせて自動的にレイアウトしてくれます。

上記の設定のままボタンを増やしました。

このように設定した法則通りのUIを作成する事ができます。