「Unity/レイアウト」の版間の差分
(→コンテンツをフィットさせたコンテンツを並べる場合) |
(→LayoutElementのパラメータ) |
||
(同じ利用者による、間の7版が非表示) | |||
行50: | 行50: | ||
#Panelの中にTextなどを複数追加し、 | #Panelの中にTextなどを複数追加し、 | ||
#ContentSizeFitterでHorizontalFitをPreferredSizeにし、LayoutElementのMinWidthにチェックを入れ0で、設定する | #ContentSizeFitterでHorizontalFitをPreferredSizeにし、LayoutElementのMinWidthにチェックを入れ0で、設定する | ||
+ | |||
+ | 参考:https://tsubakit1.hateblo.jp/entry/2017/06/15/020309 | ||
==縦幅を指定する== | ==縦幅を指定する== | ||
行60: | 行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 | ||
+ | |||
+ | ==LayoutGroupのControlChildSizeの意味== | ||
+ | ControlChildSizeのHeightにチェックをいれると、その下にImageがあった場合、そのImageのHeightが、その子どもの高さによる自動計算になる。逆に、チェックを外すとImageのHeightに数値をいれることができるようになる。 | ||
+ | |||
+ | ==LayoutGroupのChildForceExpandの意味== | ||
+ | ChildForceExpandのHeightにチェックをいれると、縦幅全体に対して、子供Objectを均等に配置するようになる。チェックを外すと、隙間を開けずに、配置するようになる。 | ||
+ | |||
+ | ==LayoutElementのパラメータ== | ||
+ | *Min Width/Height:pixelで最低限のサイズ指定 | ||
+ | *Preferred Width/Height:pixelで推奨サイズ指定 | ||
+ | *Flexible Width/Height - スペースが余ってたとき拡げる比率 | ||
+ | |||
+ | 参考:https://note.com/fuqunaga/n/ndef5b45863d4 | ||
+ | |||
+ | ==SafeAreaHelperを使う== | ||
+ | [[Unity/おすすめアセット/SafeAreaHelper]] [ショートカット] |
2024年9月26日 (木) 06:36時点における最新版
目次
縦にコンテンツを並べる
- ヒエラルキーから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();
参考:https://www.snoopopo.com/entry/2023/10/01/125516
LayoutGroupのControlChildSizeの意味
ControlChildSizeのHeightにチェックをいれると、その下にImageがあった場合、そのImageのHeightが、その子どもの高さによる自動計算になる。逆に、チェックを外すとImageのHeightに数値をいれることができるようになる。
LayoutGroupのChildForceExpandの意味
ChildForceExpandのHeightにチェックをいれると、縦幅全体に対して、子供Objectを均等に配置するようになる。チェックを外すと、隙間を開けずに、配置するようになる。
LayoutElementのパラメータ
- Min Width/Height:pixelで最低限のサイズ指定
- Preferred Width/Height:pixelで推奨サイズ指定
- Flexible Width/Height - スペースが余ってたとき拡げる比率
参考:https://note.com/fuqunaga/n/ndef5b45863d4
SafeAreaHelperを使う
Unity/おすすめアセット/SafeAreaHelper [ショートカット]