中堅プログラマーの備忘録

忘れっぽくなってきたので備忘録として・・・

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

1.概要

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

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

まずは任意のプロジェクトを作成します。
作成したら【Hierarchy】から
【Create】→【UI】→【Scroll View】を選択します。
f:id:tsu--kun:20191112155522p:plain


追加が完了すると下図のとおり追加されます。
f:id:tsu--kun:20191112155536p:plain

3.ScrollViewの設定をする

①表示範囲

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

②スクロール範囲の指定

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

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

【ScrollView】の【Inspector】にある【Scroll Rect】内の
【Horizontal Scrollbar】を【None】に設定します。
また、【Hierarchy】から【Scrollbar Horizontal】を右クリックし
【Delete】をクリックし削除します。
f:id:tsu--kun:20191112155600p:plain

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

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

【Content Size Fitter】

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

【Vertical Layout Group】

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


f:id:tsu--kun:20191112155616p:plain

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.結果

結果は下図のとおりとなりました。
f:id:tsu--kun:20191112155656g:plain