Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
無限スクロールビューライブラリ 二つの設計思想比較
Haruki Yano
June 30, 2022
Technology
0
300
無限スクロールビューライブラリ 二つの設計思想比較
Haruki Yano
June 30, 2022
Tweet
Share
More Decks by Haruki Yano
See All by Haruki Yano
Asset Regulation Manager よく使う設定逆引きリファレンス
harumak
0
53
Other Decks in Technology
See All in Technology
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
200
インフラのテストに VPC Reachability Analyzer は外せないという話
nulabinc
PRO
2
690
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
220
DevelopersIO 2022 俺のTerraform Pipeline
takakuni
0
430
合同IT企業説明会から学ぶエンジニア向けの広報戦略
nagutabby
1
120
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
Micro frontends and micro services
kashif98
0
110
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
400
cobra は便利になっている
nwiizo
0
130
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
330
AWSを始める人に向けた7つの大切なこと / 7 tips for AWS beginners
hiranofumio
1
640
Red Hat Partner Training Portal のご紹介 / Red Hat Partner Training Portal Introduction
rhpej
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
68
4.8k
Six Lessons from altMBA
skipperchong
14
1.4k
Testing 201, or: Great Expectations
jmmastey
21
5.5k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
A Modern Web Designer's Workflow
chriscoyier
689
180k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Designing with Data
zakiwarfel
91
4k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
For a Future-Friendly Web
brad_frost
166
7.5k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Transcript
無限スクロールビューライブラリ 二つの設計思想比較 コアテク 矢野 春樹 2022.06.03
はじめに 01
はじめに スクロール範囲外の要素を非表示にしたり削除した り、使いまわしたりする機能がない。そのため何も 考えずに無 限スクロールすると処 理 負 荷も無 限 に...。
(機能が少ないというよりは、エンジンとして汎用 的にサポートしようとしている責務にそれらが入っ てないだけ。) Unityのスクロールビューは機能が少ない
はじめに • GameObjectを表示に必要な分だけ生成・使い回せる • スクロール要素をループさせられる • 各セルのサイズを可変にできる • 複数の種類の要素(Prefab)を使える •
指定したセルにジャンプできる • グリッド表示に対応してる …くらいあれば最低限よさそう 無限スクロールライブラリを使おう
はじめに 微妙にできることが違うので技術選定が必要 設計思想の異なる二つのライブラリを比較してみる ライブラリ多すぎ問題 Enhanced Scroller Loop Scroll Rect
Enhanced Scroller 02
Enhanced Scroller セル(要素)の数のほか、各セルのサイズを渡すインターフェースになっている データのインデックスからセルのサイズを返す必要がある セルのサイズがあらかじめ計算できる前提の設計意図を感じるインターフェース インターフェース public interface IEnhancedScrollerDelegate {
// セルの数を返す int GetNumberOfCells (EnhancedScroller scroller); // セルのサイズを返す float GetCellViewSize (EnhancedScroller scroller, int dataIndex); // セルのインスタンスを返す EnhancedScrollerCellView GetCellView(EnhancedScroller scroller, int dataIndex, int cellIndex); }
Enhanced Scroller 要素のトータルの高さがあらかじめ計算できる → スクロールバーの長さもあらかじめ計算可能 → 各要素の座標もあらかじめ計算可能 → いろいろと破綻なしに内部実装はできる Pros
そもそも要素の高さって予め計算できるんだっけ? Unityの自動レイアウトを使って、高さ可変なTextの高さをど う処理する? 一応デモに自動レイアウトと併用した場合の実装例はあるが、 パフォーマンスが悪いので推奨しない旨が書かれている。 Cons
Loop Scroll Rect 03
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); }
Loop Scroll Rect 自動レイアウトと破綻することなく組み合わせられる インスタンス化して自動レイアウト適用を待って高さを取得して… みたいなのが不要になる Pros まだ生成されていない要素の高さを正確に取得できない → スクロールバーの長さがスクロール中に変わる(違和感はない)
そのフレームで高さが決まる様な自動レイアウトの仕方をしないとうまく表示されない → 横幅も縦幅も可変みたいな(重そうな)組み方をしない Cons
おまけ 04
おまけ① グリッド表示の対応も結構違う Enhanced Scroller Loop Scroll Rect セルを1行 分グルーピングしたものを一つ のセルとして取り扱っている
Grid Layout Groupを使っている この場 合セルサイズはPreferredSizeでは なくこのCell Sizeが使用される
おまけ② カルーセルビュー いわゆる「バナー」みたいなビュー これに無限スクロールライブラリを使いたくなるけど、ちゃんと作るには以下の要件満たしてないと無理 • スクロールアニメーションを途中でキャンセルできること(ユーザがドラッグ時に必要) • 最後の要素から最初の要素にスクロールする時に、逆方向/順方向スクロール選べるか • 要素1個の時に
index: 0 から index: 0 にスクロールできるか(これが必要かは仕様次第)
おまけ② Fancy Carousel View 少なくとも今回紹介した二つのライブラリでは無理 Fancy Scroll View(setchi氏: https://github.com/setchi/FancyScrollView)が要件を満たした これをベースにしたFancy
Carousel ViewをOSSとして公開中(宣伝) https://github.com/Haruma-K/FancyCarouselView
おわり