自動レイアウト機能を利用した UI サイズ可変対応の実装例��
最終更新：
orika_ex_miyako 2024年10月23日(水) 16:46:10履歴
Unity の自動レイアウト機能を利用し、複数の UI サイズの可変対応を行う場合の実装例です。
LayoutGroup コンポーネントの扱い、Layout Element の設定、そして制御したい UI オブジェクトのアンカー位置、Pivot の位置によって、可変時の伸縮位置が変化します。
ここでは TextMeshPro コンポーネント(Text も同じ)の文字数に応じて、位置を右端に固定したまま、文字に応じて Image コンポーネントのサイズも可変させます。
また、TextMeshPro コンポーネントと同じ列にある Image コンポーネントは、常に Text コンポーネントの先頭に配置するようにします。
＜実装動画＞
＜入力なし＞
＜入力例� �
＜入力例�◆�
構造
Canvas ゲームオブジェクト内に、下記のような構造のゲームオブジェクトを作成します。
(TextMeshPro コンポーネントはプレハブですが、通常のゲームオブジェクトで問題ありません。)
ヒエラルキー
想定している運用としては、アイコン画像と、そのアイコン画像の効果を表示する UI です。
親オブジェクト(imgBuffFrame ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。この例では、フレームとして機能しています。
今回のケースでは、Canvas 内の右上に配置する設定で作成しています。
そちらを基準にアンカーや座標を設定していますので、この部分は、適宜変更してください。
全体像
インスペクター
Scene ビュー
ポイントは何点かあります。
まず、アンカー設定後、Pivot の設定を見直します。アンカーを設定しても Pivot は変更されません。
このケースでは、画面の右端にこのオブジェクトを固定し、左方向に可変させたいので
Pivot X を 1 に設定しています。
この部分を設定しておかないと、UI が可変した際に位置がずれていきます。注意ポイントの１つです。
続いて、Horizontal Layout Group をアタッチし、設定を行います。
Horizontal Layout Group をアタッチすると初期設定で Child Force Expand にチェックが入っていますので、こちらを２つとも外します。
その後、Controll Child Size に２つともチェックを入れます。
Child Alignment、Padding、Spacing といった設定も必要ですが、こちらは子オブジェクトを配置してから設定して調整を行います。
最後に Content Size Fitter コンポーネントをアタッチし、Horizontal Fit の設定を Preferred Size に変更します。
こちらでオブジェクトの可変化が可能になります。
子オブジェクト��(imgBuffIcon ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。この例ではここに、アイコン画像を設定します。
親オブジェクトに Horizontal Layout Group がアタッチされているので、自動的に配置されます。
そのため、座標やアンカーは自由に設定できません。Pivot の設定は不要です。
Layout Element コンポーネントをアタッチします。
Preferred Width と Preferred Height の値を任意に設定してください。
ここでアイコンの上下左右の最小値を設定しておくことで、常にそのアイコンのサイズが保証されます。
そのため、アイコンサイズは、この Preferred Width と Preferred Height に同じ値で設定するようにしてください。
Min Width と Min Height では、自動レイアウトが動いた際に適用されませんので注意してください。
インスペクター
Scene ビュー
子オブジェクト��(txtBuff ゲームオブジェクト)
TextMeshPro コンポーネント(Text コンポーネント)を作成し、設定を行います。
この例ではここに、子オブジェクト�，離▲ぅ灰鷁菫�の説明文を表示します。
こちらも親オブジェクトに Horizontal Layout Group がアタッチされているので、自動的に子オブジェクト�，留βΔ貿枌屬気譴泙后�
そのため、座標やアンカーは自由に設定できません。Pivot の設定は不要です。
文字の設定は任意です。色、サイズ、位置なども適宜調整してください。
最初に Content Size Fitter コンポーネントをアタッチします。
Content Size Fitter コンポーネントでは Horizontal Fit の設定を Preferred Size に変更します。
続いて Layout Element コンポーネントをアタッチします。
Min Width の値を任意に設定してください。ここで文字の最小値を設定しておくことで、
親オブジェクト(フレーム)がつぶれて、オブジェクト自体が見えなくなってしまうのを防ぐことができます。
インスペクター��
インスペクター��(上の続きです)
Scene ビュー
子オブジェクトの位置の調整
子オブジェクトの配置が完了したので、最後に子オブジェクトの位置の調整を行います。
各子オブジェクトは Horizontal Layout Group の影響下にありますので、Horizontal Layout Group の Padding の位置によって、子オブジェクトの位置が変化します。
まず最初に親オブジェクトの Horizontal Layout Group にある Child Alignment を設定してから Padding を変更します。
先に Padding を設定してから Child Alignment を変更してしまうとレイアウトが崩れてしまい、Padding の再調整が必要になるためです。
よって基本的には、先に子オブジェクトを配置し、それから Child Alignment や Padding や Spacing を調整した方がいいでしょう。
適宜な数値に設定してください。
デバッグ
Scene ビューでもデバッグができますので、TextMeshPro コンポーネントの Text 部分に文字を入れたり、消したりしてみてください。
最小幅を維持しているか、文字数が増えたときにフレームが可変し、子オブジェクト�，琉銘屬亙僂錣蕕裟萋�にあるか、
文字に合わせてフレーム自体が移動してしまっていないか、など、複数の部分のチェックを行ってください。
＜実装動画＞
以上で完成となります。
LayoutGroup コンポーネントの扱い、Layout Element の設定、そして制御したい UI オブジェクトのアンカー位置、Pivot の位置によって、可変時の伸縮位置が変化します。
ここでは TextMeshPro コンポーネント(Text も同じ)の文字数に応じて、位置を右端に固定したまま、文字に応じて Image コンポーネントのサイズも可変させます。
また、TextMeshPro コンポーネントと同じ列にある Image コンポーネントは、常に Text コンポーネントの先頭に配置するようにします。
＜実装動画＞
＜入力なし＞
＜入力例� �
＜入力例�◆�
構造 
Canvas ゲームオブジェクト内に、下記のような構造のゲームオブジェクトを作成します。
(TextMeshPro コンポーネントはプレハブですが、通常のゲームオブジェクトで問題ありません。)
ヒエラルキー
想定している運用としては、アイコン画像と、そのアイコン画像の効果を表示する UI です。
親オブジェクト(imgBuffFrame ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。この例では、フレームとして機能しています。
今回のケースでは、Canvas 内の右上に配置する設定で作成しています。
そちらを基準にアンカーや座標を設定していますので、この部分は、適宜変更してください。
全体像
インスペクター
Scene ビュー
ポイントは何点かあります。
まず、アンカー設定後、Pivot の設定を見直します。アンカーを設定しても Pivot は変更されません。
このケースでは、画面の右端にこのオブジェクトを固定し、左方向に可変させたいので
Pivot X を 1 に設定しています。
この部分を設定しておかないと、UI が可変した際に位置がずれていきます。注意ポイントの１つです。
続いて、Horizontal Layout Group をアタッチし、設定を行います。
Horizontal Layout Group をアタッチすると初期設定で Child Force Expand にチェックが入っていますので、こちらを２つとも外します。
その後、Controll Child Size に２つともチェックを入れます。
Child Alignment、Padding、Spacing といった設定も必要ですが、こちらは子オブジェクトを配置してから設定して調整を行います。
最後に Content Size Fitter コンポーネントをアタッチし、Horizontal Fit の設定を Preferred Size に変更します。
こちらでオブジェクトの可変化が可能になります。
子オブジェクト��(imgBuffIcon ゲームオブジェクト)
Image コンポーネントを持つゲームオブジェクトを作成します。この例ではここに、アイコン画像を設定します。
親オブジェクトに Horizontal Layout Group がアタッチされているので、自動的に配置されます。
そのため、座標やアンカーは自由に設定できません。Pivot の設定は不要です。
Layout Element コンポーネントをアタッチします。
Preferred Width と Preferred Height の値を任意に設定してください。
ここでアイコンの上下左右の最小値を設定しておくことで、常にそのアイコンのサイズが保証されます。
そのため、アイコンサイズは、この Preferred Width と Preferred Height に同じ値で設定するようにしてください。
Min Width と Min Height では、自動レイアウトが動いた際に適用されませんので注意してください。
インスペクター
Scene ビュー
子オブジェクト��(txtBuff ゲームオブジェクト)
TextMeshPro コンポーネント(Text コンポーネント)を作成し、設定を行います。
この例ではここに、子オブジェクト�，離▲ぅ灰鷁菫�の説明文を表示します。
こちらも親オブジェクトに Horizontal Layout Group がアタッチされているので、自動的に子オブジェクト�，留βΔ貿枌屬気譴泙后�
そのため、座標やアンカーは自由に設定できません。Pivot の設定は不要です。
文字の設定は任意です。色、サイズ、位置なども適宜調整してください。
最初に Content Size Fitter コンポーネントをアタッチします。
Content Size Fitter コンポーネントでは Horizontal Fit の設定を Preferred Size に変更します。
続いて Layout Element コンポーネントをアタッチします。
Min Width の値を任意に設定してください。ここで文字の最小値を設定しておくことで、
親オブジェクト(フレーム)がつぶれて、オブジェクト自体が見えなくなってしまうのを防ぐことができます。
インスペクター��
インスペクター��(上の続きです)
Scene ビュー
子オブジェクトの位置の調整
子オブジェクトの配置が完了したので、最後に子オブジェクトの位置の調整を行います。
各子オブジェクトは Horizontal Layout Group の影響下にありますので、Horizontal Layout Group の Padding の位置によって、子オブジェクトの位置が変化します。
まず最初に親オブジェクトの Horizontal Layout Group にある Child Alignment を設定してから Padding を変更します。
先に Padding を設定してから Child Alignment を変更してしまうとレイアウトが崩れてしまい、Padding の再調整が必要になるためです。
よって基本的には、先に子オブジェクトを配置し、それから Child Alignment や Padding や Spacing を調整した方がいいでしょう。
適宜な数値に設定してください。
デバッグ
Scene ビューでもデバッグができますので、TextMeshPro コンポーネントの Text 部分に文字を入れたり、消したりしてみてください。
最小幅を維持しているか、文字数が増えたときにフレームが可変し、子オブジェクト�，琉銘屬亙僂錣蕕裟萋�にあるか、
文字に合わせてフレーム自体が移動してしまっていないか、など、複数の部分のチェックを行ってください。
＜実装動画＞
以上で完成となります。
コメントをかく