UnityCoverFlow

Unity3D UI CoverFlow and other Layout options

Overview

Some years ago I was required to build a simple Cover Flow Layout (think, iTunes Carousel). Originally I build the project in a Windows Forms application for a client we were working with. Sometime later we then needed a similar system in a project we were doing in Unity3D.

This is just a simple recreation of that work.

Its very old, and it wasn’t originally done in GitHub so I’ve just commited the whole project in one commit.

There are some simple layouts included to demonstrate the flexibility of the system,

• The classic Cover Flow layout (iTunes Album Artwork style)
• A Carousel Layout (Z-Depth carousel)
• A “Messy Paper” Layout - Cells shift from 1 messy pile to another

Further Features

Cell reuse is supported using a simple Cell Pool with UICollectionCells registering Prefabs as “nibs” to be reused.

Data “binding” can be expanded upon with the cell reuse.

All layouts have various settings to tweak positions, speeds, snapping, wrapping and the like. These can also be updated at runtime in the editor to see results in real time.

Demos

Here’s a few GIFs showing the layouts in action in the editor (GIFs are only at 30fps and appear to have bad artifacts in them, running in the editor is obviously at full FPS with no rendering issues).

• Cover Flow Layout 

  

• Carousel Layout 

  

• Messy Paper Layout 

  

• Layouts can have multiple configurable elements, here’s an example of the Cover Flow properties being edited at runtime…

  

[출처] https://unitylist.com/p/1xt/Unity-Cover-Flow

[링크]

https://github.com/setchi/FancyScrollView

FancyScrollView 

English (by Google Translate)

高度に柔軟なアニメーションを実装できる汎用の ScrollView コンポーネントです。 無限スクロールもサポートしています。

Requirements

• Unity 2018.3 or later.
• .NET 4.x Scripting Runtime

Installation

Unity Asset Store

Asset Store からパッケージをプロジェクトにインストールします。

Unity Package Manager (Example scenes not included)

プロジェクトディレクトリの Packages/manifest.json ファイルにリポジトリへの参照を追加します。

{ "dependencies": { "jp.setchi.fancyscrollview": "https://github.com/setchi/FancyScrollView.git#upm" } }

Manual

このリポジトリを Clone または Download します。

Features

自由にスクロールアニメーションを実装できます

FancyScrollView はセルの位置を更新するとき、可視領域の正規化された値を各セルに渡します。セル側では、0.0 ~ 1.0 の値に基づいてスクロールの外観を自由に制御できます。サンプルでは Animator を使用してセルの動きを制御しています。

データ件数が多くても軽快に動作します

表示に必要なセル数のみが生成され、セルは再利用されます。

セルとスクロールビュー間で自由にメッセージのやりとりができます

Context 経由で、セルがクリックされたことをスクロールビューで検知したり、スクロールビューからセルに指示を出す処理がシンプルに実装できます。実装例（Examples/02_FocusOn）が含まれていますので、参考にしてください。

特定のセルにスクロールやジャンプができます

移動にかける秒数や Easing の指定もできます。詳しくは API Reference の Scroller - Methods を参照してください。

スクロールの挙動を細かく設定できます

慣性の有無、減速率などスクロールに関する挙動の設定ができます。詳しくは API Reference の Scroller - Inspector を参照してください。

スナップをサポートしています

スナップを有効にすると、スクロールが止まる直前に最寄りのセルへ移動します。スナップがはじまる速度のしきい値、移動にかける秒数、 Easing を指定できます。

無限スクロールをサポートしています

Inspector で下記の設定をすることで無限スクロールを実装できます。

1. FancyScrollView の Loop をオンにするとセルが循環し、先頭のセルの前に末尾のセル、末尾のセルの後に先頭のセルが並ぶようになります。
2. サンプルで使用されている Scroller を使うときは、 Movement Type を Unrestricted に設定することで、スクロール範囲が無制限になります。 1. と組み合わせることで無限スクロールを実現できます。

実装例（Examples/03_InfiniteScroll）が含まれていますので、こちらも参考にしてください。

Examples

FancyScrollView/Examples を参照してください。

NameDescription

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

API Reference

FancyScrollView<TItemData, TContext>

セルを制御するスクロールビューの抽象基底クラスです。

public abstract class FancyScrollView<TItemData, TContext> : MonoBehaviour where TContext : class, new()

Context が不要な場合はこちらを使用します。

public abstract class FancyScrollView<TItemData> : FancyScrollView<TItemData, FancyScrollViewNullContext>

Inspector

TypeNameSummary

Properties

TypeNameSummary

Methods

TypeNameSummary

FancyScrollViewCell<TItemData, TContext>

セルの抽象基底クラスです。

public abstract class FancyScrollViewCell<TItemData, TContext> : MonoBehaviour where TContext : class, new()

Context が不要な場合はこちらを使用します。

public abstract class FancyScrollViewCell<TItemData> : FancyScrollViewCell<TItemData, FancyScrollViewNullContext>

Properties

TypeNameSummary

Methods

TypeNameSummary

Scroller

スクロール位置を制御するコンポーネントです。

public class Scroller : UIBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler

Inspector

TypeNameSummary

Methods

TypeNameSummary

Author

setchi

License

MIT