【Unity】自動レイアウトを理解したい

対象 HorizontalLayoutGroupなどの、自動レイアウトで苦戦している人

書いている人 Unity勉強して半年目

前提  Unityの初心者向けの参考書などを一冊やったことがある

環境 M1 Mac Unity2019.4.17f1

参考 https://note.com/fuqunaga/n/ndef5b45863d4
https://tsubakit1.hateblo.jp/entry/2017/05/14/163456

Unityで、ある要素を綺麗に並べるために、HorizontalLayoutGroupやVerticalLayoutGroupを使うも、うまくいかないことが多いので自分なりにまとめたい。なお、参考に貼った2つの記事が、かなりまとめてくれているので合わせてチェックしてみて欲しい。

目次

自動レイアウトとは

そもそも自動レイアウトとは、一体何なのか。まずはそれを見ていく。

公式リファレンスを見る。
https://docs.unity3d.com/ja/2019.4/Manual/UIAutoLayout.html

公式リファレンスより

公式を見ると、自動レイアウトシステムとは、後述するHorizontalLayoutGroupなどのLayoutGroupを使って、子要素をきれいに配置することや、テキストなどの中身の大きさに合わせて親のサイズも変更したりするようなことを意味する。

レイアウトを勝手に〜してくれる便利なシステムとおおまかに理解しておく。

ちなみに自動レイアウトを使う場合、UI要素が持つRectTransformはほぼいじらないと言ってよい。なぜなら自動で調整するというのが、この自動レイアウトの目的みたいなところだからだ。

というか、下のようにRectTransformはいじれなくなるというのが正しいところだ。「こっちが自動で調整してやってるのに、勝手に値を変更するな!」ってことだろうか。

英文では、「いくつかの値はHorizontalLayoutGroupによって調節されてますよ」って意味。PosXとPosYは触れない。

自動レイアウトを使う場合、RectTransformの知識はほぼいらないが、もしRectTransformについて知りたい方はこちらも参照してほしい。記事長めなので空いてる時間にでも。

また、この文中でたくさん、レイアウト〇〇といった単語が出てくると思う。初めて、自動レイアウトについて学ぶ人は途中でわけわからなくなると思うので、わからなくなったらここを見て大雑把な単語の意味を理解しておくと、全体の把握に近づくかも。

  • レイアウトコントローラー・・・自動レイアウトの概念の1つ。この中に、レイアウトグループがある感じ
  • レイアウトエレメント・・・自動レイアウトの概念の1つ。レイアウトコントローラーを扱う時に、この要素を参照する。
  • レイアウトグループ・・・レイアウトコントローラーの中に含まれるもの、HorizontalLayoutGroupやVerticalLayoutGroup、GridLayoutGroupのこと。
  • レイアウトプロパティ・・・レイアウトエレメントを持っていると、インスペクタの下から表示できるもの。表示できなくても、レイアウトエレメントコンポーネントをつけると、レイアウトプロパティを表示することができる。

LayoutControllersとLayoutElements

自動レイアウト自体の概念がわかったところで、次に理解しなければならないのがこの2つ。LayoutControllersLayoutElementsだ。

LayoutControllersにはHorizontalLayoutGroupなども含まれるのでまだ理解しやすいが、LayoutElementsが難しかった。

これが中々理解できなかったので、HorizontalLayoutGropとかを使っても中身の子要素がペシャンコになったりして、いまいち使いこなせなかった。

逆に言えば、LayoutElementsを理解することができれば、自動レイアウトを使いこなせるようになるはず。

ちなみにここからは、LayoutControllersはレイアウトコントローラー、LayoutElementsはレイアウトエレメント(レイアウト要素としている記事もある。)で文中では表記を統一したい。

リファレンスではレイアウト要素と訳されているが、文中ではレイアウトエレメントとする。

レイアウトエレメント

レイアウトエレメントを一言で表すと、ILayoutElementインターフェースを実装しているコンポーネントが持つ要素のことだ。
インターフェースのことはここでは割愛する。

さて、いきなり何のことだかわからないと思うが、まずは適当なプロジェクトを作成して、UIからTextを作ってみて欲しい。

Textオブジェクトを作成


そして、Textのインスペクタ一番下にあるDefaultUIMaterialをクリックして、LayoutPropertiesに変更しよう。

インスペクタの一番下のDefaultUIMaterialをクリックすると、、
LayoutPropertiesが選択できるので選択。
選択するとこんな画面に切り替わる。

こんな感じでインスペクタ上で、LayoutPropertiesが表示できたらこのコンポーネントはレイアウトエレメントを持っているということになる。

逆に言えば、LayoutPropertiesが表示できないなら、そのコンポーネントはレイアウトエレメントを持っていないと言ってよい。(正確に言えば、RectTransformを持つコンポーネントは全部もっているらしいが、上のように覚えた方が楽。)

試しに、UIからToggleを作成してインスペクタを見てみよう。LayoutPropertiesは表示されていないはずだ。

Toggleを作成
LayoutPropertiesはない。


UIの中では、TextImageがLayoutPropertiesを持っており、他は持っていない。(たぶん)

リファレンスより。

TextとImageのどちらも、最初に説明したILayoutElementインターフェースを実装している。

公式リファレンスより。ILayoutElementインターフェースを実装していることがわかる。
こちらもILayoutElementインターフェースを実装している

また、LayoutElementコンポーネントというものもあり、これをくっつけることで、そのコンポーネントがレイアウトエレメントを持っていなくても、無理矢理持たせることができる。

上で作ったToggleオブジェクトのインスペクタに、LayoutElementコンポーネントを追加してみよう。

ToggleのインスペクタからAddComponentをクリック
LayoutElementコンポーネントをくっつける。

LayoutElementコンポーネントをくっつけることで、一番下からLayoutPropertiesを選択できるようになるはずだ。

LayoutElementコンポーネントをつけることで、LayoutPropertiesを選択できるようになる。
これでToggleにレイアウトエレメントを持たせることができた。

もちろんこのLayoutElementコンポーネントにもILayoutElementインターフェースがついている。というか、こいつがついているからLayoutPropertiesが表示される。レイアウトエレメントを持つためには、ILayoutElementインターフェースがついているコンポーネントをくっつければよいということだ。

LayoutElementも、ILayoutElementインターフェースを実装していることがわかる。

ここまで、レイアウトエレメントについてざっと説明してきた。ただ、このレイアウトエレメントがついていることで、基本的に何かが変わるということはない。

ではなぜ、レイアウトエレメントについて説明してきたかと言うと、レイアウトコントローラーを使う時にレイアウトエレメントを参照する必要があるからだ。
レイアウトコントローラーを使わないのであれば、普段からレイアウトエレメントを意識する必要はまったくない。ただ、HorizontalLayoutGropやContentSizeFitterなどの、レイアウトコントローラーを使う時にこのレイアウトエレメントが重要になってくるのだ。

一旦ここまでまとめてみる。

  • レイアウトエレメントはILayoutElementインターフェースを実装しているコンポーネントのこと。
  • LayoutElementコンポーネントをくっつけることで、レイアウトエレメントを持っていなくても無理矢理持たせられる。
  • レイアウトエレメントを持ってるからといって、特段何か意識する必要はない。レイアウトコントローラーを使う時に再度意識しよう。

レイアウトエレメントが持つ各プロパティは一旦置いといて、レイアウトコントローラーを見る。

レイアウトコントローラー

レイアウトコントローラーは、子の要素の配置を決めるHorizontalLayoutGroupなどのレイアウトグループと、ContentSizeFitterなどの自身のサイズを変更するものに大きく分けられる。

もっと、細かく言うとILayoutGroupインターフェースを実装しているコンポーネントをもつレイアウトグループと ILayoutSelfControllerインターフェースを実装しているものに分けられる。

文章で説明するとわけわからなくなりそうだが、これはこちらの参考記事の中段あたりに図でまとまっているのでぜひ、見てみてほしい。
https://note.com/fuqunaga/n/ndef5b45863d4#hpQYV

つまりは、レイアウトコントローラーは大きく分けて、自身のサイズを変化するもの子要素の位置と大きさを変更するものの2つに分類されるということだ。ではそれぞれ見ていこう。

自身のサイズを変更するもの

まずレイアウトコントローラーの中で自身のサイズを変更するものからみていく。自身のサイズを変更するコンポーネントはILayoutSelfControllerインターフェースを実装しており、2つある。

「自身のサイズを変更するって普通にRectTransformをいじるだけじゃダメなの?」と思う方もいると思うが、自動レイアウトを使う場合は、最初に言った通りRectTransformを基本的にはいじらない。

ContentSizeFitter

まずは、ContentSizeFitter。おそらくこれは結構使用頻度が高いんじゃないだろうか?このコンポーネントをつけると、自身のレイアウトエレメントの値に応じてサイズを変更させることができる。

公式から。ILayoutSelfControllerインターフェースを実装している

テキストで試してみよう。まずは普通のテキストを作成する。そして、テキストのレイアウトプロパティを開いて、PreferredWidthとPreferredHeightを確認しよう。そこにはテキストの大きさに応じて値が設定されているはずだ。

UIからTextをクリックして作成する
PreferredWidthとPreferredHeightには値が設定されている。

そして、Textの文字数を変更してから、もう一度レイアウトプロパティを確認してみよう。

テキストを増やす
Preferredの値が変更されている。

このようにPreferredの各値は自動で変更される。テキストの場合は、テキストの文字数によって変わる。

そしたら、このTextにContentSizeFitterコンポーネントをくっつけてみよう。

AddComponentからContentSizeFitterを選択してクリック。

ContentSizeFitterのプロパティには、HorizontalFitとVerticalFitの2つの値がある。HorizontalFitのUnconstrainedをクリックしてみよう。

Unconstrainedは制約なしという意味だ。

Unconstrainedをクリックすると、選択肢が2つ現れる。PreferredSizeとMinSizeだ。この項目どこかで見なかっただろうか?そう、これがレイアウトプロパティに表示されていたものだ。

選択すると選択肢がでてくる。

ここで、MinSizeを選んでみよう。どうなるか想像がつくだろうか。そう、水平方向にペシャンコになる。なぜなら、レイアウトプロパティのMinSizeが0になっていたからだ。

ペシャンコに、、、
ここが0だからか、、

もう一度、HorizontalFitを選択して今度はPreferredSizeに変更してみよう。

HorizontalFitをMinからPreferredSizeへ
PreferredSizeは157なので、、
テキスト幅ぴったりになった。

ここまでRectTransformは全くいじっていない。ちなみに、RectTransformの値を見てみると、Widthが157になっている。そして、サイズ(Width)を手動で変更できなくなっている。

ContentSizeFitterによってサイズが変更されているので、自分でサイズ変更はできない。

つまり、レイアウトプロパティの値によってRectTransformの値が変更されているということだ。

この設定にしておくと、文字サイズを変更すると勝手にWidthが変更されていく。

文字サイズに合わせてWidthが変更される

これを、後に説明するレイアウトグループと組み合わせれば、子のテキストのサイズに合わせて親の大きさを変更させることができる。

AspectRatioFitter

次はAspectRatioFitter。これは比率を設定したら、その比率に応じて勝手に大きさを変更してくれるものだ。何回も繰り返すが、RectTransformはいじらないので覚えておこう。

こちらもILayoutSelfControllerインターフェースを実装している

では、こちらもTextにAspectRatioFitterをくっつけていく。

AddComponentからAspectRatioFitterを探す

AspectRatioFitterは2つのプロパティを持っている。AspectModeとAspectRatioだ。初期はAspectModeをNoneになっており、Noneだと特に何も変わらない。Modeを変更すると、AspectRatioで設定した比率に応じてサイズが変更されているというわけだ。AspectRatioは自分で好きに設定できるぞ。

初期ではNoneになっている。

AspectModeを変更してみる。modeはいくつかあるが、そんなに難しくない。最初は「Width Controls Height」から。

Width Controls Height

これは、Widthの大きさに応じて高さを変更するもの、もちろん比率はAspectRatioに合わせて。

WidthControlsHeightをクリック

変更したらオブジェクトを動かしてみる。すると、Widthは動くが高さはマウスで自由に変更することができない。

横方向に広げることはできるが、上方向に広げることはできない。

インスペクターを確認してみるとHeightの値を変更できないようになっている。Widthを広げると、AspectRatioの比率に応じて勝手に高さを変更するものだからだ。

Heightは操作できない。
Height Controls Width

次に、AspectModeをHeightControlsWidthに変更する。

上から2番目を選択

今度はさっきと逆でHeightに合わせてWidthを変更するもの。つまり、Widthの値をRectTransformから変更することはできない。

上方向には広がるが、横には広がらない。
今度はWidthが操作できなくなっている。
Fit In Parent

次はFitInParent。これは簡単で親のサイズまで、AspectRatioの比率を維持しながら広がるものだ。

FitInParentを選択。
親がCanvasなので、、
親のCanvasのサイズまで比率を維持しながら広がる
Envelope Parent

最後はEnvelopParent。これも簡単で親のサイズを超える、というか親を囲むように大きくなる。

一番下のEnvelopeParentを選択
親のCanvasサイズを囲むように広がる

これでILayoutSelfControllerインターフェースを引き継いだもの終わりだ。次は、メインテーマであるレイアウトグループだ。

レイアウトグループ

レイアウトグループの使い方は本当に難しいが、理解できれば逆に便利なものになるので、ざっくり概念を理解して練習して使ってみよう。

レイアウトグループは主に以下の3つだ。

  • HorizontalLayoutGroup・・・子の要素を水平に並べるもの
  • VerticalLayoutGroup・・・子の要素を垂直に並べるもの
  • GridLayoutGroup・・・子の要素をグリッド上に並べるもの。格子状って言った方がわかりやすいかな?

ここで注意してほしいの点が2つ。

1点目は、レイアウトグループは子の大きさも変更するという点だ。これは上でもいったが、レイアウトグループを使う時に子のレイアウトエレメントを参照する。

2点目は、レイアウトグループ自身もレイアウトエレメントを持つということだ。つまり、これらのコンポーネントをくっつけたものは、他のレイアウトグループや、ContentSizeFitterなどによってサイズを変更することができるのだ。これは後でみていくので頭の片隅にでも入れておいてほしい。

まずはそれぞれの要素についてみていこう。

HorizontalLayoutGroup

HorizontalLayoutGroupは、このコンポーネントをつけたオブジェクトの子要素を水平に並べる機能+子の大きさも変更するものだ。

まずは適当にImageオブジェクトを3つほど作成して、色を変更しておく。

適当にImgaeを用意。

次にHorizontalLayoutGroupをアタッチするPanelを用意して適当なサイズにしておく。

Panelを用意して、適当なサイズに変更する。

PanelにHorizontalLayoutGroupコンポーネントをつける。

PanelにHorizontalLayoutGroupをつける。

Panelの子として、Imageを入れる。

Panelの下にImageをいれる。

すると、3つのImageオブジェクトが水平方向に均等に並ぶはずだ。

均等に並び始めた。

子のImageのRectTransformを確認してみると、「HorizontalLayoutGroupによっていくつかの値は制御されますよ。」と書かれている。

Posは、変更できないが、WidthやHeightは変更できそうだ。

ではここから詳しく、HorizontalLayoutGroupを見ていきたいので、初期でチェックがついていたChildForceExpandを外しておく。

初期値でChildForceExpandにチェックがついている。
チェクを外す

チェックを外すと子要素がぎゅっと団子状に密集する。

隙間がなくなった。

1つずつプロパティを見ていこう。これを理解すればVerticalLayoutGroupも理解できる。

LayoutGroupを操作していると、子の要素が急に消えたりする(実際にはサイズが0になってるから見えなくなっているだけだったりする。)色々いじっていくうちに、Command + Z で要素を元のサイズに戻そうとしてもなぜか言うことを聞かなかったりする。使う際はある程度LayoutGroupに慣れてから使うことをお勧めする。自分がこれ使って何度キレたかわからない。

PaddingとSpacingとChildAlignmentは簡単なのでざっと見てみる。

まずはこの3つを理解しよう。

Paddingの左の▶︎ボタンを押すと、4つほど項目が記入できる。ここで、子の要素の位置のPaddingを調節できる。Paddingは親からどれくらいの距離を空けるかみたいなイメージで理解すればいいと思う。


ちなみに基準はChildAlignmentに表示されている場所。デフォルトでは、左上になっている。

ここに数字を記入する。
左上を基準に左方向と上方向から100の距離を取る。
こんな感じで子要素が移動する。

Spacingは子要素の隙間をどれくらい空けるかという意味だ。

Spacingに100を書くと、、
子要素の間隔が数字分広がる。

ChildAlignmentは、子がどこを基準にして並びはじめるかや、Paddingの時の基準となる。

右の三角をクリックすると、、
たくさん項目がでてくる。試しに一番下のLower Rightを選択
LowerRightを選択すると、、
右下基準に移動する

次にこの3つの要素を説明していく。ここをいじることで、子の大きさが変更される。そしてこの時何を基準に大きさが変更されるかというと、再三言っているように子のレイアウトエレメントを基に大きさが変更される

子要素のなかに、Textオブジェクトも追加しておく。

Textも適当なサイズで用意しておく。

ControlChildSizeは子のレイアウトエレメントをみて、子の大きさを決める。試しにチェックをつけてみる。

チェックをどちらにもつける

すると、Imageオブジェクトが消えてしまった。

ImageObjectはどこにいった?

これは、Imageオブジェクトのレイアウトプロパティの各値が0に設定されているからだ。

Imageのレイアウトプロパティを見てみると、各値が0になっている。なので、サイズが0になる=Imageがつぶれたようになるというわけだ。

レイアウトプロパティの値は0に

一方で、Textオブジェクトのレイアウトプロパティを見てみると、PrefferdWidthやHeightに値が設定されている。なので、ControlChildSizeのチェックをつけたときに、その値になったというわけだ。

値がもともと設定されているので、消えなかった。

ImageオブジェクトにLayoutElementコンポーネントをつけてあげて、サイズを変更してみる。

ImageにLayoutElementコンポーネントをつける。

レイアウトエレメントのMinWidthとMinHeightをそれぞれ100にする。

チェックをつけて100にする。

そのままレイアウトプロパティを確認すると、MinWidthとMinHeightの値がそれぞれ100になっており、SourceのところにLayoutElementと書いてある。つまりこれは、LayoutElementコンポーネントによって、Imageがもつレイアウトエレメントを上書きしたということだ。

SourceがLayoutElementになっている。

オブジェクトを確認してみると、Imageのサイズが100×100に戻っている。

他の2つの、ImageはLayoutElementコンポーネントをつけてないので、まだ見えないまま

では、2つ目のイメージにもLayoutElementコンポーネントをつけてあげる。ついでに今度は、Prefferdの値もそれぞれ設定してあげる。

Minより、PreferredHeightを大きく設定。

Imageオブジェクトを確認してみると、そこではPrefferdの値が優先されている。ここでMinとPrefferedの違いを説明しておくと、Minは最低限描画が保証される値Prefferdは親に余裕があればその値を描画するものだ。

親に余裕があるので、Prefferdの値分表示される。

Minは親がどんなに小さくなっても、そのサイズだけは保証される値だ。

子より親が小さくなっても、子のサイズは変わらない。

PreferredHeightを500にしてみる。一方親の高さは360だ。この場合はどうなるだろうか。

PreferredWidthを500に
親の高さは360ちょい。
親の大きさの最大限まで赤色のImageも伸びる。
もちろん、親の高さが子のPrefferdの高さを超えた場合は、子はPrefferdの大きさに留まる

2つめのImageのサイズを200に戻したら、3つめののImageにもLayoutElementコンポーネントをつけて、こちらはFlexibleも設定してあげよう。

3つめのImageに、LayoutElementコンポーネントをつけ、Flexibleにチェックをつける

FlexibleはMinやPreferredと違って割合で計算して描画するらしい。ここらへんよくわかってない。

Flexibleを設定したImageの画像は、描画できるならPreferredの値を超えて表示される。余裕があれば目一杯広がると覚えておけばよいだろう。

描画できるギリギリまで広がる

ここで一番最初にHorizontalLayoutGroupをつけた時を思い出して欲しい。初期では、ChildForceExpandだけONになっている。

なので、子のサイズも親の範囲の中で最大限広がると思うかもしれないが、あくまでこれはControlChildSizeがONになっている時だけだ。これがOFFの時は、レイアウトプロパティを参照しないので、子のサイズは変更されない。

この場合、子のサイズは変更されずに、均等に広がるように配置される。

初期ではChildForceExpandだけON
ControlChildSizeがOFFで、ChildForceExpandだけON。この場合、子のサイズは変わらず均等に広がる
ControlChildSizeがONで、ChildForceExpandがON。子のサイズは親の範囲の中で広がる

この違いはちょっと覚えにくいが、理解しておくとどこかで応用が効きそうだ。また、大体の記事ではChildForceExpandはOFFに設定しているので慣れない内はOFFにしておくのもありだと思う。

UseChildScaleは、そんなに難しくない。これは子がScaleをいじっている場合に関係がでてくる。再度各Imageはサイズ100に戻しておく。

そしてImageの一つのScaleを変更する。

白色のImageのScaleを1から2へ変更。
Scaleを倍にした。ただし、位置が変な場所に。

Scaleを変化すると、その要素の位置がずれてしまう。そこで、UseChildeScaleをONにすると、Scaleの値を考慮して要素を並べてくれる。

Use Child ScaleをONにすると、、
綺麗に並んだ!Scaleを考慮して並べてくれる。

そもそも、uGUIでScaleの値を変化させることが自分はあまりないから、まだ使い道はわかってない。Scaleをいじる人はONにしておけば問題ないだろう。

ここまでHorizontalLayoutGroupの各要素について、ざっと見てみたがどうだろうか?なんとなく理解してもらえたらうれしい。

初心者の内はとりあえず、ControlChildSizeをオンにさえしなければ、子のサイズが自動で変化することはないので、覚えておきたい。

一旦まとめる。

  • Padding、Spacing、ChildAlignmentは子の要素の位置関係や間隔などを変化させる。
  • ControlChildSizeをONにすると、子のレイアウトエレメントを基に子の大きさを変化させる。
  • UseChildScaleをONにすると、子のスケールを考慮して位置を変化させる
  • ChildForceExpandは、強制的に子の大きさを広げる。ただし、ControlChildSizeがOFFの場合には、均等に配置される。

VerticalLayoutGroup

VerticalLayoutGroupは、水平が垂直になっただけで、後のプロパティはHorizontalLayoutGroupと変わらないので省略する。Horizontalが理解できれば大丈夫だ。

HorizontalLayoutGroupとプロパティは一緒

GridLayoutGroup

GridLayoutGroupは子要素をグリッドに並べるものだ。格子状と言った方がわかりやすいだろうか。

一番の特徴は、レイアウトエレメントの値は考慮しないということだ。GridLayoutGroupのインスペクタ上だけで完結するので、だいぶわかりやすいはず。

レイアウトエレメントは関係なさそうだ。

さっそく親要素にGridLayoutGroupをつけてみよう。

GridLayoutGroupコンポーネントをつける

GridLayoutGroupをつけると、例によってその子要素のRectTransformは操作できなくなる。

GridLayoutGroupによって操作されている状態

HorizontalLayoutGroupでも表れたプロパティもあるので、割愛する部分も含めるが見ていこう。

まずはPadding。これはHorizontalLayoutGroupでも出てきたもので、子の要素の位置を調節する。

デフォルトでは基準が左上なので、RightやBottomに値を設定しても意味ない。
Left50のTop50の設定

次のCellSizeが重要で、これで子の大きさを指定する。

Cellは一つの箱みたいなイメージ(英語だと細胞の意味)で、その箱の大きさをいくつにしますかって感じだ。Excel使ったことあれば、あの白いマス一つがセルと呼ばれるもので、あの大きさを変更するといった意味合いになる。

CellSizeを200に
サイズは強制的に200になった。

SpacingはCellとCellの間隔を決められる。

X方向に30の隙間をあける。
隙間があいた。

次のプロパティの説明をわかりやすくするために、要素を増やして番号をつけておく。なお、Paddingなどはもとの状態に戻している。

8個イメージを作成

StartCornerはCellの最初の要素をどこから始めるかというもので、初期はUpperLeftの状態。

初期はUpperLeft

選択肢は4つある。以下の通りだ。

選択肢が4つある。

UpperRight

UpperRightは右上から1番がはじまってる

LowerLeft

LowerLeftは左下から上にかけて

LowerRight

LowerRightは右下から上にかけて

StartAxisは、子要素がどっち方向に進むかをきめるものだ。Horizontalは水平方向に、Verticalは垂直方向に進む。

デフォルトはHorizontal
親の範囲目一杯まで水平に広がり、入らなければ次の行に進む
Verticalは垂直
親の範囲目一杯まで垂直に広がり、入らなければ次の段に進む

ChildAlignmentは、HorizontalLayoutGroupでも登場したプロパティなので割愛する。

HorizontalLayoutGroupでも登場した。

最後にConstraintだが、これは正直よくわかっていない。どうやら、ContentSizeFitterなどと組み合わせる時にここをいじるそう。また理解したら追記したい。

デフォルトではFlexibleになっている
どうやら自動レイアウトシステムの補助的役割だそうだ。
制約を指定することで、どうやら働きをよくするらしい。

公式のGridLayoutGroupのマニュアルを載っけておくので詳しくはそちらを参照してください。

公式マニュアルhttps://docs.unity3d.com/jp/current/Manual/script-GridLayoutGroup.html

レイアウトグループもレイアウトエレメントを持つ

ここまで、レイアウトグループについて見てきたが、もう一つ大事なことを。

レイアウトグループはレイアウトエレメントも持っているということだ。

レイアウトグループはILayoutElementも引き継いでいるみたいだ。

上で操作していた、GridLayoutGroupコンポーネントをくっつけているオブジェクトのインスペクタをみると、確かにレイアウトプロパティが表示される。また、MinやPreferredのSourceの部分を見ると、GridLayoutGroupと書かれている。

レイアウトグループもレイアウトエレメントの要素を持つみたい。

つまり、レイアウトグループを持つコンポーネントを、さらにその親のレイアウトグループで操作できたり、ContentSizeFitterなどをつけて大きさを調節することができるということだ。

※上に書いたようにGridLayoutGroupにContentSizeFitterをつける時は、ContentSizeFitterのconstrainを操作した方がいろいろうまくいくらしいので、調べてみてください。

試しに、HorizontalLayoutGroupがついているコンポーネントにContentSizeFitterをくっつけてみて、値をPreferredに設定してみよう。

灰色のパネルにHorizontalLayoutGroupをつける。
レイアウトプロパティが確認できる。
ContentSizeFitterをつけて、値をPreferredにすると、、
ここを参照するので、、
灰色パネルのサイズがPreferredの値になって、ギュッと縮まった。
もちろん、PanelのRectTransformもPreferredの値だ。

こんな感じでレイアウトグループもレイアウトエレメントを持っているということを覚えておこう。

まとめ

これで自動レイアウトについては大体まとめられたと思う。

ここまで読んでくれた方おつかれさまでした。かなり量があると思うので、暇な時につまみながら読んでください。なるべく、わかりやすく書いたつもりですが、誤字ってる部分や間違っている部分もあるかもしれないのでリライトしていきます。(気力があればですが、、)
参考に貼った2つの記事と、Unityのマニュアルなんかを合わせて読めばだいぶ理解が深まるのではないかと思います。
自動レイアウトでいらつかなくなって、少しでも役に立ってくれれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる