RecyclerView
là một thành phần Khung hiển thị giúp bạn dễ dàng hiển thị các tập dữ liệu lớn một cách hiệu quả. Thay vì tạo khung hiển thị cho từng mục trong tập dữ liệu, RecyclerView
sẽ cải thiện hiệu suất của ứng dụng bằng cách giữ lại một nhóm nhỏ các khung hiển thị và tái chế khi bạn di chuyển qua các mục đó.
Trong Compose, bạn có thể sử dụng danh sách Lazy để thực hiện điều tương tự. Trang này mô tả cách bạn có thể di chuyển quá trình triển khai RecyclerView
để sử dụng danh sách Lazy trong Compose.
Các bước di chuyển
Để di chuyển cấu hình triển khai RecyclerView
sang Compose, hãy làm theo các bước sau:
Đánh dấu hoặc xoá
RecyclerView
khỏi hệ phân cấp giao diện người dùng và thêmComposeView
để thay thế nếu chưa có lớp nào trong hệ phân cấp. Đây là vùng chứa cho danh sách Lazy mà bạn sẽ thêm:<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>
Xác định loại thành phần kết hợp danh sách Lazy bạn cần dựa trên trình quản lý bố cục của
RecyclerView
(xem bảng bên dưới). Thành phần kết hợp bạn chọn sẽ là thành phần kết hợp cấp cao nhất củaComposeView
mà bạn đã thêm ở bước trước.LayoutManager
Thành phần kết hợp
LinearLayoutManager
LazyColumn
hoặcLazyRow
GridLayoutManager
LazyVerticalGrid
hoặcLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
hoặcLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Tạo một thành phần kết hợp tương ứng cho mỗi loại khung hiển thị trong quá trình triển khai
RecyclerView.Adapter
. Mỗi loại khung hiển thị thường liên kết đến một lớp conViewHolder
, mặc dù điều này không phải lúc nào cũng đúng. Các thành phần kết hợp này sẽ được dùng làm thành phần đại diện cho giao diện người dùng cho nhiều loại thành phần trong danh sách của bạn:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
Logic trong phương thức
onCreateViewHolder()
vàonBindViewHolder()
củaRecyclerView.Adapter
sẽ được thay thế bằng các thành phần kết hợp này và trạng thái mà bạn cung cấp cho chúng. Trong Compose, không có sự tách biệt giữa việc tạo thành phần kết hợp cho một mục và liên kết dữ liệu vào mục đó. Các khái niệm này được kết hợp.Trong khe
content
của danh sách Lazy (tham số lambda theo sau), hãy sử dụng hàmitems()
(hoặc một phương thức nạp chồng tương đương) để lặp lại dữ liệu cho danh sách của bạn. Trong hàm lambdaitemContent
, hãy gọi mục có thể kết hợp thích hợp cho dữ liệu của bạn:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
Các trường hợp sử dụng phổ biến
Đồ trang trí bằng vật phẩm
RecyclerView
có khái niệm về ItemDecoration
mà bạn có thể sử dụng để thêm bản vẽ đặc biệt cho các mục trong danh sách. Ví dụ: bạn có thể thêm ItemDecoration
để thêm đường phân chia giữa các mục:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose không có khái niệm tương đương về trang trí mục. Thay vào đó, bạn có thể thêm bất kỳ trang trí giao diện người dùng nào vào danh sách ngay trong thành phần kết hợp. Ví dụ: để thêm bộ chia vào danh sách, bạn có thể sử dụng thành phần kết hợp Divider
sau mỗi mục:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Ảnh động theo mục
Bạn có thể đặt ItemAnimator
trên RecyclerView
để tạo ảnh động cho giao diện của các mục khi thực hiện thay đổi đối với bộ chuyển đổi. Theo mặc định, RecyclerView
sử dụng DefaultItemAnimator
để cung cấp các ảnh động cơ bản khi xoá, thêm và di chuyển sự kiện.
Danh sách Lazy có khái niệm tương tự thông qua đối tượng sửa đổi animateItemPlacement
.
Xem phần Ảnh động của mục để tìm hiểu thêm.
Tài nguyên khác
Để biết thêm thông tin về cách di chuyển RecyclerView
sang Compose, hãy xem các tài nguyên sau:
- Danh sách và lưới: Tài liệu về cách triển khai danh sách và lưới trong Compose.
- Jetpack Compose Interop: Using Compose in a RecyclerView (Khả năng tương tác trong Jetpack Compose: Sử dụng Compose trong RecyclerView): Bài đăng trên blog để sử dụng Compose hiệu quả trong
RecyclerView
.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Danh sách và lưới
- Di chuyển
CoordinatorLayout
sang Compose - Những điểm cần cân nhắc khác