LayoutGroup 内の各オブジェクトの位置を動的に自動調整する��
最終更新：
orika_ex_miyako 2024年03月01日(金) 11:34:45履歴
この記事は、LayoutGroup を利用した自動調整機能において
ScrollView を持つコンポーネントが LayoutGroup 内に含まれている場合に、各UI 用ゲームオブジェクトの位置を動的に自動調整する方法の実装例です。
２回の手順に分けて実装をおこなっていきます。
この手順では、オブジェクトの設定をメインに解説しています。次の手順ではスクリプトを作成していきます。
動画ファイルへのリンク
なお。LayoutGroup 内に Slider や ScrollView などの子オブジェクトを複数持つ UI が含まれていない場合には、下記の記事を参考にすることで機能実装できます。
学習対象者
スクリプタブル・オブジェクト、クラスの継承、UniRx を利用した購読処理が含まれています。
こちらの学習自体は含まれていませんので、これらの概念や機能を理解している方を対象としています。
設計
Unity では UI の自動整列機能として LayoutGroup があります。
例えば、Image と Text を横一列に表示させ、その後、Text や Image の横サイズの変更に応じて
各オブジェクトの位置を自動調整する、というような使い方です。
これは LayoutGroup をアタッチしただけでは実装が行えません。
LayoutGroup の設定のほか、制御下となる各子オブジェクトにも設定が必要となります。
ここでは参考用に UI を作成し、かつ、それを動的に変化させるサンプルのスクリプトを用意して動作検証を行います。
特に重要な点が子オブジェクトを複数持つ UI オブジェクトが LayoutGroup 内に含まれている場合の挙動です。
ScrollView には子オブジェクトがあり、それらの各サイズの調整も必要になります。
UI 制作 参考例
ここではサンプルを提示します。
LayoutGroup を利用して、ScrollView をオブジェクトに含めてもられば、サイズや構成については、自由に作成してもらって構いません。
サンプルでは VerticalLayoutGroup で実装していますが、HorizontalLayoutGroup でも問題ありません。
全体構成
Canvas(UpgradePopup)
UpgradePopup は Canvas ですが、これは入れ子になっている Canvas です。
そのため、さらに上に親オブジェクトとして Canvas が存在している構成です。
CanvasGroup コンポーネントをアタッチし、子オブジェクトをまとめて管理できるようにしています。
LayoutGroup 用オブジェクト
ScrollView 内の Content に VerticalLayoutGroup をアタッチして設定しています。
Spacing のサイズについては適宜調整してください。子オブジェクト同士の間が空きます。
また Use Child Size の Height にのみチェックを入れて、子オブジェクトの Height を操作できるようにしています。
またこのゲームオブジェクト自体の Width と Height の値が VerticalLayoutGroup が自動調整可能な範囲になります。
ScrollView により自動で伸縮しますが、ContentSizeFitter コンポーネントをアタッチし、設定することで伸縮幅を保持できるようにしています。
今回は ContentSizeFitter の縦方向の位置のみ可変できるように VerticalFit のみ Preferred Size として、サイズが伸縮するようにします。
このオブジェクトが UI の親オブジェクトとなりますので、このオブジェクトの Scale が子オブジェクトにも適用されます。
よって、Scale の値はいじらず、必ず、すべて 1 に設定してください。
設定のポイントは、Content の VerticalLayoutGroup のうち、UseChildSize の Height(Y軸方向)にのみチェックを入れて、子オブジェクトの長さを反映できるようにしています。
ContentSizeFitter をセットすることで、その長さに合わせて Content の長さが伸縮します。
その場合、子オブジェクトの最小の長さをセットしていないと、つぶれて見えなくなります。
Subheading と ElementPlace に LayoutElement を設定しているのは、最小値を設定することで、最小限のサイズで常に表示を確保するためです。
今回は Y 軸のみ確保したいため、 Min Height にチェックをいれて、画面に見えるようにするために必ず確保したい最小値を設定しています。
よって、Content 内の設定に加えて、このような構造にすることで、Subheading と ElementPlace がそれぞれの位置を確保するようになります。
LayoutElement 用オブジェクト
LayoutGroup 内に配置する空のゲームオブジェクトです。ほかの UI でも問題ありません。
今回、このオブジェクトのサイズは変更しない前提です。
子オブジェクトとして Image と Text を配置していますが、このサイズは変更がありません。
LayoutElement では、サイズの最小値を設定しています。
この設定をおこなっておくことにより、VerticalLayoutGroup の影響下にあっても、サイズを固定化できています。
今回の実装例では、これを４つ作成していますので、それぞれの名称を変更して利用しています。
GridLayoutGroup を持つゲームオブジェクト
このゲームオブジェクトの子オブジェクトとして、複数のプレハブを生成して利用します。
空のゲームオブジェクトを作成しています。
GridLayoutGroup コンポーネント、ContentSizeFittter コンポーネント、LayoutElement コンポーネントの３つをアタッチしています。
GridLayoutGroup では、このゲームオブジェクト下に作成する予定のプレハブのサイズを設定し、伸縮する方向に合わせて設定を行っています。
今回は水平方向に２つ並べ、その後は垂直下の行を作成して、また水平方向に２つ並べられるようにしています。
ContentSizeFittter では、Vertical 方向のみ設定を行い、サイズが伸縮した際に対応しています。
LayoutElement では Min Height に最小時のサイズを設定しておきます。これで子オブジェクトがないもない場合でも最小限のサイズを確保します。
今回の実装例では、これを４つ作成していますので、それぞれの名称を変更して利用しています。
GridLayoutGroup 内に並べるプレハブのオブジェクト
上記の GridLayoutGroup がアタッチされているゲームオブジェクトを親とし、
その子オブジェクトとして生成するプレハブを作成します。
ElementPlace 内で作成し、プレハブにしてください。
このプレハブが、それぞれの Upgrade の内容を示すオブジェクトになりますので、
実際には生成されたタイミングで、スクリプタブル・オブジェクトよりデータを受け取り、
設定を行うことでオブジェクトの振る舞いを変えます。
振る舞いを変える必要がありますので、スクリプト作成後、このプレハブにアタッチします。
手動で機能確認を行う
実際にプレハブを並べて、機能確認をおこないましょう。
Scene ビュー内にて、UpgradeElement プレハブを手動で配置します。
それを複製して複数個並べていきます。
この際、LayoutGroup の機能により、横方向に並んでいる UpgradeElement プレハブが２こ並んだ時点で縦方向に延長され、位置が変更されれば成功です。
この時点で正常に動作していない場合には、次のスクリプトを利用して動的に変更した場合にも正常に動作しません。
しっかりとチェックし、問題点がないか、見直してください。
以上で完了です。
次はスクリプトを作成し、制御を行います。
LayoutGroup 内の各オブジェクトの位置を動的に自動調整する�� です。
ScrollView を持つコンポーネントが LayoutGroup 内に含まれている場合に、各UI 用ゲームオブジェクトの位置を動的に自動調整する方法の実装例です。
２回の手順に分けて実装をおこなっていきます。
この手順では、オブジェクトの設定をメインに解説しています。次の手順ではスクリプトを作成していきます。
動画ファイルへのリンク
なお。LayoutGroup 内に Slider や ScrollView などの子オブジェクトを複数持つ UI が含まれていない場合には、下記の記事を参考にすることで機能実装できます。
【ハルシオンブログ】様
Layoutグループの中で、ほかのオブジェクトのサイズが変わったときに自動で他のオブジェクトの位置を調整する方法
http://halcyonsystemblog.jp/blog-entry-1045.html
学習対象者 
スクリプタブル・オブジェクト、クラスの継承、UniRx を利用した購読処理が含まれています。
こちらの学習自体は含まれていませんので、これらの概念や機能を理解している方を対象としています。
設計
Unity では UI の自動整列機能として LayoutGroup があります。
例えば、Image と Text を横一列に表示させ、その後、Text や Image の横サイズの変更に応じて
各オブジェクトの位置を自動調整する、というような使い方です。
これは LayoutGroup をアタッチしただけでは実装が行えません。
LayoutGroup の設定のほか、制御下となる各子オブジェクトにも設定が必要となります。
ここでは参考用に UI を作成し、かつ、それを動的に変化させるサンプルのスクリプトを用意して動作検証を行います。
特に重要な点が子オブジェクトを複数持つ UI オブジェクトが LayoutGroup 内に含まれている場合の挙動です。
ScrollView には子オブジェクトがあり、それらの各サイズの調整も必要になります。
UI 制作 参考例
ここではサンプルを提示します。
LayoutGroup を利用して、ScrollView をオブジェクトに含めてもられば、サイズや構成については、自由に作成してもらって構いません。
サンプルでは VerticalLayoutGroup で実装していますが、HorizontalLayoutGroup でも問題ありません。
全体構成
Canvas(UpgradePopup)
UpgradePopup は Canvas ですが、これは入れ子になっている Canvas です。
そのため、さらに上に親オブジェクトとして Canvas が存在している構成です。
CanvasGroup コンポーネントをアタッチし、子オブジェクトをまとめて管理できるようにしています。
LayoutGroup 用オブジェクト
ScrollView 内の Content に VerticalLayoutGroup をアタッチして設定しています。
Spacing のサイズについては適宜調整してください。子オブジェクト同士の間が空きます。
また Use Child Size の Height にのみチェックを入れて、子オブジェクトの Height を操作できるようにしています。
またこのゲームオブジェクト自体の Width と Height の値が VerticalLayoutGroup が自動調整可能な範囲になります。
ScrollView により自動で伸縮しますが、ContentSizeFitter コンポーネントをアタッチし、設定することで伸縮幅を保持できるようにしています。
今回は ContentSizeFitter の縦方向の位置のみ可変できるように VerticalFit のみ Preferred Size として、サイズが伸縮するようにします。
このオブジェクトが UI の親オブジェクトとなりますので、このオブジェクトの Scale が子オブジェクトにも適用されます。
よって、Scale の値はいじらず、必ず、すべて 1 に設定してください。
設定のポイントは、Content の VerticalLayoutGroup のうち、UseChildSize の Height(Y軸方向)にのみチェックを入れて、子オブジェクトの長さを反映できるようにしています。
ContentSizeFitter をセットすることで、その長さに合わせて Content の長さが伸縮します。
その場合、子オブジェクトの最小の長さをセットしていないと、つぶれて見えなくなります。
Subheading と ElementPlace に LayoutElement を設定しているのは、最小値を設定することで、最小限のサイズで常に表示を確保するためです。
今回は Y 軸のみ確保したいため、 Min Height にチェックをいれて、画面に見えるようにするために必ず確保したい最小値を設定しています。
よって、Content 内の設定に加えて、このような構造にすることで、Subheading と ElementPlace がそれぞれの位置を確保するようになります。
LayoutElement 用オブジェクト
LayoutGroup 内に配置する空のゲームオブジェクトです。ほかの UI でも問題ありません。
今回、このオブジェクトのサイズは変更しない前提です。
子オブジェクトとして Image と Text を配置していますが、このサイズは変更がありません。
LayoutElement では、サイズの最小値を設定しています。
この設定をおこなっておくことにより、VerticalLayoutGroup の影響下にあっても、サイズを固定化できています。
今回の実装例では、これを４つ作成していますので、それぞれの名称を変更して利用しています。
GridLayoutGroup を持つゲームオブジェクト
このゲームオブジェクトの子オブジェクトとして、複数のプレハブを生成して利用します。
空のゲームオブジェクトを作成しています。
GridLayoutGroup コンポーネント、ContentSizeFittter コンポーネント、LayoutElement コンポーネントの３つをアタッチしています。
GridLayoutGroup では、このゲームオブジェクト下に作成する予定のプレハブのサイズを設定し、伸縮する方向に合わせて設定を行っています。
今回は水平方向に２つ並べ、その後は垂直下の行を作成して、また水平方向に２つ並べられるようにしています。
ContentSizeFittter では、Vertical 方向のみ設定を行い、サイズが伸縮した際に対応しています。
LayoutElement では Min Height に最小時のサイズを設定しておきます。これで子オブジェクトがないもない場合でも最小限のサイズを確保します。
今回の実装例では、これを４つ作成していますので、それぞれの名称を変更して利用しています。
GridLayoutGroup 内に並べるプレハブのオブジェクト
上記の GridLayoutGroup がアタッチされているゲームオブジェクトを親とし、
その子オブジェクトとして生成するプレハブを作成します。
ElementPlace 内で作成し、プレハブにしてください。
このプレハブが、それぞれの Upgrade の内容を示すオブジェクトになりますので、
実際には生成されたタイミングで、スクリプタブル・オブジェクトよりデータを受け取り、
設定を行うことでオブジェクトの振る舞いを変えます。
振る舞いを変える必要がありますので、スクリプト作成後、このプレハブにアタッチします。
手動で機能確認を行う
実際にプレハブを並べて、機能確認をおこないましょう。
Scene ビュー内にて、UpgradeElement プレハブを手動で配置します。
それを複製して複数個並べていきます。
この際、LayoutGroup の機能により、横方向に並んでいる UpgradeElement プレハブが２こ並んだ時点で縦方向に延長され、位置が変更されれば成功です。
この時点で正常に動作していない場合には、次のスクリプトを利用して動的に変更した場合にも正常に動作しません。
しっかりとチェックし、問題点がないか、見直してください。
以上で完了です。
次はスクリプトを作成し、制御を行います。
LayoutGroup 内の各オブジェクトの位置を動的に自動調整する�� です。
コメントをかく