「Unity/レイアウト」の版間の差分

2023年2月28日 (火) 00:42時点における版

縦にコンテンツを並べる

1. ヒエラルキーからCreate/UI/Panelを作成する
2. PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
3. ControlChildSizeのWidthとHeightにチェックを入れる
4. ChildForceExpandのWIdthとHeightにチェックを入れる
5. Panelの中にImageなどを複数追加すると、Panel一杯に縦に均等に並ぶ

横にコンテンツを並べる

1. ヒエラルキーからCreate/UI/Panelを作成する
2. PanelのInspectorを開き、AddComponentでHorizontalLayoutGroupを追加
3. ControlChildSizeのWidthとHeightにチェックを入れる
4. ChildForceExpandのWIdthとHeightにチェックを入れる
5. Panelの中にImageなどを複数追加すると、Panel一杯に横に均等に並ぶ

タイル状にコンテンツを並べる

1. ヒエラルキーからCreate/UI/Panelを作成する
2. PanelのInspectorを開き、AddComponentでGridLayoutGroupを追加
3. ControlChildSizeのWidthとHeightにチェックを入れる
4. ChildForceExpandのWIdthとHeightにチェックを入れる
5. Panelの中にImageなどを複数追加すると、タイル状に並ぶ

縦に上からコンテンツを並べる

1. ヒエラルキーからCreate/UI/Panelを作成する
2. PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
3. ControlChildSizeのWidthとHeightにチェックを入れる
4. ChildForceExpandのWidthだけにチェックを入れる
5. Panelの中にImageなどを複数追加し、追加したImageのInspectorのAddCompnentにLayoutElementを追加する
6. 追加したImageなどのLayoutElenmentのMinHeightにチェックを入れ100とする

一部コンテンツのLayoutElenmentのFlexibleHeightに、チェックを入れ、値を1とすると、そのコンテンツが余白を埋めて拡大される。

コンテンツをフィットさせたコンテンツを並べる場合

縦に上からコンテンツを並べるの例

1. ヒエラルキーからCreate/UI/Panelを作成する
2. PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
3. ControlChildSizeのWidthとHeightにチェックを入れる
4. ChildForceExpandのWidthだけにチェックを入れる
5. Panelの中にTextなどを複数追加し、
6. ContentSizeFitterでVerticalFitをPreferredSizeにし、LayoutElementのMinHeightにチェックを入れ0で、設定する

参考：https://albatrus.com/entry/2021/03/06/162141