執筆: T.H.
執筆バージョン: Unity 2019 3.3f1
はじめに
UnityでUIを作る際、BootstrapのGrid systemのようなフレキシブルな作りにしたいと思い、Layout Groupを使用しました。その際に困ったことがありましたのでご紹介いたします。
Layout Group をどのように使ったか
今回はHorizontal Layout Groupを使用しました。
横全体に対して、比率のみでサイズを決めるために、親となるPanelに Horizontal Layout Groupを追加します。
Control Child SizeをWidth、Height両方チェックし、レイアウトグループが子要素のサイズを制御するようにします。
次に今回子要素とする Button_01にLayout Elementを追加します。
Flexible Widthにチェックを入れ、値は1とします。
親Panel横サイズいっぱいにボタンが表示されます。
更に、子要素としてButton_02を追加し、Button_01と同様にLayout Element を追加します。
両方ともFlexible Widthを1にすると、親Panel横サイズに対し、Button_01、Button_02が半分ずつになります。
(Flexible Width 合計 : 2、Button_01 : 1、Button_02 : 1)
Button_02のみFlexible Widthを2にすると、親Panel横サイズに対し、Button_01、Button_02が1対2の比率になります。
(Flexible Width 合計 : 3、Button_01 : 1、Button_02 : 2)
この形を利用して、UIを作成しました。
困った事
Layout Groupを使う上で二点困ったことがありました。
一点目は、下記組み合わせのボタンサイズが合わないことです。
①Flexible Widthが1のボタンとFlexible Widthが2のボタン。合計二つ
(Flexible Width 合計 : 3、Button_01 : 1、Button_02 : 2)
②Flexible Widthが1のボタンを三つ。合計三つ
(Flexible Width 合計 : 3、Button_01 : 1、Button_02 : 1、Button_03 : 1)
この場合 Button_01 のサイズは全く同じになると思っていたのですが…
親Panelのサイズが『1800』の場合、①のButton_01 (画像上側)は『603.333…』、②のButton_01(画像下側)は『600』と少しのズレが発生しました。
二点目は、子要素にPanelを追加し、その中でLayout Groupを使用すると、サイズが変わってしまうことです。
Button_01と子Panel (背景グレーの領域) を追加した段階ではサイズが 1 対 1 になります。
(Flexible Width 合計 : 2、Button_01 : 1、Button_02 : 1)
子PanelにHorizontal Layout Groupを追加し、更にその子要素として、3 つボタンを追加したものと並べて表示すると…
(どちらも Flexible Width 合計 : 2、Button_01 : 1、Button_02 : 1)
親Panelから見るとどちらも同じ設定なのにも関わらず、サイズが異なります。
原因と対策
原因
ズレの原因はボタン間のスペースでHorizontal Layout GroupのSpacingを調整することによって、同じサイズにすることは可能です。しかし、多くの場合は統一された見た目ではなくなってしまいます。
対策
困った事への対策は下記二点です。
①Flexible Width は 1 か 0 でのみ使用する。
②Layout Element を使用したオブジェクトで Layout Group を使うことは避ける。
また、今回の問題が表面化するパターンは少しのズレが目立つレイアウトのみです。そのため、少しのズレも許容出来ない箇所には Layout Group の使用を見送る等、事前に検討することが一番の対策になると思います。
まとめ
Layout Group は比率による自動サイズ設定が出来るため、解像度の変更やレイアウトの変更に強く、非常に便利です。ご説明させて頂いた問題もあり、万能というわけではありませんが、使いどころを選んで活用してみて下さい。