以前UnityのuGUIでスクロールビューを作る方法を紹介しました。
UnityのuGUIでスクロールビューを作る - テラシュールブログ
今度は無限にスクロールできるビューを作成します。
こんな感じです。
仕組みは、スクロールした際に
アイテムが反対側に補充される仕組みです。
使い方
作り方に関してですが、ちゃんと整理できていないので癖のある作り方をします。
Unity_UI_Samples/Assets/InfiniteScroll at master · tsubaki/Unity_UI_Samples · GitHub
- まず上記のリポジトリからInfiniteScrollフォルダを持ってきます。右のZipから落として解凍して中身をとってくればOK。
- メニューバー>UI>PanelでPanelを作ります。
- 次にPanelの下にScrollRectコンポーネントを登録します。
これがスクロールビューの基準点になります。
ScrollRectのMovementTypeはUnrestrictedに設定します。
- Panelの下にGameObjectを作り名前をViewとします。
ViewのAnchorsを上基準、Pivotはyを1とします。これは横スクロールを作りたい場合は、Anchorsを左、Pivotをx:0とします。 - ViewにInfinitie Scrollコンポーネントを追加します。
-
Viewの下にGameObjectを作成しItemBaseとします。
このItemBaseの大きさがスクロールビューの大きさになるので、余白を保たせたい場合は少し大きめに作成します。ちなみに高さの調整は対応してません。その辺りは要望があれば対応しようと思います。 - ItemBaseの下にImageとかTextを置いて、アイテムを表現します。この辺りはプレハブでも良いですが、調整はシーン内に置いちゃった方が楽です。
-
最後にViewのInfinitie ScrollのItemBaseに先ほど作成したItemBaseオブジェクトを登録します。
これで無限スクロールするスクロールビューが出来ました。
アイテムの内容調整
アイテムの内容を調整するには、OnUpdateItemにイベントを登録します。Infinitie Scrollはアイテムを表示する際にこのコールバックを呼び出しアイテムを調整します。
コールバックは以下の様な感じのフォーマットです。objに新しく表示するアイテムが格納されているので、そこからパラメータを調整する感じです。
public void OnUpdateItem (int itemCount, GameObject obj)
またIInfiniteScrollSetupを継承したコンポーネントがInfinitie Scrollをアタッチしたオブジェクトにアタッチされている場合、そのオブジェクトのOnPostSetupItemsをセットアップ時に呼び出します。
基本的にこの2つを差し替える事で、アイテムの内容を交換し少ないGameObject数で大量のデータを扱う感じです。
制限付きスクロールビューのやり方
最後に制限付き無限スクロールビューの作り方を紹介します。
制限付きスクロールビューは、少ないアイテム数で膨大なリストを表現する際にも利用することが出来ます。下の動画では、10個のアイテムで999個のリストを表現します。
スクロールビューのアイテム一つ表現するのに4〜6個(多いと10個近く)のオブジェクトやコンポーネントを使うため、何も考えずに作ればあっという間にGameObject1万個とか使った超長いロード時間に悩まされる事になります。
その対策として、このような少ないアイテムで膨大なリストを表現する手段が使えます。(というか、実は無限スクロールビューが副産物でコッチが本命です)
このやり方は単純で、上記のスクロールバーに以下の項目を追加すればOKです。
- 前手順で言うViewの大きさを全アイテムの長さだけ伸ばす
- ScrollRectのMovementTypeをElasticに設定する
- 範囲外のアイテムはOnUpdateItemで非表示にしてしまう。
Elasticが設定されているため範囲は有限ですので、スクロールバーが使えます。
作り方が良くわからない場合、InfiniteScroll>Limited>Limitedシーンを参考にすると良いかもしれません。
もしスクロールビューを使っている時に初期化にやたらと時間がかかる場合、コレを使ってみてください。