facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎縦幅を指定する)
(→‎コンテンツをフィットさせたコンテンツを並べる場合)
行42: 行42:
  
 
参考：https://albatrus.com/entry/2021/03/06/162141
 
参考：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で、設定する
  
 
==縦幅を指定する==
 
==縦幅を指定する==

2024年7月3日 (水) 00:54時点における版

縦にコンテンツを並べる

  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で、設定する

縦幅を指定する

LayoutElementのPreferredHeightにチェックして数値を入れると、その縦幅になる。

その縦幅にならない場合は、親オブジェクの~LayoutGroupのChildForceExpandのHeightのチェックを外す。

参考：https://taidanahibi.com/unity/auto-layout/

UIアンカーで上下フィットさせる

ImageなどについてるRectTreansformの左側に表示されているUIアンカーから上下stratchを選択すれば、上下にfitするUIが作れる

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