はじめに

「FancyScrollView」を Unity プロジェクトに導入することで、uGUI において
多機能でアニメーションも適用可能なスクロールビューを実装できるようになります

サンプル

基本

f:id:baba_s:20180105164617g:plain

押下イベント

f:id:baba_s:20180105164648g:plain

無限スクロール

f:id:baba_s:20180105164710g:plain

フォーカス

f:id:baba_s:20180105164742g:plain

使用例

ここではシンプルなスクロールの作成方法を紹介していきます

f:id:baba_s:20180105172803p:plain

詳細な作成方法は、「Examples」フォルダ内のサンプルや
GitHub で公開されているドキュメントを参照してください

スクリプトの用意

f:id:baba_s:20180105171148p:plain

「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();
    }
}

オブジェクトの作成

f:id:baba_s:20180105171448p:plain

「FancyScrollView」を使用してスクロールビューを構成する場合、
セルのプレハブと、スクロールビューのオブジェクトを作成します

セルのプレハブ

f:id:baba_s:20180105172503p:plain

Image や RawImage などのオブジェクトを作成して、
「MyScrollCell」をアタッチしてパラメータを設定します
そして、プレハブにしておきます

スクロールビューのオブジェクト

f:id:baba_s:20180105171602p:plain

Image のオブジェクトを作成して、
「MyScrollView」と「ScrollPositionController」をアタッチして
下記のパラメータを設定します

MyScrollView

項目	内容
Cell Interval	セル同士の間隔
Cell Offset	セルの初期位置
Loop	無限スクロールするかどうか
Cell Base	セルのプレハブ
Cell Container	セルを管理するオブジェクト（自分自身で可）
Controller	スクロールビューを操作するコントローラ（自分自身）

ScrollPositionController

項目	内容
Viewport	ビューポート（自分自身）
Direction Of Recognize	スクロール方向
Movement Type	スクロールを範囲外まで引っ張った時の挙動
Scroll Sensitivity	スクロールの感度（スワイプした時の移動量）