FancyScrollView
高度に柔軟なアニメーションを実装できる汎用のScrollViewコンポーネントです。 無限スクロールもサポートしています。English (by Google Translate)
Requirements
- Unity 2018.3 or later.
- .NET 4.x Scripting Runtime
Installation
Unity Asset Store
Install the package in your project using the Asset Store page.
Unity Package Manager (Example scenes not included)
Add a reference to the repository in the Packages\manifest.json
file in your project directory:
{
"dependencies": {
"jp.setchi.fancyscrollview": "https://github.com/setchi/FancyScrollView.git#upm"
}
}
Manual
Clone or download this repository.
Examples
FancyScrollView/Examples を参照してください。
Name | Description |
---|---|
01_Basic | 最もシンプルな構成の実装例です。 |
02_FocusOn | ボタンで左右のセルにフォーカスする実装例です。 |
03_InfiniteScroll | 無限スクロールの実装例です。 |
How it works
FancyScrollView はセルの位置を更新するとき、可視領域の正規化された値を各セルに渡します。セル側では、0.0 ~ 1.0 の値に基づいてスクロールの外観を自由に制御できます。
Usage
もっともシンプルな構成では、
- セルにデータを渡すためのオブジェクト
- セル
- スクロールビュー
の実装が必要です。
Implementation
セルにデータを渡すためのオブジェクトを定義します。
public class ItemData
{
public string Message;
}
FancyScrollViewCell<TItemData>
を継承して自分のセルを実装します。
using UnityEngine;
using UnityEngine.UI;
using FancyScrollView;
public class MyScrollViewCell : FancyScrollViewCell<ItemData>
{
[SerializeField] Text message = default;
public override void UpdateContent(ItemData itemData)
{
message.text = itemData.Message;
}
public override void UpdatePosition(float position)
{
// position は 0.0 ~ 1.0 の値です
// position に基づいてスクロールの外観を自由に制御できます
}
}
FancyScrollView<TItemData>
を継承して自分のスクロールビューを実装します。
using UnityEngine;
using System.Linq;
using FancyScrollView;
public class MyScrollView : FancyScrollView<ItemData>
{
[SerializeField] Scroller scroller = default;
[SerializeField] GameObject cellPrefab = default;
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 = default;
void Start()
{
var items = Enumerable.Range(0, 20)
.Select(i => new ItemData {Message = $"Cell {i}"})
.ToArray();
myScrollView.UpdateData(items);
}
}
Settings on the Inspector
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 | コンテンツがスクロール範囲を越えて移動するときに使用する挙動を指定します。 |
Elasticity | コンテンツがスクロール範囲を越えて移動するときに使用する弾力性の量を指定します。 |
Scroll Sensitivity | スクロールの感度を指定します。 |
Inertia | 慣性のオン/オフを指定します。 |
Deceleration Rate | Inertia がオンの場合のみ有効です。減速率を指定します。 |
Snap - Enable | Snap を有効にする場合オンにします。 |
Snap - Velocity Threshold | Snap がはじまる閾値となる速度を指定します。 |
Snap - Duration | Snap 時の移動時間を秒数で指定します。 |
Snap - Easing | Snap 時の Easing を指定します。 |
FAQ
データ件数が多くてもパフォーマンスは大丈夫?
表示に必要なセル数のみが生成されるため、データ件数がパフォーマンスに与える影響はわずかです。セル間のスペース(同時に存在するセルの数)とセルの演出は、データ件数よりもパフォーマンスに大きな影響を与えます。
自分でスクロール位置を制御したいんだけど?
FancyScrollView
の次の API を使用してスクロール位置を更新できます。
protected void UpdatePosition(float position)
サンプルで使われている Scroller
を使う場合は、次の API を使用して FancyScrollView
のスクロール位置を更新できます。
public void JumpTo(int index)
public void ScrollTo(int index, float duration)
public void ScrollTo(int index, float duration, Ease easing)
public void OnValueChanged(Action<float> callback)
Scroller
を使わずにあなた自身の実装で全く違った振る舞いをさせることもできます。
セルで発生したイベントを受け取れる?
セル内で発生したあらゆるイベントをハンドリングできます。セル内で発生したイベントをハンドリングする実装例(Examples/02_FocusOn)が含まれていますので、参考にして実装してください。
セルを無限スクロール(ループ)させたいんだけど?
無限スクロールをサポートしています。実装手順は下記の通りです。
ScrollView
のLoop
をオンにするとセルが循環し、最初のセルの前に最後のセル、最後のセルの後に最初のセルが並ぶようになります。- サンプルで使用されている
Scroller
を使うときは、Movement Type
をUnrestricted
に設定することで、スクロール範囲が無制限になります。 1. と組み合わせることで無限スクロールを実現できます。
実装例(Examples/03_InfiniteScroll)が含まれていますので、こちらも参考にしてください。
Author
License
MIT