通常、Rect Transform で UI 要素を配置する際、その位置とサイズは手動で指定します (これには必要に応じて、親の Rect Transform で伸縮する挙動も含まれます)。
ただし、時には UI 要素のコンテンツに合わせて自動的に矩形をリサイズしたい場合があります。これは Content Size Fitter と呼ばれるコンポーネントを追加して実行できます。
Text コンポーネントを持つ Rect Transform をテキストコンテンツのサイズに合わせるには、Text コンポーネントを持つゲームオブジェクトに ContentSizeFitter コンポーネントを追加します。その後、Horizontal Fit、 Vertical Fit のドロップダウンで両方とも Preferred Size に設定してください。
何が起きているかというと、Text コンポーネントが、テキストの大きさを決定する最小値と推奨サイズの情報を持つ Layout Element として機能します。手動でレイアウトを決める場合はこの情報は使用されません。ContentSizeFitter はレイアウトコントローラーの 1 種で、Layout Element によって提供されるレイアウト情報を受けとり、それに従って RectTransform のサイズを制御します。
UI 要素がコンテンツに合わせて自動的にサイズ変更する場合、Rect Transform の Pivot に特に注意を払うべきです。要素のサイズを変更するときに、ピボットは同じ場所にとどまります。そのため、ピボットの位置を設定することによって、どの方向に要素を拡大縮小するかを制御できます。例えば、ピボットを中心に置くと、要素はすべての方向に均等に拡大します。もし、ピボットを左上に置くと、要素は右と下に拡大します。
背景画像と、その上に Text コンポーネント付きの子ゲームオブジェクトがあるボタンなどの UI 要素がある場合、おそらく、いくらかのパディングも含めて、UI 要素全体がテキストのサイズに合うようにしたいでしょう。
そうするためには、まず、 Horizontal Layout Group コンポーネントを UI 要素に加え、それから、Content Size Fitter も加えます。Horizontal Fit、Vertical Fit、または、両方を Preferred Size に設定します。Horizontal Layout Group の Padding プロパティで、パディングを加えたり調整したりできます。
なぜ Horizontal Layout Group を使うのでしょうか。Vertical Layout Group を使っても同様です。子が 1 つだけであるかぎり、これらは同じ結果になります。
Horizontal (または Vertical) Layout Group は両方ともレイアウトコントローラーとして機能します。まず、グループの子 (ここでは、子 Text) から提供されたレイアウト情報を受け取ります。それから、すべての子を含むために必要なグループの大きさを決定します (最低サイズと推奨サイズ)。それから、 Layout Group は最低サイズと推奨サイズについての情報を提供する Layout Element として機能します。
Content Size Fitter は同じゲームオブジェクト上の任意のレイアウト要素 (Horizontal、または Vertical Layout Group) から提供されるレイアウト情報を取得します。その設定に応じて、この情報に基づき、Rect Transform のサイズを制御します。
いったん Rect Transform のサイズが設定されると、Horizontal (または Vertical) Layout Group はその子らの使用可能なスペースに応じて位置とサイズを確認します。その子ら位置とサイズを制御する方法の詳細については、Horizontal Layout Group についてのページを参照してください。
Horizontal (または Vertical) Layout Group があり、グループの UI 要素をそれぞれのコンテンツに合わせたい場合、どうしたらよいでしょうか。
Content Size Fitter はそれぞれの子に設定することができません。なぜなら Content Size Fitter はそれ自身の Rect Transform の制御をしようとしますが、親の Layout Group も子の Rect Transform を制御しようとするからです。これによりコンフリクトが発生し、結果として混乱した動作になります。
しかし、そのような混乱は無用です。親の Layout Group はそれぞれの子をコンテンツのサイズに合わせることができます。必要なのは、 Layout Group の Child Force Expand を無効にするだけです。子自体が Layout Group である場合も、 Child Force Expandt を無効にするだけです。
子が自由にに幅を拡大しないようになれば、Layout Group の Child Alignment を使用してアライメントを特定することができます。
もし、子のうちのいくつかを拡大し追加の利用可能なスペースを埋めたいけれど、他の子は拡大したくない場合はどうしたらよいでしょうか？拡大したい子に Layout Element コンポーネントを追加し、Layout Element の Flexible Width か Flexible Height プロパティを有効にすることで、簡単に制御することができます。親の Layout Group は依然として Child Force Expand を無効にしておきます。そうでないと、すべての子が自由に拡大してしまいます。
ゲームオブジェクトは、それぞれが最小、推奨、柔軟なサイズのレイアウト情報を提供する複数コンポーネントを持つことができます。優先順位の高いシステムが、どの値が他のものより有効かを決定します。Layout Element コンポーネントは Text、Image、Layout Group コンポーネントよりも優先度が高いので、それらが提供するレイアウト情報の値を上書きすることができます。
Layout Group が子が提供するレイアウト情報を受け取ると、上書きされた Flexible サイズを考慮します。その後、子のサイズを制御する時には、それらの Preferred サイズより大きくしません。ただし、Layout Group の Child Force Expand オプションを有効にすると、子の Flexible サイズは常に、最低でも 1 に設定されます。
ここではいくつかの一般的な使用例を紹介しました。自動レイアウトシステムに関する詳細は 自動レイアウト を参照してください。