Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを...
Search
kako351
December 16, 2023
Technology
0
690
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを挿入する
このスライドは Android Advent Calendar 2023 16日目のスライドです。
https://qiita.com/advent-calendar/2023/android
kako351
December 16, 2023
Tweet
Share
More Decks by kako351
See All by kako351
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
1.4k
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
190
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
770
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.collect#1
kako351
2
2.8k
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
1.3k
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
2.5k
Other Decks in Technology
See All in Technology
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
220
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
100
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
人工衛星のファームウェアをRustで書く理由
koba789
13
7.1k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
740
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
Obsidian応用活用術
onikun94
1
460
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
190
フィンテック養成勉強会#56
finengine
0
140
Featured
See All Featured
Docker and Python
trallard
45
3.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
KATA
mclloyd
32
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
43
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Transcript
insertSeparatorsで ヘッダーや別のアイテム付きの ページングリストを実装する kako351 Android Advent Calendar 2023
自己紹介 kako351 / @kako_351 Androidエンジニア • バイク(ハンターカブ) • ギター •
コーヒー自宅焙煎 趣味
本日話す内容 • Paging3の基本的な実装方法 • LazyColumnの基本的な実装方法 • LazyColumnのitemを利用する方法 話さないこと 話すこと •
Paging3のinsertSeparatorsについて • データの区別について • LazyColumnとの組み合わせ
ページングリスト中にヘッダーや別のアイテムを表示 できるようになる 例えば、左の画面のように リストアイテム: レシピ ヘッダー: 件数やソート機能 (上の赤枠) 途中: 別のレシピ検索提案(下の赤枠)
ゴール
まずはいつものようにPagingDataを作成します。 PagingData作成 val list = Pager( PagingConfig( pageSize = 10,
initialLoadSize = 10 ) ){ pagingSource }.flow.cachedIn(viewModelScope)
リストアイテムと他のアイテムを区別 する sealed class UiModel { data class Recipe( val
index: Int, val title: String ): UiModel() data class Header( val totalCount: Int ): UiModel() data class RelatedSearch( val keywords: List<String> ): UiModel() }
PagingDataのデータストリームを変換 する pager.flow.map { it.insertSeparators { before, after -> when
{ before == null -> UiModel.Header(999) after?.index == 2 -> UiModel.RelatedSearch(/* todo list */) else -> null } } }.cachedIn(viewModelScope)
insertSeparators 引数は以下の2つを持っています。 • terminalSeparatorType: TerminalSeparatorType • generator: suspend (before: T?,
after: T?) -> R? generator内で生成したセパレータと元の要素を含むPagingDataを返します。 https://developer.android.com/reference/kotlin/androidx/paging/PagingData#(androidx.paging.PagingData).insertSep arators(androidx.paging.TerminalSeparatorType,kotlin.coroutines.SuspendFunction2)
insertSeparators https://developer.android.com/reference/kotlin/androidx/paging/PagingData#(androidx.paging.PagingData).insertSep arators(androidx.paging.TerminalSeparatorType,kotlin.coroutines.SuspendFunction2) TerminalSeparatorType セパレータを表示するタイミングを設定するモード。2つある。 • FULLY_COMPLETE ◦ PagingSourceとRemoteMediatorの両方がページネーションの終わりに達したときにセパ レーターを表示する
• SOURCE_COMPLETE ◦ RemoteMediatorの状態に関係なく、PagingSourceがページネーションの最後に到達した時 点で、端末のセパレーター(ヘッダーとフッター)を表示する
insertSeparators https://developer.android.com/reference/kotlin/androidx/paging/PagingData#(androidx.paging.PagingData).insertSep arators(androidx.paging.TerminalSeparatorType,kotlin.coroutines.SuspendFunction2) generator: suspend (before: T?, after: T?) ->
R? 前後の要素を受け取ります。終端の場合はbefore、afterはそれぞれ nullになりま す。 リストが完全に空の場合はbefore、afterがともにnullになります。 つまり ヘッダーを追加したい場合は before == null で処理します。
LazyColumnにセパレータ付きのPagingDataを渡します。 paging-composeを利用します(※alpha版です 2023/07/21時点) UIに表示する val list = viewModel. list.collectAsLazyPagingItems ()
LazyColumn { items(count = list.itemCount, key = { it }) { index -> val item = list[index] ?: return@items when(item) { is UiModel.Header -> HeaderItem(item) is UiModel.Recipe -> RecipeItem(item) is UiModel.RelatedSearch -> RelatedSearchItems (item) } } } ところどころ雑なところはご了承ください......🙇
UIに表示する Paging3のSeparatorsを利用してリスト中にヘッダー や別のアイテムを挿入した画面が実装できました 🎉
まとめ • リスト中に別のアイテム(セパレータ)を挿入するにはinsertSeparatorsを使う • データを区別するには sealed classやsealed interface (interface)で可能 •
LazyColumn内でデータサブクラスごとに表示分けを行う
• データ ストリームを変換する https://developer.android.com/topic/libraries/architecture/paging/v3-t ransform?hl=ja#convert-ui-model • Paging: Getting fancy with
transformations, separators, headers, footers and search - MAD Skills https://www.youtube.com/watch?v=ZARz0pjm5YM 参考情報
ご静聴 ありがとう ございました 15 kako351