テキストの内容が変わっても、画像とテキストを合わせてセンタリング(中央揃え)させる方法【Unity】【uGUI】

はじめに

今回は画像(Image)とテキストを並べて設置した際に、

テキストの内容が変わっても、画像とテキストを合わせてセンタリング(中央揃え)させる方法の紹介です！

なお、uUGUIでの話で、テキストはTextMeshProでもTextでも可能です。

画像とテキストを合わせてセンタリングさせる方法

まず、画像とテキストを親オブジェクトの下にまとめて配置します。

(↓だとMoneyIconがImage、TextがTextMeshPro)

次に親にHorizontal Layout GroupとContent Size Filterを付けて以下のように設定します。

なお、Horizontal Layout Groupが子を横並びに配列するもので、

Content Size Filterは親のサイズを子のサイズが変化したら(テキストが変わったら)変えるものです。

さらにテキストにもContent Size Filterを付けて以下のように設定し、

テキストの内容が変わったら自身のサイズが変わるようにします。

ただし、フォントサイズを自動で調整するText Mesh ProのAuto sizeは使えません。

(テキストのサイズが変わらなくなってしまうので)

これでテキストの内容が変わるとテキストのサイズが変わり、

それに合わせて親のサイズも変わるので、常に綺麗にセンタリング出来るようになります。

なお、テキストを変更した際に自動で更新されない時は手動で更新する必要あります。

/*_contentSizeFitterがContentSizeFitter*/

//縦と横のサイズ計算
_contentSizeFitter.SetLayoutHorizontal();
_contentSizeFitter.SetLayoutVertical();

//レイアウトを即時更新
LayoutRebuilder.ForceRebuildLayoutImmediate(_contentSizeFitter.GetComponent<RectTransform>());