はじめに
HPのように並んだアイテムを配置し、オブジェクトが非アクティブになったときにも位置をずらさずに左右に詰める方法を備忘録も兼ねて解説します。
配置
まず、親となるImageを配置します。
なんとなく右上に置きたいので、右上固定になるようアンカーなどで位置を調整します。
このImageは位置を確認するために置いているだけなので特にスプライトは設定しなくて大丈夫です。
コンポーネント追加
今回はアイテムを横並びにしたいので以下のコンポーネントを追加します。
- 1.Horizontal Layout Group
- 子オブジェクトを横方向に整列してくれます。
- 縦に並べる場合Vertical Layout Groupにしてください。
- 今回値は変えても特に意味がないので設定しません。Spacingはお好みで。
- 2.Content Size Fitter
- オブジェクトのサイズに合わせて可変させるのに便利です。
- 今回横幅を可変させたいのでHorizontal FitをPrefferd Sizeにします。
- これを設定すると先ほどの白い```Image```が見えなくなりますが問題ありません。
子を追加
先ほどの親オブジェクトの下に好きな画像を子として置きます。
今回はHPなので５つくらい置いてみました。
背景の白い部分は親のスプライトですが、きちんと配置できていることを確認できたためRemove Componentしてください。
親オブジェクトのPivotを調整する
この状態で子を非アクティブにすると右詰めまたは中央詰めの状態になると思います。
右詰めのままでも良い場合もありますが、仕様によっては左詰めが求められることがあるかもしれません。
- 左詰めにする場合は親の
PivotのXを0に設定 - 右詰めにする場合は親の
PivotのXを1に設定
すると子を非アクティブにしたとき右、または左から消えるように調整ができます。
おわりに
今回はLayout GroupとContent Size Fitterを組み合わせたUI配置を行いました。
UnityのUI配置はまだまだ仕様や便利機能を把握しきれていないのでもっと理解を深めたいところです。