facebook twitter hatena line email

「Unity/リスト表示」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(prefubを画面にロード)
(縦スクロールリストでグループ化してテキストの高さを自動調整)
(同じ利用者による、間の11版が非表示)
行2: 行2:
 
[[unity/UIScrollView]] [ショートカット]
 
[[unity/UIScrollView]] [ショートカット]
  
#リスト内の部品はPanelで作ってprefub化する
+
#リスト内の部品はPanelで作ってprefab化する
#prefubはAssets/Resourcesにいれる
+
#prefabはAssets/Resourcesにいれる
  
 
参考:https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/
 
参考:https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/
  
==prefubを画面にロード==
+
==prefabを画面にロード==
 
参考:[[unity/3d]] [ショートカット]
 
参考:[[unity/3d]] [ショートカット]
  
リストの部品(panel)をprefubからロードする
+
リストの部品(panel)をprefabからロードする
 
# Ui/Panelを生成し、Textやボタンなどを貼り付ける
 
# Ui/Panelを生成し、Textやボタンなどを貼り付ける
#Assets/Resourcesの中にPanelをドラッグするとprefubができる
+
#Assets/Resourcesの中にPanelをドラッグするとprefabができる
 
#以下のようにインスタンスを生成する
 
#以下のようにインスタンスを生成する
  
行32: 行32:
  
 
==リストの部品がずれる場合==
 
==リストの部品がずれる場合==
#prefub部品をダブルクリックして、RectTransformのTopとBottomを0にしてprefubを作り直す。
+
#prefab部品をダブルクリックして、RectTransformのTopとBottomを0にしてprefabを作り直す。
#prefub部品をダブルクリックして部品の中央をずらす。再度、prefubを作り直す。
+
#prefab部品をダブルクリックして部品の中央をずらす。再度、prefabを作り直す。
  
 
==リストの部品がずれる場合(NGパターン==
 
==リストの部品がずれる場合(NGパターン==
行50: 行50:
 
#ScrollViewのViewportのContentの下にAddComponentでContentSizeFitterを追加
 
#ScrollViewのViewportのContentの下にAddComponentでContentSizeFitterを追加
 
#ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする
 
#ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする
 +
==縦スクロールリストでテキストの高さを自動調整==
 +
#HierarchyからUI/ScrollViewを作成。
 +
#Canvasの下にScrollViewができてることを確認。
 +
#ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
 +
#ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
 +
#ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
 +
#UI/Textを作り、ScrollView/Viewport/Contentの下に設置
 +
テキストの幅を操作してと、自動で縦幅が調整されれば成功。
 +
 +
==縦スクロールリストでグループ化してテキストの高さを自動調整==
 +
#HierarchyからUI/ScrollViewを作成。
 +
#Canvasの下にScrollViewができてることを確認。
 +
#ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
 +
#ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildForceExpandのHeightに、チェック
 +
#ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
 +
#ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
 +
#UI/Imageを作り、ScrollView/Viewport/Contentの下に設置
 +
#UI/Textを作り、ScrollView/Viewport/Content/Imageの下に追加
 +
#ScrollView/Viewport/Content/ImageにHorizontalLayoutGroupを追加し、ControlChildSizeのHeightにチェック
 +
#ScrollView/Viewport/Content/ImageにContentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
 +
Imageの中のテキストの幅を操作してと、自動でImageの縦幅が調整されれば成功。
 +
 +
参考:https://tsubakit1.hateblo.jp/entry/2015/10/19/022720
 +
 +
==横スクロールリストを作る==
 +
#HierarchyからUI/ScrollViewを作成。
 +
#Canvasの下にScrollViewができてることを確認。
 +
#ScrollView/Viewport/ContentのInspectorに、HorizontalLayoutGroupを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
 +
#ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildForceExpandのWidthに、チェック
 +
#ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildAlignmentをMiddleCenterへ
 +
#ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのHorizontaiFitを、UnconstrainedからPreferredSizeへ変更する
 +
#UI/Imageを作り、Resourcesへ移動
 +
#以下コードを追加
 +
<pre>
 +
public class SampleScene : MonoBehaviour
 +
{
 +
    void Start()
 +
    {
 +
        int cnt = 3;
 +
        for (int i = 0; i < cnt; i++) {
 +
            InstantiateImage();
 +
        }
 +
    }
 +
    void InstantiateImage()
 +
    {
 +
        GameObject parent = GameObject.Find("/Canvas/Scroll View/Viewport/Content");
 +
        GameObject prefab = (GameObject)Resources.Load("Image");
 +
        GameObject imageObj = Instantiate(prefab, Vector3.zero, Quaternion.identity, parent.transform);
 +
    }
 +
}
 +
</pre>
 +
 +
===prefabの上下左右が微妙にずれる場合===
 +
#ScrollView/Viewport/ContentのInspectorのHorizontalLayoutGroupのPaddingの数値を適宜変更する
 +
 +
===一番右に移動する===
 +
<pre>
 +
GameObject scrollObj = GameObject.Find("/Canvas/Scroll View");
 +
ScrollRect scroll = scrollObj.GetComponent<ScrollRect>();
 +
scroll.horizontalNormalizedPosition = 1f
 +
</pre>

2022年8月16日 (火) 03:43時点における版

リストのUIを作る

unity/UIScrollView [ショートカット]

  1. リスト内の部品はPanelで作ってprefab化する
  2. prefabはAssets/Resourcesにいれる

参考:https://tech.pjin.jp/blog/2016/08/30/unity_skill_3/

prefabを画面にロード

参考:unity/3d [ショートカット]

リストの部品(panel)をprefabからロードする

  1. Ui/Panelを生成し、Textやボタンなどを貼り付ける
  2. Assets/Resourcesの中にPanelをドラッグするとprefabができる
  3. 以下のようにインスタンスを生成する
GameObject prefab = (GameObject)Resources.Load("HogePanel");
Vector3 position = new Vector3(x, y, z);
GameObject obj = Instantiate(prefab, position, Quaternion.identity);
obj.name = "HogePanel1";
  1. "Scroll View/Viewport/Content"にAddComponentsで、VerticalLayoutGroupを追加する
  2. VerticalLayoutGroupのControlChildSizeにチェック入れる。
  3. VerticalLayoutGroupのspacingを200とかいれて間隔を空ける

参考:http://tsubakit1.hateblo.jp/entry/2017/06/15/020309

参考:https://teratail.com/questions/111392

Instantiateのunity公式: https://docs.unity3d.com/jp/current/ScriptReference/Object.Instantiate.html

リストの部品がずれる場合

  1. prefab部品をダブルクリックして、RectTransformのTopとBottomを0にしてprefabを作り直す。
  2. prefab部品をダブルクリックして部品の中央をずらす。再度、prefabを作り直す。

リストの部品がずれる場合(NGパターン

以下パターンだと、コンテンツが入らなかったり、スクロールが戻されたりして失敗する

  1. ContentSizeFitterのチェックを外すとか
  2. ContentのHeightを3000とかに以下のようにプログラムで広げるとか

ContentのHeightを動的に変更

GameObject panel = GameObject.Find("/Canvas/Scroll View/Viewport/Content/Panel");
panel.GetComponent<RectTransform>().sizeDelta = new Vector2(w, h);

リストの高さが狭い時

VerticalLayoutGroupのspacingを200とかいれて間隔を空ける

リストのスクロールが下に行かない場合

  1. ScrollViewのViewportのContentの下にAddComponentでContentSizeFitterを追加
  2. ContentSizeFitterのVerticalfitをUnconstrainedからPreferredSizeにする

縦スクロールリストでテキストの高さを自動調整

  1. HierarchyからUI/ScrollViewを作成。
  2. Canvasの下にScrollViewができてることを確認。
  3. ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
  4. ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
  5. ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
  6. ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
  7. ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
  8. UI/Textを作り、ScrollView/Viewport/Contentの下に設置

テキストの幅を操作してと、自動で縦幅が調整されれば成功。

縦スクロールリストでグループ化してテキストの高さを自動調整

  1. HierarchyからUI/ScrollViewを作成。
  2. Canvasの下にScrollViewができてることを確認。
  3. ScrollView/Viewport/ContentのInspectorに、VerticalLayoutGroupを、AddComponentする
  4. ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
  5. ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのControlChildSizeのHeightに、チェック
  6. ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildForceExpandのHeightに、チェック
  7. ScrollView/Viewport/ContentのInspectorの、VerticalLayoutGroupのChildAlignmentをUpperLeftへ
  8. ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する
  9. UI/Imageを作り、ScrollView/Viewport/Contentの下に設置
  10. UI/Textを作り、ScrollView/Viewport/Content/Imageの下に追加
  11. ScrollView/Viewport/Content/ImageにHorizontalLayoutGroupを追加し、ControlChildSizeのHeightにチェック
  12. ScrollView/Viewport/Content/ImageにContentSizeFitterのVerticalFitを、UnconstrainedからPreferredSizeへ変更する

Imageの中のテキストの幅を操作してと、自動でImageの縦幅が調整されれば成功。

参考:https://tsubakit1.hateblo.jp/entry/2015/10/19/022720

横スクロールリストを作る

  1. HierarchyからUI/ScrollViewを作成。
  2. Canvasの下にScrollViewができてることを確認。
  3. ScrollView/Viewport/ContentのInspectorに、HorizontalLayoutGroupを、AddComponentする
  4. ScrollView/Viewport/ContentのInspectorに、CotentSizeFitterを、AddComponentする
  5. ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildForceExpandのWidthに、チェック
  6. ScrollView/Viewport/ContentのInspectorの、HorizontalLayoutGroupのChildAlignmentをMiddleCenterへ
  7. ScrollView/Viewport/ContentのInspectorの、CotentSizeFitterのHorizontaiFitを、UnconstrainedからPreferredSizeへ変更する
  8. UI/Imageを作り、Resourcesへ移動
  9. 以下コードを追加
public class SampleScene : MonoBehaviour
{
    void Start()
    {
        int cnt = 3;
        for (int i = 0; i < cnt; i++) {
            InstantiateImage();
        }
    }
    void InstantiateImage()
    {
        GameObject parent = GameObject.Find("/Canvas/Scroll View/Viewport/Content");
        GameObject prefab = (GameObject)Resources.Load("Image");
        GameObject imageObj = Instantiate(prefab, Vector3.zero, Quaternion.identity, parent.transform);
    }
}

prefabの上下左右が微妙にずれる場合

  1. ScrollView/Viewport/ContentのInspectorのHorizontalLayoutGroupのPaddingの数値を適宜変更する

一番右に移動する

GameObject scrollObj = GameObject.Find("/Canvas/Scroll View");
ScrollRect scroll = scrollObj.GetComponent<ScrollRect>();
scroll.horizontalNormalizedPosition = 1f