Content Size FitterでUIオブジェクトのサイズを自動調整する

はじめに

この記事ではテキスト量に応じて下地が伸びるUIの作り方を解説しています。

特徴は下記です。

・文字が増えると高さが伸びる
・下敷きがテキストに応じて伸びる

要するに

これが

こうなる感じ

これはキャラクターの名前、変動する文字数に応じて下地が伸びて欲しい

要素の有無で下敷きの長さを変えたい

など、UIを作成するうえであるあるな問題を解決できると思います。

使用するコンポーネント

今回は下記４点のコンポーネントだけで作ります。

・Content Size Fitter

・Horizontal Layout Group

・Text

・Image

完成までの全体構造

MessageRoot

└ Bubble（Image）

    └ Text

① Bubble（背景）を作る

Textの親にUI → Imageを作ります。
これが吹き出しの「下敷き」です。

② BubbleのPivotを設定

xを０に設定

③ BubbleにHorizontal Layout Groupを追加

◆設定

・Child Alignment   Middle Left

・Control Child Size  OFF

・Child Force Expand  OFF

・Padding       Left 20 / Right 20 / Top 15 / Bottom 15

これで「テキストの周囲に余白ができ」「左寄せになる」

④ BubbleにContent Size Fitterを追加

◆設定

・Horizontal Fit →  Preferred Size

・Vertical Fit   →  Preferred Size

これで

Textのサイズに合わせてBubbleが伸びるようになります。

◆まとめ

Content Size Fitterは実際に使ってみるまでは難しそうに感じますが

いざ使ってみると簡単ですしUIを綺麗に整理出来て楽しいコンポーネントです。

たくさん活用して使いこなしていきましょう。