Di chuyển RecyclerView sang danh sách Lazy

RecyclerView là một thành phần Chế độ xem giúp dễ dàng hiển thị hiệu quả các tập dữ liệu lớn. Thay vì tạo khung hiển thị cho từng mục trong tập dữ liệu, RecyclerView 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ỏ khung hiển thị và sử dụng lại các khung hiển thị đó khi bạn di chuyển qua các mục.

Trong Compose, bạn có thể sử dụng Danh sách tải từng phần để thực hiện việc tương tự. Trang này mô tả cách bạn có thể di chuyển phương thức triển khai RecyclerView để sử dụng danh sách Lazy trong Compose.

Các bước di chuyển

Để di chuyển quá trình triển khai RecyclerView sang Compose, hãy làm theo các bước sau:

1. Đánh dấu là nội dung nhận xét hoặc xoá RecyclerView khỏi hệ phân cấp giao diện người dùng và thêm ComposeView để thay thế nếu chưa có 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>
   

2. Xác định loại thành phần kết hợp Danh sách tải từng phần mà 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 mà bạn chọn sẽ là thành phần kết hợp cấp cao nhất của ComposeView mà bạn đã thêm ở bước trước.

   LayoutManager	Thành phần kết hợp
   LinearLayoutManager	LazyColumn hoặc LazyRow
   GridLayoutManager	LazyVerticalGrid hoặc LazyHorizontalGrid
   StaggeredGridLayoutManager	LazyVerticalStaggeredGrid hoặc 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. Tạo một thành phần kết hợp tương ứng cho từng 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 với một lớp con ViewHolder, mặc dù không phải lúc nào cũng vậy. 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 trên giao diện người dùng cho nhiều loại phần tử trong danh sách:

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

   Logic trong các phương thức onCreateViewHolder() và onBindViewHolder() của RecyclerView.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ự phân tách giữa việc tạo một 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 với nhau.

4. Trong vùng content của Danh sách tải từng phần (tham số lambda theo sau), hãy sử dụng hàm items() (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 lambda itemContent, hãy gọi mục có khả năng 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)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

Các trường hợp sử dụng phổ biến

Trang trí mục

RecyclerView có khái niệm về ItemDecoration, bạn có thể dùng khái niệm này để thêm một bản vẽ đặc biệt cho các mục trong danh sách. Ví dụ: bạn có thể thêm một ItemDecoration để thêm dấu phân cách giữa các mục:

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

Compose không có khái niệm tương đương về thành phần trang trí mục. Thay vào đó, bạn có thể thêm trực tiếp mọi thành phần trang trí giao diện người dùng trong danh sách vào thành phần kết hợp. Ví dụ: để thêm đường phân chia vào danh sách, bạn có thể sử dụng composable Divider sau mỗi mục:

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

Ả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 có thay đổi đối với bộ chuyển đổi. Theo mặc định, RecyclerView sử dụng DefaultItemAnimator để cung cấp ảnh động cơ bản cho các sự kiện xoá, thêm và di chuyển.

Danh sách tải từng phần 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 về cách sử dụng Compose hiệu quả trong RecyclerView.