「Unity/レイアウト」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→横並びで、左からコンテンツを並べるの例) |
(→UIアンカーで上下フィットさせる) |
||
行62: | 行62: | ||
==UIアンカーで上下フィットさせる== | ==UIアンカーで上下フィットさせる== | ||
ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる | ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる | ||
+ | |||
+ | ==ContentSizeFitterを追加したRectの縦幅/横幅を取得== | ||
+ | なにもしないと、表示処理が、1フレーム遅いのか?わからないが、こちらのタイミングで、ContentSizeFitterを効かせたい場合は、以下のように処理する。 | ||
+ | <pre> | ||
+ | ContentSizeFitter contentSizeFitter = obj.GetComponent<ContentSizeFitter>(); | ||
+ | contentSizeFitter.SetLayoutHorizontal(); | ||
+ | contentSizeFitter.SetLayoutVertical(); | ||
+ | </pre> | ||
+ | |||
+ | 参考:https://www.snoopopo.com/entry/2023/10/01/125516 |
2024年7月15日 (月) 04:10時点における最新版
目次
縦にコンテンツを並べる
- ヒエラルキーから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
横並びで、左からコンテンツを並べるの例
- ヒエラルキーからCreate/UI/Panelを作成する
- PanelのInspectorを開き、AddComponentでHorizontalLayoutGroupを追加
- ControlChildSizeのHeightだけチェックを入れる・Widthは外す
- ChildForceExpandは両方チェックを外す
- Panelの中にTextなどを複数追加し、
- ContentSizeFitterでHorizontalFitをPreferredSizeにし、LayoutElementのMinWidthにチェックを入れ0で、設定する
参考:https://tsubakit1.hateblo.jp/entry/2017/06/15/020309
縦幅を指定する
LayoutElementのPreferredHeightにチェックして数値を入れると、その縦幅になる。
その縦幅にならない場合は、親オブジェクの~LayoutGroupのChildForceExpandのHeightのチェックを外す。
参考:https://taidanahibi.com/unity/auto-layout/
UIアンカーで上下フィットさせる
ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる
ContentSizeFitterを追加したRectの縦幅/横幅を取得
なにもしないと、表示処理が、1フレーム遅いのか?わからないが、こちらのタイミングで、ContentSizeFitterを効かせたい場合は、以下のように処理する。
ContentSizeFitter contentSizeFitter = obj.GetComponent<ContentSizeFitter>(); contentSizeFitter.SetLayoutHorizontal(); contentSizeFitter.SetLayoutVertical();