コードレスuGUIテクニック② 〜複数のテキスト間の位置調整〜

概要

ちょっとタイトルだと伝わりにくいので下のGIF動画をご覧ください。
f:id:Goropocha:20200326001855g:plain
今回は動画のように、複数のテキスト間で内容の一番長い文字列に合わせて後ろのテキストを動的に変動させることを、コードを書かずにuGUIだけで実現させます。

実装時間

3分-5分

実装

GIF動画のシーンの作り方について解説します。
まずはヒエラルキーの階層構造は下図のようになります:
f:id:Goropocha:20200326001858p:plain
Canvas直下のImageは背景の白いフレームです。
Namesは各アイテム名のテキストを上から順に追加したものとなります。
ValuesはNamesの各個数のテキストを上から順に追加したものです。

次に、Names と ValueVertical Layout Groupコンポーネントをアタッチして、垂直方向に並べます。
Layout Groupの設定は下図のように Child Control SizesWidth にチェックを入れておきます。
f:id:Goropocha:20200326001902p:plain
こうすることで、Names/Valueの子のテキスト幅が文字数に応じて動的に変動するようになります。
しかし、このままではNamesとValueの幅が変わらないので上記の動画のように良い感じに調整してくれません。
ではNamesとValueContent Size Flitter をつけたらどうか、とアタッチしてみますが、
これだとお互いが好き勝手に枠を変更させるだけで動画のように調整することはできません。

この問題を解決するために、Image に Horizontal Layout Groupコンポーネントをアタッチします。
インスペクターの設定ですが、こちらも先ほどと同じように Child Control SizesWidth にチェックを入れておきます。
こうすることで、NamesとValueの横幅を、ImageのRectTransformサイズ内にうまく収まるように勝手に調整してくれます。

階層構造をまとめると下図のようになります。
f:id:Goropocha:20200326001906p:plain

これで動画のように良い感じに調整されます。