コードレスuGUIテクニック② 〜複数のテキスト間の位置調整〜
概要
ちょっとタイトルだと伝わりにくいので下のGIF動画をご覧ください。
今回は動画のように、複数のテキスト間で内容の一番長い文字列に合わせて後ろのテキストを動的に変動させることを、コードを書かずにuGUIだけで実現させます。
実装時間
3分-5分
実装
GIF動画のシーンの作り方について解説します。
まずはヒエラルキーの階層構造は下図のようになります:
Canvas直下のImageは背景の白いフレームです。
Namesは各アイテム名のテキストを上から順に追加したものとなります。
ValuesはNamesの各個数のテキストを上から順に追加したものです。
次に、Names と Value にVertical Layout Groupコンポーネントをアタッチして、垂直方向に並べます。
Layout Groupの設定は下図のように Child Control Sizes
の Width
にチェックを入れておきます。
こうすることで、Names/Valueの子のテキスト幅が文字数に応じて動的に変動するようになります。
しかし、このままではNamesとValueの幅が変わらないので上記の動画のように良い感じに調整してくれません。
ではNamesとValueに Content Size Flitter をつけたらどうか、とアタッチしてみますが、
これだとお互いが好き勝手に枠を変更させるだけで動画のように調整することはできません。
この問題を解決するために、Image に Horizontal Layout Groupコンポーネントをアタッチします。
インスペクターの設定ですが、こちらも先ほどと同じように Child Control Sizes
の Width
にチェックを入れておきます。
こうすることで、NamesとValueの横幅を、ImageのRectTransformサイズ内にうまく収まるように勝手に調整してくれます。
階層構造をまとめると下図のようになります。
これで動画のように良い感じに調整されます。