自動レイアウト機能を利用した UI サイズ可変対応の実装例��
最終更新：
orika_ex_miyako 2025年12月28日(日) 10:01:25履歴
Unity の自動レイアウト機能を利用し、１つの UI を固定し、もう１つの UI のサイズの可変対応を行う場合の実装例です。
手動で動かしているので UI が遅れて反映されますが、実際に整形して表示すれば表示の遅延はありません。
＜実装画像＞
UI 自体は常に画面の中央に位置し、そこから上下方向に伸縮していることがわかると思います。
こういったデザインの UI は、例えばログインボーナス用のポップアップ(ダイアログ)のような UI です。
タイトル用の画像を常に上部に固定しつつ、ログインボーナスのアイテム数に応じてもう１つの UI(フレーム画像) のサイズを可変して、ポップアップ自体は画面中央に固定する機能です。
Layout Group コンポーネントの扱い、Layout Element の設定、そして制御したい UI オブジェクトのアンカー位置、Pivot の位置により、可変時の伸縮起点を固定しつつ、サイズを変化させる実装を行っています。
＜実装画像＞
上部の白い部分がタイトル用画像が入る部分です。
その下のフレーム部分が可変長の部分です。アイテム数が1つの場合、6つの場合などを比較してもわかる通り、
常に白いタイトル用画像はフレームの上に固定されており、かつ、アイテム数に応じてフレームサイズが変化していますが、
ポップアップ自体は常に画面の中央に固定されている作りです。
ゲームオブジェクトの構成
Canvas ゲームオブジェクト内に、下記のような構造のゲームオブジェクトを作成します。
Canvas の構造は任意です。
ヒエラルキー
Canvas ゲームオブジェクト(任意)
想定している運用としては、タイトル画像と、その各アイコン画像を可変表示する UI です。
親オブジェクト(LoginBonusContainer ゲームオブジェクト)
各ゲームオブジェクトの Width と Height は Canvas の解像度を元に設定しています。
そのためインスペクターの設定値は、ご自分の開発環境に合わせて適宜調整して利用ください。
２つの子オブジェクトをまとめておくための、フォルダ役のゲームオブジェクトです。
アンカー、ピボットの位置は初期のまま利用します。ピボットが中央になっているので、サイズが可変してもこのオブジェクト群は常に画面の中央に配置されます。
このオブジェクトには Vertical Layout Group コンポーネントをアタッチして、子オブジェクトを縦に並ぶように設定します。
ここでは Padding やスペースなどはいれていませんが、任意に設定してください。
また Vertical Layout Group をアタッチすると初期設定で Child Force Expand にチェックが入っていますので、こちらを２つとも外します。
次に Content Size Fitter コンポーネントをアタッチして、VerticalFit のみ Preferred Size に設定し、子オブジェクトのサイズに合わせて可変するようにしています。
インスペクター
Scene ビュー(青い枠部分)
子オブジェクト��(imgTitle ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。
この例ではこの Image コンポーネントにタイトル用画像を設定します。
よって Width と Height の値はタイトル用の画像を元に設定しています。
インスペクター
Scene ビュー(青い枠部分)
親オブジェクトの LoginBonusContainer ゲームオブジェクトに Vertical Layout Group コンポーネントがアタッチされていますので、
アンカーの設定は自動的に Left Top に上書きされます。これは変更できません。
ピボットですが、このケースでは、親オブジェクトの上端にくっつけてこのオブジェクトを固定したいので
Pivot Y を 1 に設定しています。
この部分を設定しておかないと、UI が可変した際に位置がずれていきます。注意ポイントの１つです。
続いて Layout Element コンポーネントをアタッチし、設定を行います。
高さのみ推奨サイズで固定したいので、Preferred Height にチェックを入れ、Height と同じ値で設定しておきます。
Unity 公式ドキュメント
Layout Element
https://docs.unity3d.com/ja/current/Manual/script-... Element.html
子オブジェクト��(LoginBonusViewTran ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。
この例では、Image コンポーネントにフレーム用画像を設定します。
また、次の手順で作成する LoginBonusView プレハブの配置位置としての機能を有しています。
(そのためゲームオブジェクトの名称も img 〜 ではなく、LoginBonusViewTran としています)
インスペクター
Scene ビュー(青い枠部分)
親オブジェクトに Vertical Layout Group がアタッチされているので、自動的に配置されます。
そのため、座標やアンカーは自由に設定できません。ピボットの設定は初期値のままで不要です。
まず Grid Layout Group コンポーネントをアタッチします。
Padding、スペース、Cell Size などは適宜な値で設定してください。
ただし、これらは次の手順で作成するプレハブに関係する値ですので、この時点では仮の値でよいです。
Start Corner、Start Axis、Child Alignment も任意ですが、初期値のままで問題ありません。
Constraint は Fixed Column Count に設定することで横に並べた際の個数設定ができます。
今回は 5 に設定し、5つまで横に並べ、6つ目以降は改行して並ぶようにしています。
次に Content Size Fitter コンポーネントをアタッチし、Vertical Fit の設定を Preferred Size に変更します。
こちらでオブジェクトの可変化が可能になります。警告が表示されますが問題ありません。
構成追加
ここまでで、ベースの部分を作成できました。
次にポップアップ内に並べるアイコン用のゲームオブジェクトを作成してプレハブ化します。
プレハブの配置場所は LoginBonusViewTran ゲームオブジェクトの子オブジェクトとします。
ヒエラルキー
Scene ビュー
こちらにアイコンを複数個並べることで、UI が可変します。
LoginBonusView オブジェクト(プレハブ)
LoginBonusViewTran ゲームオブジェクトを親として配置するプレハブです。
こちらがゲーム画面に並ぶアイコン用ゲームオブジェクトです。
今回はタップ(ボタン)機能、フレーム画像設定機能、アイコン画像設定機能、アイテム数表示機能のみを有しているサンプル構成です。
適宜調整してください。
これらのコンポーネントは専用のクラス(例えば LoginBonusView など)を作成して管理する設計です。ソースコードは割愛します。
構造
サンプル
各インスペクター画像
LoginBonusView オブジェクトのサイズと位置の調整
LoginBonusView オブジェクトの配置が完了したので、最後に、このオブジェクトの位置の調整を行います。
各 LoginBonusView オブジェクトは、親オブジェクトである LoginBonusViewTran オブジェクトの持つ Grid Layout Group の影響下にあります。
そのため、Grid Layout Group の Padding の位置によって、子オブジェクトの位置が変化します。
またスペースの値によって、子オブジェクト同士の間隔が変化し、Cell Size によって Width と Height が変化します。
複数の LoginBonusView オブジェクトを複製して並べてみて、これらの値を適宜な数値に調整してください。
実際の運用を意識して事前に配置確認をしておくことが重要です。
なお、横に並べる数を増減したい場合には、同じく Grid Layout Group の Constraint に設定した Fixed Column Count の値を変更してください。
運用例
実際の運用としては、ポップアップが開くタイミングで LoginBonusView オブジェクト(プレハブ)を LoginBonusViewTran オブジェクトの位置に指定数生成して配置します。
自動的に成形されて並ぶので、最初に提示した画像のように複数の LoginBonusView オブジェクト(プレハブ)のクローンが並ぶことでポップアップのサイズが可変して設定されます。
ヒエラルキー上と画面はこのようになります。
ヒエラルキー
ゲーム画面
あとはタイトル用画像を設定したり、各 LoginBonusView オブジェクトにアタッチされている LoginBonusView クラスを仲介して
ボタン設定やアイコン画像などの設定を動的に行うことで画面を作成します。
デバッグ
Scene ビューでもデバッグができますので、LoginBonusViewTran ゲームオブジェクトの子オブジェクトとして LoginBonusView プレハブを配置してみてください。
複数個配置した際にも問題なくサイズが可変し、かつ、画面の中央からポップアップが変化しないか、など、複数の部分のチェックを行ってください。
＜実装動画＞
以上で完成となります。
手動で動かしているので UI が遅れて反映されますが、実際に整形して表示すれば表示の遅延はありません。
＜実装画像＞
UI 自体は常に画面の中央に位置し、そこから上下方向に伸縮していることがわかると思います。
こういったデザインの UI は、例えばログインボーナス用のポップアップ(ダイアログ)のような UI です。
タイトル用の画像を常に上部に固定しつつ、ログインボーナスのアイテム数に応じてもう１つの UI(フレーム画像) のサイズを可変して、ポップアップ自体は画面中央に固定する機能です。
Layout Group コンポーネントの扱い、Layout Element の設定、そして制御したい UI オブジェクトのアンカー位置、Pivot の位置により、可変時の伸縮起点を固定しつつ、サイズを変化させる実装を行っています。
＜実装画像＞
上部の白い部分がタイトル用画像が入る部分です。
その下のフレーム部分が可変長の部分です。アイテム数が1つの場合、6つの場合などを比較してもわかる通り、
常に白いタイトル用画像はフレームの上に固定されており、かつ、アイテム数に応じてフレームサイズが変化していますが、
ポップアップ自体は常に画面の中央に固定されている作りです。
ゲームオブジェクトの構成 
Canvas ゲームオブジェクト内に、下記のような構造のゲームオブジェクトを作成します。
Canvas の構造は任意です。
ヒエラルキー
Canvas ゲームオブジェクト(任意)
想定している運用としては、タイトル画像と、その各アイコン画像を可変表示する UI です。
親オブジェクト(LoginBonusContainer ゲームオブジェクト)
各ゲームオブジェクトの Width と Height は Canvas の解像度を元に設定しています。
そのためインスペクターの設定値は、ご自分の開発環境に合わせて適宜調整して利用ください。
２つの子オブジェクトをまとめておくための、フォルダ役のゲームオブジェクトです。
アンカー、ピボットの位置は初期のまま利用します。ピボットが中央になっているので、サイズが可変してもこのオブジェクト群は常に画面の中央に配置されます。
このオブジェクトには Vertical Layout Group コンポーネントをアタッチして、子オブジェクトを縦に並ぶように設定します。
ここでは Padding やスペースなどはいれていませんが、任意に設定してください。
また Vertical Layout Group をアタッチすると初期設定で Child Force Expand にチェックが入っていますので、こちらを２つとも外します。
次に Content Size Fitter コンポーネントをアタッチして、VerticalFit のみ Preferred Size に設定し、子オブジェクトのサイズに合わせて可変するようにしています。
インスペクター
Scene ビュー(青い枠部分)
子オブジェクト��(imgTitle ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。
この例ではこの Image コンポーネントにタイトル用画像を設定します。
よって Width と Height の値はタイトル用の画像を元に設定しています。
インスペクター
Scene ビュー(青い枠部分)
親オブジェクトの LoginBonusContainer ゲームオブジェクトに Vertical Layout Group コンポーネントがアタッチされていますので、
アンカーの設定は自動的に Left Top に上書きされます。これは変更できません。
ピボットですが、このケースでは、親オブジェクトの上端にくっつけてこのオブジェクトを固定したいので
Pivot Y を 1 に設定しています。
この部分を設定しておかないと、UI が可変した際に位置がずれていきます。注意ポイントの１つです。
続いて Layout Element コンポーネントをアタッチし、設定を行います。
高さのみ推奨サイズで固定したいので、Preferred Height にチェックを入れ、Height と同じ値で設定しておきます。
Unity 公式ドキュメント
Layout Element
https://docs.unity3d.com/ja/current/Manual/script-... Element.html
子オブジェクト��(LoginBonusViewTran ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。
この例では、Image コンポーネントにフレーム用画像を設定します。
また、次の手順で作成する LoginBonusView プレハブの配置位置としての機能を有しています。
(そのためゲームオブジェクトの名称も img 〜 ではなく、LoginBonusViewTran としています)
インスペクター
Scene ビュー(青い枠部分)
親オブジェクトに Vertical Layout Group がアタッチされているので、自動的に配置されます。
そのため、座標やアンカーは自由に設定できません。ピボットの設定は初期値のままで不要です。
まず Grid Layout Group コンポーネントをアタッチします。
Padding、スペース、Cell Size などは適宜な値で設定してください。
ただし、これらは次の手順で作成するプレハブに関係する値ですので、この時点では仮の値でよいです。
Start Corner、Start Axis、Child Alignment も任意ですが、初期値のままで問題ありません。
Constraint は Fixed Column Count に設定することで横に並べた際の個数設定ができます。
今回は 5 に設定し、5つまで横に並べ、6つ目以降は改行して並ぶようにしています。
次に Content Size Fitter コンポーネントをアタッチし、Vertical Fit の設定を Preferred Size に変更します。
こちらでオブジェクトの可変化が可能になります。警告が表示されますが問題ありません。
構成追加
ここまでで、ベースの部分を作成できました。
次にポップアップ内に並べるアイコン用のゲームオブジェクトを作成してプレハブ化します。
プレハブの配置場所は LoginBonusViewTran ゲームオブジェクトの子オブジェクトとします。
ヒエラルキー
Scene ビュー
こちらにアイコンを複数個並べることで、UI が可変します。
LoginBonusView オブジェクト(プレハブ)
LoginBonusViewTran ゲームオブジェクトを親として配置するプレハブです。
こちらがゲーム画面に並ぶアイコン用ゲームオブジェクトです。
今回はタップ(ボタン)機能、フレーム画像設定機能、アイコン画像設定機能、アイテム数表示機能のみを有しているサンプル構成です。
適宜調整してください。
これらのコンポーネントは専用のクラス(例えば LoginBonusView など)を作成して管理する設計です。ソースコードは割愛します。
構造
サンプル
各インスペクター画像
LoginBonusView オブジェクトのサイズと位置の調整
LoginBonusView オブジェクトの配置が完了したので、最後に、このオブジェクトの位置の調整を行います。
各 LoginBonusView オブジェクトは、親オブジェクトである LoginBonusViewTran オブジェクトの持つ Grid Layout Group の影響下にあります。
そのため、Grid Layout Group の Padding の位置によって、子オブジェクトの位置が変化します。
またスペースの値によって、子オブジェクト同士の間隔が変化し、Cell Size によって Width と Height が変化します。
複数の LoginBonusView オブジェクトを複製して並べてみて、これらの値を適宜な数値に調整してください。
実際の運用を意識して事前に配置確認をしておくことが重要です。
なお、横に並べる数を増減したい場合には、同じく Grid Layout Group の Constraint に設定した Fixed Column Count の値を変更してください。
運用例
実際の運用としては、ポップアップが開くタイミングで LoginBonusView オブジェクト(プレハブ)を LoginBonusViewTran オブジェクトの位置に指定数生成して配置します。
自動的に成形されて並ぶので、最初に提示した画像のように複数の LoginBonusView オブジェクト(プレハブ)のクローンが並ぶことでポップアップのサイズが可変して設定されます。
ヒエラルキー上と画面はこのようになります。
ヒエラルキー
ゲーム画面
あとはタイトル用画像を設定したり、各 LoginBonusView オブジェクトにアタッチされている LoginBonusView クラスを仲介して
ボタン設定やアイコン画像などの設定を動的に行うことで画面を作成します。
デバッグ
Scene ビューでもデバッグができますので、LoginBonusViewTran ゲームオブジェクトの子オブジェクトとして LoginBonusView プレハブを配置してみてください。
複数個配置した際にも問題なくサイズが可変し、かつ、画面の中央からポップアップが変化しないか、など、複数の部分のチェックを行ってください。
＜実装動画＞
以上で完成となります。
コメントをかく