通常、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 に設定されます。
ここではいくつかの一般的な使用例を紹介しました。自動レイアウトシステムに関する詳細は 自動レイアウト を参照してください。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.