RecyclerView를 Lazy 목록으로 이전

RecyclerView는 대량의 데이터 세트를 효율적으로 표시할 수 있는 뷰 구성요소입니다. 데이터 세트의 각 항목에 대한 뷰를 만드는 대신 RecyclerView는 작은 뷰 풀을 유지하고 항목을 스크롤할 때 이를 재활용하여 앱의 성능을 개선합니다.

Compose에서는 지연 목록을 사용하여 동일한 작업을 실행할 수 있습니다. 이 페이지에서는 Compose에서 지연 목록을 사용하도록 RecyclerView 구현을 이전하는 방법을 설명합니다.

이전 단계

RecyclerView 구현을 Compose로 이전하려면 다음 단계를 따르세요.

  1. UI 계층 구조에서 RecyclerView를 주석 처리하거나 삭제하고 ComposeView를 추가하여 계층 구조에 아직 없는 경우 대체합니다. 이는 추가할 지연 목록의 컨테이너입니다.

          <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

  <!--    <androidx.recyclerview.widget.RecyclerView-->
  <!--            android:id="@+id/recycler_view"-->
  <!--            android:layout_width="match_parent"-->
  <!--            android:layout_height="match_parent />"-->

          <androidx.compose.ui.platform.ComposeView
              android:id="@+id/compose_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

      </FrameLayout>

  2. RecyclerView의 레이아웃 관리자에 따라 필요한 지연 목록 컴포저블의 유형을 결정합니다 (아래 표 참고). 선택한 컴포저블은 이전 단계에서 추가한 ComposeView의 최상위 컴포저블이 됩니다.

    LayoutManager

    컴포저블

    LinearLayoutManager

    LazyColumn 또는 LazyRow

    GridLayoutManager

    LazyVerticalGrid 또는 LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid 또는 LazyHorizontalStaggeredGrid

    		 

    // recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}
    MigrationCommonScenariosSnippets.kt

  3. RecyclerView.Adapter 구현에서 각 뷰 유형에 상응하는 컴포저블을 만듭니다. 각 뷰 유형은 일반적으로 ViewHolder 서브클래스에 매핑되지만 항상 그런 것은 아닙니다. 이러한 컴포저블은 목록에 있는 다양한 유형의 요소의 UI 표현으로 사용됩니다.

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    RecyclerView.Adapter의 onCreateViewHolder() 및 onBindViewHolder() 메서드의 로직은 이러한 컴포저블과 개발자가 제공한 상태로 대체됩니다. Compose에서는 항목의 컴포저블을 만드는 것과 항목에 데이터를 결합하는 것 간에 분리되지 않습니다. 이러한 개념은 병합됩니다.

  4. 지연 목록의 content 슬롯 (후행 람다 매개변수) 내에서 items() 함수 (또는 이에 상응하는 오버로드)를 사용하여 목록의 데이터를 반복합니다. itemContent 람다에서 데이터에 적절한 구성 가능한 항목을 호출합니다.

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

일반적인 사용 사례

아이템 장식

RecyclerView에는 목록에 있는 항목의 특수 그리기를 추가하는 데 사용할 수 있는 ItemDecoration의 개념이 있습니다. 예를 들어 ItemDecoration를 추가하여 항목 사이에 구분선을 추가할 수 있습니다.

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose에는 항목 장식과 동등한 개념이 없습니다. 대신 컴포지션에서 직접 목록에 UI 장식을 추가할 수 있습니다. 예를 들어 목록에 구분선을 추가하려면 각 항목 뒤에 Divider 컴포저블을 사용하면 됩니다.

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            Divider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

항목 애니메이션

RecyclerView에서 ItemAnimator를 설정하여 어댑터가 변경될 때 항목 모양을 애니메이션으로 표시할 수 있습니다. 기본적으로 RecyclerView는 삭제, 추가, 이동 이벤트에 관한 기본 애니메이션을 제공하는 DefaultItemAnimator를 사용합니다.

지연 목록에도 animateItemPlacement 수정자를 통한 유사한 개념이 있습니다. 자세한 내용은 항목 애니메이션을 참고하세요.

추가 리소스

RecyclerView를 Compose로 이전하는 방법에 관한 자세한 내용은 다음 리소스를 참고하세요.