Jetpack構成におけるページングの実装

8248 ワード

Jetpackの作成Alpha 06最近リリースされ、それと一緒に、新しい来てpaging-compose 図書館.ライブラリは、Paging 3.0 ライブラリとJetpackの作成.
PagingとJetpackの両方の組み合わせは、アルファRightnowので、APIは近い将来に変更を持っていると予想されます.
この記事はページング3.0の詳細よりもむしろページングを構成することに集中している短いものです.
この記事で使用されるコードスニペットは

クリティカルフレア / リック・モーティ

を使用したアンドロイドアプリ

依存性の追加

既存のJetpack Composeプロジェクトに次の依存関係を追加するか、または最新のAndroid StudioカナリーからComposeテンプレートを使用して新しいプロジェクトを作成します.

app/build.gradle


     def paging_compose_version = "1.0.0-alpha01"
     implementation "androidx.paging:paging-compose:$paging_compose_version"

データソースの設定

つは、レガシービューベースの世界のためのものと同じ方法でJetpackの構成用のページングデータソースを設定できます.

class CharactersPaging {

    fun getCharacters(): PagingSource<Int, Character> {
        return object : PagingSource<Int, Character>() {
            override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Character> {
                val pageNumber = params.key ?: 0

                val charactersResponse = RickMortyClient.INSTANCE.getAllCharacters(page = pageNumber)
                val characters = charactersResponse.results

                val prevKey = if (pageNumber > 0) pageNumber - 1 else null
                val nextKey = if (charactersResponse.info.next != null) pageNumber + 1 else null

                return LoadResult.Page(
                    data = characters,
                    prevKey = prevKey,
                    nextKey = nextKey
                )
            }
        }
    }
}

使用しているRick And Morty この例のAPI.APIは私たちを与えるInfo を返します.

データソースのUIへの接続

ライブラリは、LazyList Scope 遅延リストと行の可用性を使用して宣言リストを作成する非常に簡単になります.
以前に構築したデータソースによってバックアップされたPageingDataの流れを提供するページャを作成します.

val charactersPaging = remember {
                CharactersPaging()
            }
val pager = remember {
                Pager(
                    PagingConfig(
                        pageSize = 20,
                        enablePlaceholders = true,
                    )
                ) {                  
                 charactersPaging.getCharacters()
                }
            }

このフローは、lazyPagingItems ページングからの拡張子の使用は次のようになります.

val lazyPagingItems: LazyPagingItems<Character> = pager.flow.collectAsLazyPagingItems()

これらのlazypagingitemは、items and itemsIndexed extension methods LazylistスコープについてAndroid Studioでは、この場合、正しい拡張メソッドをインポートするのに苦労しているので、問題に直面する場合は手動でこれらのインポートを追加してください.

import androidx.paging.compose.items
import androidx.paging.compose.itemsIndexed

今では典型的な宣言的なUIファッションでは、異なるロード状態によって異なる構成を生成できます.

LazyColumn{
                if (lazyPagingItems.loadState.refresh == LoadState.Loading) {
                    item {
                        Column(
                            modifier = Modifier.fillParentMaxSize(),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            CircularProgressIndicator()
                        }
                    }
                }

                itemsIndexed(lazyPagingItems) { index, item ->
                    if (item != null) {
                        CharacterItem(
                            modifier = Modifier.padding(8.dp),
                            character = item,
                            onClick = onCharSelect
                        )
                    }
                }

                if (lazyPagingItems.loadState.append == LoadState.Loading) {
                    item {
                        CircularProgressIndicator(
                            modifier = Modifier.fillMaxWidth()
                                .wrapContentWidth(Alignment.CenterHorizontally)
                        )
                    }
                }
          }

最終実施

@ExperimentalLazyDsl
@Composable
fun CharacterScreen(
    modifier: Modifier = Modifier.fillMaxSize(),
    onCharSelect: (Int) -> Unit
) {
    Surface {
        Box(
            modifier = modifier,
        ) {
            val charactersPaging = remember {
                CharactersPaging()
            }
            val pager = remember {
                Pager(
                    PagingConfig(
                        pageSize = 20,
                        enablePlaceholders = true,
                    )
                ) {                  charactersPaging.getCharacters()
                }
            }

            val lazyPagingItems: LazyPagingItems<Character> = pager.flow.collectAsLazyPagingItems()

            LazyColumn{
                if (lazyPagingItems.loadState.refresh == LoadState.Loading) {
                    item {
                        Column(
                            modifier = Modifier.fillParentMaxSize(),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            CircularProgressIndicator()
                        }
                    }
                }

                itemsIndexed(lazyPagingItems) { index, item ->
                    if (item != null) {
                        CharacterItem(
                            modifier = Modifier.padding(8.dp),
                            character = item,
                            onClick = onCharSelect
                        )
                    }
                }

                if (lazyPagingItems.loadState.append == LoadState.Loading) {
                    item {
                        CircularProgressIndicator(
                            modifier = Modifier.fillMaxWidth()
                                .wrapContentWidth(Alignment.CenterHorizontally)
                        )
                    }
                }
            }
        }
    }
}

Jetpackの構成では、ページング3.0の実装がレガシービューシステムよりもずっと簡単になります.この記事で使用するプロジェクトは、ページング、ナビゲーションコンポーネント、エッジツーエッジのUIとはるかに統合された例については確認できます