Unity で Text を子として含む Horizontal Layout Group が上手く配置されない
目次
問題点
Unity の Horizontal Layout Group で下画像のようにテキストを1:1の大きさで配置したい:
しかし Text の中身を長くするとそれに伴って width が大きくなってしまうという現象が発生してしまった。
Text の中身に関わらず2つのTextのWidth は 1:1 になっていてほしい。
原因
原因は Text コンポーネントが ILayoutElement を継承していることが問題らしい。Text を持つゲームオブジェクトを選択し、Inspector 下部の Layout Properties を見ると、確かに Prefered Width が Text に従うようになっている。
このせいで、Text の中身を変えるとそれに伴って width も変わってしまっていたようだ。
解決策
これを解決するには Layout Element コンポーネントを追加し、プロパティを上書きすればいい。今回は下のように設定した。
補足すると Flexible Width は Width の割合を指定するもので、1:1 にしたかったので 1にした。Layout Group 下の要素の大きさは Min Width, Prefered Width, Flexible Width のうち最大になる値をとる。よって Min Width, Prefered Width を 0 にすることにより、常に Flexible Width の値になるようにした。
Layout Properties をもう一度みると確かに Min Width, Prefered Width, Flexible Width が Layout Element に変わっている。
これで期待通り Text の内容を変更しても width が 1:1 になるようになった。
終わりに
Unity の Layout Group は便利だけど、仕組みが少し複雑である。一度使い方をしっかり調べてみるのもよさそう。今回は下記事を参考にさせてもらった。