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
250
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
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
110
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
470
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.collect#1
kako351
2
1.6k
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
830
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
1.3k
Other Decks in Technology
See All in Technology
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
4
1.4k
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
17k
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
150
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
100
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
130
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Grafana x PagerDuty Better Together
jacopen
1
240
.NET Profiler in 2024.
kkamegawa
2
830
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.5k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
350
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.3k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Embracing the Ebb and Flow
colly
80
4.2k
Into the Great Unknown - MozCon
thekraken
14
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
Docker and Python
trallard
35
2.7k
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