Di chuyển RecyclerView sang danh sách Lazy

RecyclerView là một thành phần Khung hiển thị 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 duy trì một nhóm nhỏ các khung hiển thị và sử dụng lại các khung hiển thị đó khi bạn cuộn qua các mục.

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

Các bước di chuyển

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

  1. 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ó thành phần nào trong hệ phân cấp. Đây là vùng chứa cho Danh sách lười 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 lười 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 ánh xạ đến một lớp con ViewHolder, mặc dù không phải lúc nào cũng như vậy. Các thành phần kết hợp này sẽ được dùng làm biểu diễ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ự tách biệt 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 thành phần đó – các khái niệm này được hợp nhất.

  4. Trong khe content của Danh sách lười (tham số lambda ở cuối), hãy sử dụng hàm items() (hoặc một hàm nạp chồng tương đương) để lặp lại dữ liệu cho danh sách. Trong lambda itemContent, hãy gọi mục thành phần kết hợp thích hợp cho dữ liệu:

    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 mà bạn có thể dùng để 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 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ề 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 trong danh sách trực tiếp vào thành phần. Ví dụ: để thêm dấu phân cách 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) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Ảnh động theo mục

Bạn có thể đặt ItemAnimator trên RecyclerView để tạo ảnh động cho sự xuất hiện của các mục khi có thay đổi đối với trình chuyển đổi. Theo mặc định, RecyclerView sử dụng DefaultItemAnimator cung cấp ảnh động cơ bản trên các sự kiện xoá, thêm và di chuyển.

Danh sách lười có một khái niệm tương tự thông qua công cụ sửa đổi animateItemPlacement. Xem bài viết Ảnh động theo 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: