はじめに
「FancyScrollView」を Unity プロジェクトに導入することで、uGUI において
多機能でアニメーションも適用可能なスクロールビューを実装できるようになります
目次
サンプル
基本
押下イベント
無限スクロール
フォーカス
使用例
ここではシンプルなスクロールの作成方法を紹介していきます
詳細な作成方法は、「Examples」フォルダ内のサンプルや
GitHub で公開されているドキュメントを参照してください
スクリプトの用意
「FancyScrollView」を使用してスクロールビューを構成する場合、
少なくとも3種類のスクリプトが必要になります
セルの表示に使用するデータ
public class MyCellData { public string Message; }
セルを管理するコンポーネント
using FancyScrollView; using UnityEngine; using UnityEngine.UI; public class MyScrollCell : FancyScrollViewCell<MyCellData> { public Text message; // 表示を更新する時に呼び出されます public override void UpdateContent( MyCellData itemData ) { message.text = itemData.Message; } // 位置を更新する時に呼び出されます // Animator を使用することでアニメーションを適用することも可能です public override void UpdatePosition( float position ) { var pos = transform.localPosition; pos.y = Mathf.Lerp( 288, -288, position ); transform.localPosition = pos; } }
スクロールビューを管理するコンポーネント
using FancyScrollView; using System.Linq; public class MyScrollView : FancyScrollView<MyCellData> { public ScrollPositionController controller; private void Awake() { // セルのデータのリスト datas = Enumerable.Range( 0, 50 ) .Select( i => new MyCellData { Message = "Cell " + i } ) .ToList() ; // セルの数を設定 controller.SetDataCount( datas.Count ); // セルの位置を更新する時に呼び出されるコールバックを設定 controller.OnUpdatePosition( UpdatePosition ); // 表示を更新 UpdateContents(); } }
オブジェクトの作成
「FancyScrollView」を使用してスクロールビューを構成する場合、
セルのプレハブと、スクロールビューのオブジェクトを作成します
セルのプレハブ
Image や RawImage などのオブジェクトを作成して、
「MyScrollCell」をアタッチしてパラメータを設定します
そして、プレハブにしておきます
スクロールビューのオブジェクト
Image のオブジェクトを作成して、
「MyScrollView」と「ScrollPositionController」をアタッチして
下記のパラメータを設定します
MyScrollView
項目 | 内容 |
---|---|
Cell Interval | セル同士の間隔 |
Cell Offset | セルの初期位置 |
Loop | 無限スクロールするかどうか |
Cell Base | セルのプレハブ |
Cell Container | セルを管理するオブジェクト(自分自身で可) |
Controller | スクロールビューを操作するコントローラ(自分自身) |
ScrollPositionController
項目 | 内容 |
---|---|
Viewport | ビューポート(自分自身) |
Direction Of Recognize | スクロール方向 |
Movement Type | スクロールを範囲外まで引っ張った時の挙動 |
Scroll Sensitivity | スクロールの感度(スワイプした時の移動量) |
完成
以上でシンプルなスクロールが動作することが確認できます