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
170
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
690
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
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
320
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Share my, our lessons from the road to re:Invent
naospon
0
140
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.9k
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
290
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.8k
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
120
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
100
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
270
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
BBQ
matthewcrist
87
9.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Designing Experiences People Love
moore
140
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Done Done
chrislema
182
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Navigating Team Friction
lara
183
15k
Optimizing for Happiness
mojombo
376
70k
Adopting Sorbet at Scale
ufuk
74
9.2k
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