【Unity】「FancyScrollView」を公開しました
高度に柔軟なアニメーションを実装できる汎用のScrollViewコンポーネントです。 無限スクロールも対応しています。
github.com
以下ほぼ README のコピペです
導入
Unity 2017.1.0 (C# 6.0) 以降が必要です。このリポジトリを Clone するか、 Asset Store からプロジェクトにインポートしてください。
サンプル
FancyScrollView/Examples/Scenes/ を参照してください。
サンプル名 | 説明 |
01_Basic | 最もシンプルな構成の実装例です。 |
02_CellEventHandling | セルからのイベントをハンドリングする実装例です。 |
03_InfiniteScroll | 無限スクロールの実装例です。 |
04_FocusOn | ボタンで左右のセルにフォーカスする実装例です。 |
仕組み
FancyScrollView はセルの位置を更新する際に、画面に見える範囲を正規化した値を各セルに渡します。セル側では 0.0 ~ 1.0 の値をもとにスクロール中の見た目を自由に制御できます。
使い方
もっともシンプルな構成では、
- セルにデータを渡すためのオブジェクト
- セル
- スクロールビュー
の実装が必要です。
スクリプトの実装
セルにデータを渡すためのオブジェクトを定義します。
public class ItemData { public string Message; }
FancyScrollViewCell を継承して自分のセルを実装します。
using UnityEngine; using UnityEngine.UI; using FancyScrollView; public class MyScrollViewCell : FancyScrollViewCell<ItemData> { [SerializeField] Text message; public override void UpdateContent(ItemData itemData) { message.text = itemData.Message; } public override void UpdatePosition(float position) { // position は 0.0 ~ 1.0 の値です // position に基づいてスクロールの外観を自由に制御できます } }
FancyScrollView を継承して自分のスクロールビューを実装します。
using UnityEngine; using System.Linq; using FancyScrollView; public class MyScrollView : FancyScrollView<ItemData> { [SerializeField] Scroller scroller; [SerializeField] GameObject cellPrefab; protected override GameObject CellPrefab => cellPrefab; void Start() { scroller.OnValueChanged(base.UpdatePosition); } public void UpdateData(IList<ItemData> items) { base.UpdateContents(items); scroller.SetTotalCount(items.Count); } }
スクロールビューにデータを流し込みます。
using UnityEngine; using System.Linq; public class EntryPoint : MonoBehaviour { [SerializeField] MyScrollView myScrollView; void Start() { var items = Enumerable.Range(0, 50) .Select(i => new ItemData {Message = $"Cell {i}"}) .ToArray(); myScrollView.UpdateData(items); } }
インスペクタ上の設定
My Scroll View
プロパティ | 説明 |
---|---|
Cell Spacing | セル同士の間隔を float.Epsilon ~ 1.0 の間で指定します。 |
Scroll Offset | スクロールのオフセットを指定します。例えば 0.5 を指定してスクロール位置が 0 の場合、最初のセルの位置が 0.5 になります。 |
Loop | オンにすると、セルをループして配置します。無限スクロールさせたい場合はオンにします。 |
Cell Prefab | セルの Prefab を指定します。 |
Cell Container | セルの親要素となる Transform を指定します。 |
Scroller
プロパティ | 説明 |
---|---|
Viewport | ビューポートとなる RectTransform を指定します。ここで指定された RectTransform の範囲内でジェスチャーの検出を行います。 |
Direction Of Recognize | ジェスチャーを認識する方向を Vertical か Horizontal で指定します。 |
Movement Type | コンテンツがスクロール範囲を越えて移動するときに使用する挙動を指定します。 |
Scroll Sensitivity | スクロールの感度を指定します。 |
Inertia | 慣性のオン/オフを指定します。 |
Deceleration Rate | Inertia がオンの場合のみ有効です。減速率を指定します。 |
Snap - Enable | Snap を有効にする場合オンにします。 |
Snap - Velocity Threshold | Snap がはじまる閾値となる速度を指定します。 |
Snap - Duration | Snap 時の移動時間を秒数で指定します。 |
Data Count | アイテムのデータ件数の総数です。基本的にスクリプトから設定します。 |
Q&A
データ件数が多くてもパフォーマンスは大丈夫?
表示に必要なセル数のみが生成されるため、データ件数がパフォーマンスに与える影響はわずかです。セル間のスペース(同時に存在するセルの数)とセルの演出は、データ件数よりもパフォーマンスに大きな影響を与えます。
自分でスクロール位置を制御したいんだけど?
FancyScrollView の次の API を使用してスクロール位置を更新できます。
protected void UpdatePosition(float position)
サンプルで使われている Scroller を使う場合は、次の API を使用して FancyScrollView のスクロール位置を更新できます。
public void ScrollTo(int index, float duration)
public void JumpTo(int index)
public void OnValueChanged(Action<float> callback)
Scroller を使わずにあなた自身の実装で全く違った振る舞いをさせることもできます。
セルで発生したイベントを受け取れる?
セル内で発生したあらゆるイベントをハンドリングできます。 サンプルにセルで発生したイベントをハンドリングする実装が含まれていますので、参考にして実装してください。
セルをLoop(無限スクロール)させたいんだけど?
無限スクロールをサポートしています。実装手順は下記の通りです。
- ScrollView の Loop をオンにするとセルが循環し、最初のセルの前に最後のセル、最後のセルの後に最初のセルが並ぶようになります。
- サンプルで使用されている Scroller を使う場合は、「Movement Type」を「Unrestricted」にするとスクロール範囲が無制限になります。
実装例( FancyScrollView/Assets/FancyScrollView/Examples/03_InfiniteScroll at master · setchi/FancyScrollView · GitHub
)が含まれていますので、こちらも参考にしてください。
その他、不具合・要望があれば
setchi (@setchi) | Twitter
に連絡いただくか、プルリクをお願いします。