RecyclerView
는 대량의 데이터 세트를 효율적으로 표시할 수 있는 뷰 구성요소입니다. 데이터 세트의 각 항목에 대한 뷰를 만드는 대신 RecyclerView
는 작은 뷰 풀을 유지하고 항목을 스크롤할 때 이를 재활용하여 앱의 성능을 개선합니다.
Compose에서는 지연 목록을 사용하여 동일한 작업을 실행할 수 있습니다. 이 페이지에서는 Compose에서 지연 목록을 사용하도록 RecyclerView
구현을 이전하는 방법을 설명합니다.
이전 단계
RecyclerView
구현을 Compose로 이전하려면 다음 단계를 따르세요.
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>
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 } }
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` } }
RecyclerView.Adapter
의onCreateViewHolder()
및onBindViewHolder()
메서드의 로직은 이러한 컴포저블과 개발자가 제공한 상태로 대체됩니다. Compose에서는 항목의 컴포저블을 만드는 것과 항목에 데이터를 결합하는 것 간에 분리되지 않습니다. 이러한 개념은 병합됩니다.지연 목록의
content
슬롯 (후행 람다 매개변수) 내에서items()
함수 (또는 이에 상응하는 오버로드)를 사용하여 목록의 데이터를 반복합니다.itemContent
람다에서 데이터에 적절한 구성 가능한 항목을 호출합니다.val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
일반적인 사용 사례
아이템 장식
RecyclerView
에는 목록에 있는 항목의 특수 그리기를 추가하는 데 사용할 수 있는 ItemDecoration
의 개념이 있습니다. 예를 들어 ItemDecoration
를 추가하여 항목 사이에 구분선을 추가할 수 있습니다.
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose에는 항목 장식과 동등한 개념이 없습니다. 대신 컴포지션에서 직접 목록에 UI 장식을 추가할 수 있습니다. 예를 들어 목록에 구분선을 추가하려면 각 항목 뒤에 Divider
컴포저블을 사용하면 됩니다.
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
항목 애니메이션
RecyclerView
에서 ItemAnimator
를 설정하여 어댑터가 변경될 때 항목 모양을 애니메이션으로 표시할 수 있습니다. 기본적으로 RecyclerView
는 삭제, 추가, 이동 이벤트에 관한 기본 애니메이션을 제공하는 DefaultItemAnimator
를 사용합니다.
지연 목록에도 animateItemPlacement
수정자를 통한 유사한 개념이 있습니다.
자세한 내용은 항목 애니메이션을 참고하세요.
추가 리소스
RecyclerView
를 Compose로 이전하는 방법에 관한 자세한 내용은 다음 리소스를 참고하세요.
- 목록 및 그리드: Compose에서 목록과 그리드를 구현하는 방법에 관한 문서
- Jetpack Compose Interop: RecyclerView에서 Compose 사용:
RecyclerView
내에서 Compose를 효율적으로 사용하기 위한 블로그 게시물입니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 목록 및 그리드
CoordinatorLayout
를 Compose로 이전- 기타 고려사항