Unity で Text を子として含む Horizontal Layout Group が上手く配置されない

目次

 

問題点

Unity の Horizontal Layout Group で下画像のようにテキストを1:1の大きさで配置したい:

f:id:kyoto-u-kohei:20170621021132p:plain

 

しかし Text の中身を長くするとそれに伴って width が大きくなってしまうという現象が発生してしまった。

f:id:kyoto-u-kohei:20170621022836p:plain

Text の中身に関わらず2つのTextのWidth は 1:1 になっていてほしい。

 

原因

原因は Text コンポーネントILayoutElement を継承していることが問題らしい。Text を持つゲームオブジェクトを選択し、Inspector 下部の Layout Properties を見ると、確かに Prefered Width が Text に従うようになっている。

f:id:kyoto-u-kohei:20170621023337p:plain

このせいで、Text の中身を変えるとそれに伴って width も変わってしまっていたようだ。

 

解決策

これを解決するには Layout Element コンポーネントを追加し、プロパティを上書きすればいい。今回は下のように設定した。

f:id:kyoto-u-kohei:20170621023648p:plain

補足すると 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 に変わっている。

f:id:kyoto-u-kohei:20170621023842p:plain

これで期待通り Text の内容を変更しても width が 1:1 になるようになった。

f:id:kyoto-u-kohei:20170621023933p:plain

 

終わりに

Unity の Layout Group は便利だけど、仕組みが少し複雑である。一度使い方をしっかり調べてみるのもよさそう。今回は下記事を参考にさせてもらった。

tsubakit1.hateblo.jp