初めに
Unity では Layout Element や Content Size Fitter など UI など RectTransform がアタッチされたオブジェクトのレイアウトを自動で調整するためのコンポーネントがいくつか存在します。本記事では、それらの使い方をまとめます。
Index
前提
自動レイアウトシステムは、基本的な Rect Transform レイアウトシステム上に構築されたシステムです。
Rect Transform コンポーネントは UI の座標やサイズ、アンカー、スケールなどを司るもので、通常のオブジェクトの Transform に代わるものにあたります。UI には、デフォルトで Rect Transform がアタッチされていますが、他のオブジェクトにも Rect Transform をアタッチすることができます。
レイアウト用素について
自動レイアウトシステムは次の二つの概念に基づいています。
| 概念 | 説明 |
|---|---|
| レイアウト要素 | Rect Transform を有しているオブジェクトのこと |
| レイアウトコントローラー | 1 つ以上のレイアウト要素 のサイズと、場合によっては位置を制御するコンポーネント Content Size Fitter とさまざまな Layout Group コンポーネントなど |
レイアウト要素は以下のプロパティを有しています。
- Min Width (最小幅)
- Min Height (最小の高さ)
- Preferred Width (推奨幅)
- Preferred height (推奨の高さ)
- Flexible Width (可変幅)
- Flexible Height (可変の高さ)
レイアウトコントローラーコンポーネントは次の手順で、レイアウト要素のサイズを決めます。
- Min のサイズが割り当てられる
- 使用可能な領域が十分にある場合は、推奨 (Preferred) サイズが割り当てられる
- さらに余分な使用領域があれば、Flexible のサイズが割り当てられる
Rect Transform がアタッチされているゲームオブジェクトは レイアウト要素としての動作が可能です。デフォルトで Min、Preferred、Fexible のサイズが 0 に設定されています。コンポーネントの中には、ゲームオブジェクトに加えると、これらのレイアウトプロパティを変更するものもあるようです。
レイアウトコントローラー
レイアウトコントローラーは、1 つ以上のレイアウト要素 のサイズと、場合によっては位置を制御するコンポーネントです。Content Size Fitter とさまざまな Layout Group コンポーネントなどがレイアウトコントローラーにあたります。
Content Size Fitter
Content Size Fitter を使うとレイアウト要素に合わせて自身の縦横幅を変えることができます。
| プロパティ | 機能 |
|---|---|
| Horizontal Fit | 幅がどのように制御されるか |
| Vertical Fit | 高さがどのように制御されるか |
どちらも次の３つから選択できます。
- Unconstrained：レイアウト要素に連動させない
- Min Size：Min に連動させる
- Preferred Size：Preferred に連動させる
Aspect Layout Fitter
Aspect Layout Fitter は、アスペクト比(widthとHeightの比率)を一定に強制的にする機能になります。
次の項目から、Aspect Mode（アスペクト比率を維持するためにどのようにサイズ変更をするかを指定する）を選んで使用します。
| Mode | 説明 |
|---|---|
| None | アスペクト比率を無視する |
| Width Controls Height | Height は Width にもとづいて自動的に調整されます |
| Height Controls Width | Width は Height にもとづいて自動的に調整されます |
| Fit In Parent | 幅、高さ、位置、アンカーは、アスペクト比率を維持しながら矩形が親矩形の内側に合うように自動的に調整されます。親矩形の内部には、この矩形で覆われていないスペースがある場合もあります。 |
| Envelope Parent | 幅、高さ、位置、アンカーは、アスペクト比率を維持しながら親矩形の全体を覆うよう自動的に調整されます。この矩形は親矩形よりも大きくなるかもしれません。 |
Aspect Racio Fitter については、過去の記事をご覧ください。
fineworks-fine.hatenablog.com
Layout Group
Layout Group は、子のレイアウト要素のサイズと位置を制御するレイアウトコントローラーとして機能します。
Layout Group は以下のような特徴をもちます。
- 子のレイアウト要素のサイズと位置を制御するレイアウトコントローラーである
- それ自体（Layout Group がついたオブジェクト自身）のサイズは管理しない
- それ自体がレイアウト要素として機能する（ほかのレイアウトコントローラーに管理されたり、手動で設定されたりする）
Layout Group となるコンポーネントは下記の３つあります。
| コンポーネント | 説明 |
|---|---|
| Horizontal Layout Group | 水平方向に一列に子のレイアウト要素を配置する |
| Vertical Layout Group | 垂直方向に一列に子のレイアウト要素を配置する |
| Grid Layout Group | グリッド状（格子状）に子のレイアウト要素を配置する |
（イメージ）
| Horizontal Layout Group |  |
| Vertical Layout Group |  |
| Grid Layout Group |  |
Grid Layout Group の推奨される使い方
Grid Layout Group は Content Size Fitter と併用することが推奨されます。
（幅を可変にし、高さを固定する）
要素が加えられるにつれて、グリッドが横に広がるように、グリッドを可変の幅と固定の高さで設定するには、以下のようにプロパティを設定します。
| Grid Layout Group コンポーネントの Constraint | Fixed Row Count |
| Content Size Fitter コンポーネントの Horizontal Fit | Preferred Size |
| Content Size Fitter コンポーネントの Vertical Fit | Preferred Size か Unconstrained |
Vertical Fit で Unconstrained を使用する場合、特定のセルの行数に合うようにグリッドの高さを大きくするかは、ニーズに合わせて判断してください。
（幅を固定し、高さを可変にする）
要素が加えられるにつれて、グリッドが縦に広がるように、グリッドを固定の幅と可変の高さで設定するには、以下のようにプロパティを設定します。
| Grid Layout Group コンポーネントの Constraint | Fixed Column Count |
| Content Size Fitter コンポーネントの Horizontal Fit | Preferred Size か Unconstrained |
| Content Size Fitter コンポーネントの Vertical Fit | Preferred Size |
Horizontal Fit で Unconstrained を使用する場合、特定のセルの列数に合うようにグリッドの幅を大きくするかは、ニーズに合わせて判断してください。
