無限スクロールビューライブラリ 二つの設計思想比較

Transcript

1. 無限スクロールビューライブラリ 二つの設計思想比較 コアテク 矢野 春樹 2022.06.03
2. はじめに 01
3. はじめに スクロール範囲外の要素を非表示にしたり削除した り、使いまわしたりする機能がない。そのため何も 考えずに無 限スクロールすると処 理 負 荷も無 限 に...。 （機能が少ないというよりは、エンジンとして汎用 的にサポートしようとしている責務にそれらが入っ てないだけ。） Unityのスクロールビューは機能が少ない
4. はじめに • GameObjectを表示に必要な分だけ生成・使い回せる • スクロール要素をループさせられる • 各セルのサイズを可変にできる • 複数の種類の要素（Prefab）を使える • 指定したセルにジャンプできる • グリッド表示に対応してる …くらいあれば最低限よさそう 無限スクロールライブラリを使おう
5. はじめに 微妙にできることが違うので技術選定が必要 設計思想の異なる二つのライブラリを比較してみる ライブラリ多すぎ問題 Enhanced Scroller Loop Scroll Rect
6. Enhanced Scroller 02
7. Enhanced Scroller セル（要素）の数のほか、各セルのサイズを渡すインターフェースになっている データのインデックスからセルのサイズを返す必要がある セルのサイズがあらかじめ計算できる前提の設計意図を感じるインターフェース インターフェース public interface IEnhancedScrollerDelegate { // セルの数を返す int GetNumberOfCells (EnhancedScroller scroller); // セルのサイズを返す float GetCellViewSize (EnhancedScroller scroller, int dataIndex); // セルのインスタンスを返す EnhancedScrollerCellView GetCellView(EnhancedScroller scroller, int dataIndex, int cellIndex); }
8. Enhanced Scroller 要素のトータルの高さがあらかじめ計算できる → スクロールバーの長さもあらかじめ計算可能 → 各要素の座標もあらかじめ計算可能 → いろいろと破綻なしに内部実装はできる Pros そもそも要素の高さって予め計算できるんだっけ？ Unityの自動レイアウトを使って、高さ可変なTextの高さをど う処理する？ 一応デモに自動レイアウトと併用した場合の実装例はあるが、 パフォーマンスが悪いので推奨しない旨が書かれている。 Cons
9. Loop Scroll Rect 03
10. Loop Scroll Rect Enhanced Scrollerと違ってセルのサイズを返すインターフェースがない セルサイズはUnityの自動レイアウトを使っている（Preferred Width/Height） レイアウトの仕組みはUnityに従う設計思想を感じるインターフェース インターフェース public interface LoopScrollDataSource { // セルにデータをセットする void ProvideData(Transform transform, int idx); } public interface LoopScrollPrefabSource { // インデックスに対応する GameObjectを返す GameObject GetObject(int index); // 表示に不要になった GameObjectを処理 void ReturnObject(Transform trans); }
11. Loop Scroll Rect 自動レイアウトと破綻することなく組み合わせられる インスタンス化して自動レイアウト適用を待って高さを取得して… みたいなのが不要になる Pros まだ生成されていない要素の高さを正確に取得できない → スクロールバーの長さがスクロール中に変わる（違和感はない） そのフレームで高さが決まる様な自動レイアウトの仕方をしないとうまく表示されない → 横幅も縦幅も可変みたいな（重そうな）組み方をしない Cons
12. おまけ 04
13. おまけ① グリッド表示の対応も結構違う Enhanced Scroller Loop Scroll Rect セルを1行 分グルーピングしたものを一つ のセルとして取り扱っている Grid Layout Groupを使っている この場 合セルサイズはPreferredSizeでは なくこのCell Sizeが使用される
14. おまけ② カルーセルビュー いわゆる「バナー」みたいなビュー これに無限スクロールライブラリを使いたくなるけど、ちゃんと作るには以下の要件満たしてないと無理 • スクロールアニメーションを途中でキャンセルできること（ユーザがドラッグ時に必要） • 最後の要素から最初の要素にスクロールする時に、逆方向/順方向スクロール選べるか • 要素1個の時に index: 0 から index: 0 にスクロールできるか（これが必要かは仕様次第）
15. おまけ② Fancy Carousel View 少なくとも今回紹介した二つのライブラリでは無理 Fancy Scroll View（setchi氏: https://github.com/setchi/FancyScrollView）が要件を満たした これをベースにしたFancy Carousel ViewをOSSとして公開中（宣伝） https://github.com/Haruma-K/FancyCarouselView
16. おわり