今回はScrollVIewを使って、テキスト入力をシェルのように表示する方法に挑戦します。
今回はテキストの大きさに応じてScrollVIewのContentが動的にサイズ変更されて、いつも最後に追加された行が表示されるようにフォーカスする処理までまとめます。次回、オーバーフローしたテキストを切り取る処理を追加します。→時間かかりそうだったので、いったん保留にします。
手順
VerticalLayoutGroup を使って、ScrollView の Content にテキストをぶら下げますが、ScrollRect と Pivot の使い方 がポイントになります。
テキストの大きさに応じてContentのサイズを変更する
(1) ScrollViewをつくる
Hierarchyウィンドウ > +▼ > UI > ScrollView
(2) Contentの下にTextを追加
Hierarchyウィンドウ > Content(ScrollViewの孫)を選択して右クリック
UI > Text または Text - TextMeshPro
以下の階層になると思います。
(3) Content の設定
VerticalLayoutGroup を追加します。
Add Component > Layout > VerticalLayoutGroup
(4) Content > VerticalLayoutGroup の設定
Control Child SizeのWidth,HeightにチェックChild Force ExpandのWidth,Heightのチェックを外す
(5) Content にぶら下げた Text の設定
PivotのX=0,Y=1に設定
※Text, TextMeshPro とも同じ
(6) ScrollView > ScrollRect の設定
Content に Text を指定します。
上記の設定にしたとき、それぞれのサイズは以下の値で決定されます。
| パラメータ | 設定箇所 |
|---|---|
| 最小サイズ | ScrollView の width/height |
| 最大サイズ | Content の width/height |
| 現在のサイズ | Text の preferred width/height（テキストの中身によって自動的に決まる） |
常に一番下を表示するように指定する
Content の一番下の領域を選択した状態にするには、ScrollRect.VerticalNormalizedPosition = 0 を指定する必要があります。
(1) 以下のコードを作成します。（または実装済コードに以下の★マークの４行を追加します。）
Projectウィンドウで右クリック > Create > C# Script
ファイル名を確定する前にファイル名（＝クラス名）を入力
（今回はTestScrollにしました）
組むコードは以下のとおりです。
TestScroll.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; // ★ScrollRect public class testScroll : MonoBehaviour { ScrollRect scrollRect; // ★ void Awake() { scrollRect = gameObject.GetComponent<ScrollRect>(); // ★ } // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { if( scrollRect != null ){ scrollRect.verticalNormalizedPosition = 0; // ★ } } }
(2) ScrollViewに上記スクリプトを追加します。
Hierarchyウィンドウ > ScrollView を選択
Projectウィンドウ > 先ほど作成したスクリプトを選択し、Inspectorウィンドウにドラッグ＆ドロップ
(3) 最後に動作テストをします。
再生後、Text のテキスト領域に適当に文字を入れてみると、画面（ScrollView）のサイズを超えても、最大サイズ（Content）に到達するまで、入力した文字が表示されます。
※注意点：ScrollView はサイズが変更になった時に、サイズの大きさが確定するまでに非常に長い時間がかかるようで、サイズが変更になった直後はちらつきが発生します。
