「Unity/レイアウト」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→縦幅を指定する) |
(→縦幅を指定する) |
||
行49: | 行49: | ||
参考:https://taidanahibi.com/unity/auto-layout/ | 参考: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が作れる