RecyclerView
는 효율적으로 표시할 수 있는 뷰 구성요소입니다.
대규모 데이터 세트입니다. 데이터 세트의 각 항목에 대한 뷰를 만드는 대신
RecyclerView
은(는) 적은 수의 풀을 유지하여 앱 성능을 개선합니다.
항목을 스크롤하면서 재활용할 수 있습니다.
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로 이전하는 방법에 관한 자세한 내용은 다음을 참고하세요.
다음 리소스를 참고하세요.
- 목록 및 그리드: 편지쓰기를 클릭합니다.
- Jetpack Compose Interop: RecyclerView에서 Compose 사용:
RecyclerView
내에서 Compose를 효율적으로 사용하기 위한 블로그 게시물입니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 목록 및 그리드
- Compose로
CoordinatorLayout
이전 - 기타 고려사항