「Unity/レイアウト」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==縦にコンテンツを並べる== #ヒエラルキーからCreate/UI/Panelを作成する #PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加 #C...」) |
(→縦幅を指定する) |
||
| (同じ利用者による、間の6版が非表示) | |||
| 行12: | 行12: | ||
#ChildForceExpandのWIdthとHeightにチェックを入れる | #ChildForceExpandのWIdthとHeightにチェックを入れる | ||
#Panelの中にImageなどを複数追加すると、Panel一杯に横に均等に並ぶ | #Panelの中にImageなどを複数追加すると、Panel一杯に横に均等に並ぶ | ||
| + | |||
| + | 縦幅が高くなる場合は、ChildForceExpandのHeightのチェックを外す | ||
==タイル状にコンテンツを並べる== | ==タイル状にコンテンツを並べる== | ||
| 行24: | 行26: | ||
#PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加 | #PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加 | ||
#ControlChildSizeのWidthとHeightにチェックを入れる | #ControlChildSizeのWidthとHeightにチェックを入れる | ||
| − | # | + | #ChildForceExpandのWidthだけにチェックを入れる |
#Panelの中にImageなどを複数追加し、追加したImageのInspectorのAddCompnentにLayoutElementを追加する | #Panelの中にImageなどを複数追加し、追加したImageのInspectorのAddCompnentにLayoutElementを追加する | ||
#追加したImageなどのLayoutElenmentのMinHeightにチェックを入れ100とする | #追加したImageなどのLayoutElenmentのMinHeightにチェックを入れ100とする | ||
一部コンテンツのLayoutElenmentのFlexibleHeightに、チェックを入れ、値を1とすると、そのコンテンツが余白を埋めて拡大される。 | 一部コンテンツのLayoutElenmentのFlexibleHeightに、チェックを入れ、値を1とすると、そのコンテンツが余白を埋めて拡大される。 | ||
| + | |||
| + | ==コンテンツをフィットさせたコンテンツを並べる場合== | ||
| + | ===縦に上からコンテンツを並べるの例=== | ||
| + | #ヒエラルキーからCreate/UI/Panelを作成する | ||
| + | #PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加 | ||
| + | #ControlChildSizeのWidthとHeightにチェックを入れる | ||
| + | #ChildForceExpandのWidthだけにチェックを入れる | ||
| + | #Panelの中にTextなどを複数追加し、 | ||
| + | #ContentSizeFitterでVerticalFitをPreferredSizeにし、LayoutElementのMinHeightにチェックを入れ0で、設定する | ||
| + | |||
| + | 参考：https://albatrus.com/entry/2021/03/06/162141 | ||
| + | |||
| + | ==縦幅を指定する== | ||
| + | LayoutElementのPreferredHeightにチェックして数値を入れると、その縦幅になる。 | ||
| + | |||
| + | その縦幅にならない場合は、親オブジェクの~LayoutGroupのChildForceExpandのHeightのチェックを外す。 | ||
| + | |||
| + | 参考：https://taidanahibi.com/unity/auto-layout/ | ||
| + | |||
| + | ==UIアンカーで上下フィットさせる== | ||
| + | ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる | ||
2023年7月29日 (土) 18:09時点における最新版
目次
縦にコンテンツを並べる
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
- ControlChildSizeのWidthとHeightにチェックを入れる
- ChildForceExpandのWIdthとHeightにチェックを入れる
- Panelの中にImageなどを複数追加すると、Panel一杯に縦に均等に並ぶ
横にコンテンツを並べる
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでHorizontalLayoutGroupを追加
- ControlChildSizeのWidthとHeightにチェックを入れる
- ChildForceExpandのWIdthとHeightにチェックを入れる
- Panelの中にImageなどを複数追加すると、Panel一杯に横に均等に並ぶ
縦幅が高くなる場合は、ChildForceExpandのHeightのチェックを外す
タイル状にコンテンツを並べる
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでGridLayoutGroupを追加
- ControlChildSizeのWidthとHeightにチェックを入れる
- ChildForceExpandのWIdthとHeightにチェックを入れる
- Panelの中にImageなどを複数追加すると、タイル状に並ぶ
縦に上からコンテンツを並べる
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
- ControlChildSizeのWidthとHeightにチェックを入れる
- ChildForceExpandのWidthだけにチェックを入れる
- Panelの中にImageなどを複数追加し、追加したImageのInspectorのAddCompnentにLayoutElementを追加する
- 追加したImageなどのLayoutElenmentのMinHeightにチェックを入れ100とする
一部コンテンツのLayoutElenmentのFlexibleHeightに、チェックを入れ、値を1とすると、そのコンテンツが余白を埋めて拡大される。
コンテンツをフィットさせたコンテンツを並べる場合
縦に上からコンテンツを並べるの例
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加
- ControlChildSizeのWidthとHeightにチェックを入れる
- ChildForceExpandのWidthだけにチェックを入れる
- Panelの中にTextなどを複数追加し、
- ContentSizeFitterでVerticalFitをPreferredSizeにし、LayoutElementのMinHeightにチェックを入れ0で、設定する
参考：https://albatrus.com/entry/2021/03/06/162141
縦幅を指定する
LayoutElementのPreferredHeightにチェックして数値を入れると、その縦幅になる。
その縦幅にならない場合は、親オブジェクの~LayoutGroupのChildForceExpandのHeightのチェックを外す。
参考：https://taidanahibi.com/unity/auto-layout/
UIアンカーで上下フィットさせる
ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる
