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

2022年8月10日 (水) 16:48時点における版

リストの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に、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