Jetpack Compose에서 페이징 구현

8748 단어 android jetpackcompose kotlin

Jetpack Compose Alpha06이 최근에 출시되었으며 이와 함께 새로운 라이브러리paging-compose가 출시되었습니다. 라이브러리는 Paging 3.0 라이브러리와 Jetpack Compose 간의 통합을 제공합니다.

Paging과 Jetpack Compose는 모두 현재 알파 상태이므로 가까운 장래에 API가 변경될 예정입니다.

이 문서는 페이징 3.0 자체의 세부 사항보다는 작성과 페이징 통합에 더 초점을 맞춘 짧은 문서입니다.

이 문서에서 사용된 코드 스니펫은

크리티컬플레어 / 릭-모티-컴포즈

Jetpack Compose 및 Rick and Morty API를 사용하는 Android 앱

종속성 추가

기존 Jetpack Compose 프로젝트에 다음 종속성을 추가하거나 최신 Android Studio Canary의 Compose 템플릿을 사용하여 새 프로젝트를 만듭니다.

app/build.gradle


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

데이터 소스 설정

기존 뷰 기반 세계에 대해 수행하는 것과 동일한 방식으로 jetpack Compose에 대한 페이징 데이터 소스를 설정할 수 있습니다.

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의 특수 확장 기능이 제공됩니다.

이전에 구축한 데이터 소스에서 지원하는 PagingData 흐름을 제공하는 Pager를 생성합니다.

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

그런 다음 이 흐름은 다음과 같이 페이징 작성의 확장을 사용하여 lazyPagingItems로 변환할 수 있습니다.

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

이러한 lazyPagingItem은 LazyList 범위의 items 및 itemsIndexed extension methods에 전달될 수 있습니다. 이 경우 Android Studio는 올바른 확장 메서드를 가져오는 데 문제가 있으므로 문제가 발생하면 이러한 가져오기를 수동으로 추가해야 합니다.

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

이제 일반적인 선언적 UI 방식으로 다양한 loadStates에 따라 다양한 컴포저블을 내보낼 수 있습니다.

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 Compose가 레거시 보기 시스템보다 Paging 3.0 구현을 훨씬 간단하게 만든다는 것은 매우 분명합니다. Paging, Navigation Component, Edge to Edge UI 등을 통합하는 더 많은 예제는 이 기사에서 사용된 프로젝트를 확인할 수 있습니다.