Blog

[Unity]Layout Groupで困ったこと

執筆: 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 は比率による自動サイズ設定が出来るため、解像度の変更やレイアウトの変更に強く、非常に便利です。ご説明させて頂いた問題もあり、万能というわけではありませんが、使いどころを選んで活用してみて下さい。

関連リンク