【Unity】アイコンの数に合わせてレイアウトを調整する

Unity使いなら かっこいいレイアウトを自動制御したいですよね！！

レイアウト 自動制御 で調べると様々な記事が出てきますが、今回は

アイコンの数だけ背景の高さ(幅)を動的に合わせてくれる 処理を実装して見ましょう。

全体図

階層はこうなっています。

BG ... 動的に変化させる背景画像

ButtonArea...Button(アイコン)を生成させる親オブジェクト

Button... poolオブジェクト

Layout.csのプロパティですが、

Space ... アイコン同士の間隔

BtnSize...生成するButton(アイコン)の幅と高さ

Btn...生成元のpool変数

BtnList...生成したButton(アイコン)を格納するList

BtnArea...Button(アイコン)の生成先の親オブジェクト

Bg... Sizeを調整する背景画像

動的に変化させる背景

ポイントはanchorのpivotのYを1にして下さい。

Heightを変化させてもposYは変化しなくなります。

アイコンを表示するエリア

こちらもanchorのpivotのYを1にして下さい

増やすアイコンオブジェクト

こちらは任意です。

注意点は必ず初期位置座標は0,0でお願いします。

スクリプト一覧

<プロパティ>

Button(アイコン)の生成

今回はテストで3つ生成しています。

内容は設定してあるpoolオブジェクトを生成してListに格納しています。

ポイントはanchorpositionを Button(アイコン) の高さ + 間隔 ) * 生成順序 で生成したアイコンの位置を調整しています。

背景の高さを変更

本題と背景サイズを変更します。

今回は高さのみ変更です。

まずは現在の背景画像のSizeを取得しておきます。

サイズ変更の式は 初期の背景画像サイズ   + ( 生成アイコンのサイズ + 生成数) * ( 間隔 + 生成数 - 1) になっています。

これでオブジェクトの生成数に合わせて背景画像のSizeを動的に変化できるようになりました。

いかがだったでしょうか。

今回は全てStartで書いていましたが、アイコンが増える度に発生するようにすれば、ダイナミックなUIを作成できます！