RecyclerView를 Lazy 목록으로 이전

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

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

이전 단계

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

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

          <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) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

항목 애니메이션

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

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

추가 리소스

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