例えばオプション画面の作成などで等間隔の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を作成する事ができます。