通常、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 のピボット変換に特別な注意を払う必要があります。要素のサイズが変更されるとき、ピボットは場所にとどまっているので、ピボット位置を設定して要素が拡大または縮小するかを制御することができます。例えば、ピボット中心にある場合、要素はその後、すべての方向に均等に拡大し、ピボットが左上隅にある場合、要素は右下に展開されます。
それの上に Text 要素で背景画像と子ゲームオブジェクトを持つボタンのような UI 要素を持っている場合、おそらく、いくらかの padding で全 UI 要素がテキストのサイズに合うことが望ましいでしょう。
これを行うために、最初に UI 要素に水平レイアウトグループを追加した後、Content Size Fitter にも追加します。水平フィット、垂直フィット両方を優先設定します。さらに、padding プロパティーを使用して、水平レイアウトグループの padding を調整することができます。
なぜ水平レイアウトグループを使うのでしょうか？それは同様に垂直レイアウト Group でもありたいので単独の子だけがあるなら、これらは同じ結果になります。
水平（または垂直）レイアウトグループは、レイアウトコントローラーとしてかつレイアウト要素として、両方機能しています。最初に、それはグループ内の子らが提供するレイアウト情報を子のテキストとして聞きます。それから、グループはすべての子を含むために少なくともどれくらい大きくなければならないかについて決定し、最小限のサイズと推奨サイズに関するこの情報を提供するレイアウト要素として機能します。
Content Size Fitter は同じゲームオブジェクト上の任意のレイアウト要素（この場合は水平または垂直レイアウトグループ）から提供されるレイアウト情報を聞きます。その設定に応じて、この情報に基づき、Rect トランスフォームの大きさを制御します。
いったん 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 に設定されます。
ここではいくつかの一般的な使用例を紹介しました。自動レイアウトシステムに関する詳細は 自動レイアウト を参照してください。