【Unity】ScrollViewの使い方、スクリプトからテキスト一覧表示の設定をする

1.概要

UI設計において、見やすさ、使いやすさを考慮すると
情報を１画面に表示するべきです。
ですが表示しきれない場合
文字を小さくする、またはページ切り替えを行うなど
方法はありますが使い勝手が悪くなってしまいます。
そんな時は１画面に情報が収まり
スクロール可能な【ScrollView】が便利です。
今回は縦スクロールのテキスト一覧を表示する設定を行います。

2.プロジェクトに追加する

まずは任意のプロジェクトを作成します。
作成したら【Hierarchy】から
【Create】→【UI】→【Scroll View】を選択します。

追加が完了すると下図のとおり追加されます。

3.ScrollViewの設定をする

①表示範囲

【ScrollView】の【Inspector】にある【Rect Transform】を設定します。
とりあえず今回は画面中央に1000px×1000pxの大きさで設定しました。

②スクロール範囲の指定

ドラッグした時に横にずれないように設定します。
【ScrollView】の【Inspector】にある【Scroll Rect】内の
【Horizontal】のチェックを外します。

③横スクロールバーを無効にする

【ScrollView】の【Inspector】にある【Scroll Rect】内の
【Horizontal Scrollbar】を【None】に設定します。
また、【Hierarchy】から【Scrollbar Horizontal】を右クリックし
【Delete】をクリックし削除します。

④コンテンツの配置について考える

【Content】の【Inspector】に
・Content Size Fitter
・Vertical Layout Group
の２つのコンポーネントつ追加します。

【Content Size Fitter】

Contentの子要素を推奨サイズに合わせて自動的に設定します。
今回は縦方向で合わせるので
【Vertical Fit】を【Preferred Size】に設定します。

【Vertical Layout Group】

子オブジェクトを縦方向に自動で整列させる機能です。
【Padding】【Spacing】は余白の設定なので適当な値を設定します。
【Child Control Size】は子要素のサイズを制御する設定です。
【Child Force Expand】は子要素を引き延ばす設定です。
今回はどちらも【Width】のみ有効としています。

4.スクリプト

【Hierarchy】に適当な【GameObject】を作成します。
ここでは【Test】という名前にしました。
さらに【Test】にスクリプトを追加します。
ここでは【TestScript】という名前にしました。

以下スクリプトです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestScript : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        var scrollView = GameObject.Find("Scroll View");
        // スクリプトからScroll Viewのサイズを変更する場合はアンコメント
        //scrollView.transform.localPosition = new Vector3(0, 0, 0);
        //scrollView.transform.localScale = new Vector3(1, 1, 1);
        //scrollView.GetComponent<RectTransform>().sizeDelta = new Vector2(1000, 1000);

        var viewPort = scrollView.transform.Find("Viewport");
        Transform content = viewPort.transform.Find("Content");

        // テキストを表示する
        for (int i = 0; i < 20; i++)
        {
            GameObject Contents = new GameObject("Contents" + (i + 1).ToString());

            Contents.transform.parent = content.transform;
            var Rect = Contents.AddComponent<RectTransform>();
            Rect.transform.localPosition = new Vector3(0, 0, 0);
            Rect.transform.localScale = new Vector3(1, 1, 1);
            Rect.sizeDelta = new Vector2(0, 100);

            Contents.AddComponent<CanvasRenderer>();
            Contents.AddComponent<Image>();
            Contents.AddComponent<LayoutElement>().preferredHeight = 100;

            var butttonState = Contents.AddComponent<Button>();
            // 背景の色を変えて見やすくする
            var colors = butttonState.colors;
            if (i % 2 == 0)
            {
                colors.normalColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                colors.highlightedColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                colors.pressedColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
                colors.disabledColor = new Color(0F / 255F, 0F / 255F, 0F / 255F, 128F / 255F);
            }
            else
            {
                colors.normalColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                colors.highlightedColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                colors.pressedColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
                colors.disabledColor = new Color(0 / 255F, 0 / 255F, 0 / 255F, 50 / 255F);
            }
            butttonState.colors = colors;

            GameObject text = new GameObject("Text" + (i + 1).ToString());
            text.transform.parent = Contents.transform;
            var rect = text.AddComponent<RectTransform>();
            rect.transform.localPosition = new Vector3(0, 0, 0);
            rect.transform.localScale = new Vector3(1, 1, 1);
            rect.sizeDelta = new Vector2(900, 90);

            text.AddComponent<CanvasRenderer>();

            var textChild = text.AddComponent<Text>();
            textChild.text = (i + 1).ToString() + "番目";
            textChild.color = new Color(255f / 255f, 255f / 255f, 255f / 255f, 255f / 255f);
            textChild.fontSize = 30;
            textChild.alignment = TextAnchor.MiddleCenter;
            textChild.font = Resources.GetBuiltinResource (typeof(Font), "Arial.ttf") as Font;;
        }
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

5.結果

結果は下図のとおりとなりました。