facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(ページの作成:「==縦にコンテンツを並べる== #ヒエラルキーからCreate/UI/Panelを作成する #PanelのInspectorを開き、AddComponentでVerticalLayoutGroupを追加 #C...」)
 
(→‎LayoutElementのパラメータ)
 
(同じ利用者による、間の15版が非表示)
行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だけにチェックを入れる
+
#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
 +
 +
===横並びで、左からコンテンツを並べるの例===
 +
#ヒエラルキーから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を効かせたい場合は、以下のように処理する。
 +
<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時点における最新版

縦にコンテンツを並べる

  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一杯に横に均等に並ぶ

縦幅が高くなる場合は、ChildForceExpandのHeightのチェックを外す

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

  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

横並びで、左からコンテンツを並べるの例

  1. ヒエラルキーからCreate/UI/Panelを作成する
  2. PanelのInspectorを開き、AddComponentでHorizontalLayoutGroupを追加
  3. ControlChildSizeのHeightだけチェックを入れる・Widthは外す
  4. ChildForceExpandは両方チェックを外す
  5. Panelの中にTextなどを複数追加し、
  6. 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 [ｼｮｰﾄｶｯﾄ]

「http://wiki.nonip.net/index.php?title=Unity/レイアウト&oldid=19060」から取得