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
550
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
810
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
160
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
680
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.collect#1
kako351
2
2.4k
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
1.1k
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
1.9k
Other Decks in Technology
See All in Technology
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
240
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
2.2k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
200
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
990
コンテナサプライチェーンセキュリティ
kyohmizu
1
130
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
160
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
170
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
260
AIエージェント元年
shukob
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Building an army of robots
kneath
303
45k
Scaling GitHub
holman
459
140k
A Tale of Four Properties
chriscoyier
158
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Docker and Python
trallard
44
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Applications with DynamoDB
mza
93
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
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