Di chuyển RecyclerView sang danh sách Lazy

RecyclerView là một thành phần Khung hiển thị giúp bạn dễ dàng hiển thị một cách hiệu quả những tập dữ liệu lớn. Thay vì tạo chế độ xem 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ỏ lượt xem và tái chế thông qua các mục đó khi bạn cuộn qua các mục đó.

Trong Compose, bạn có thể sử dụng Danh sách lazy để thực hiện cùng việc. 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 phương thức triển khai RecyclerView sang Compose, hãy làm theo các bước sau:

  1. Đánh dấu hoặc xoá RecyclerView khỏi hệ phân cấp giao diện người dùng rồi thêm một ComposeView để thay thế nếu chưa có thuộc tính này trong hệ phân cấp. Chiến dịch này là vùng chứa cho danh sách Lazy mà bạn sẽ thêm vào:

          <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 Lazy 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 vào 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 Triển khai RecyclerView.Adapter. Mỗi loại chế độ xem thường liên kết với một ViewHolder, 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 sẽ được dùng làm đại diện cho giao diện người dùng cho các loại 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`
    }
}
    MigrationCommonScenariosSnippets.kt

    Logic trong onCreateViewHolder() của RecyclerView.Adapter và Các phương thức onBindViewHolder() sẽ được thay thế bằng các thành phần kết hợp này và mà bạn cung cấp cho họ. Trong Compose, không có sự phân tách giữa 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 đó – những khái niệm này đã liên kết.

  4. Trong khe content của danh sách Lazy (tham số lambda theo sau), sử dụng hàm items() (hoặc phương thức nạp chồng tương đương) để lặp lại theo phương thức cho danh sách của bạn. Trong hàm lambda itemContent, hãy gọi phương thức phù hợp mục có thể kết 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í 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)
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 trực tiếp bất kỳ thành phần trang trí giao diện người dùng nào vào danh sách trong cấu trúc. 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 lần mục:

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

Ảnh động theo mục

Bạn có thể đặt ItemAnimator trên RecyclerView để tạo hiệu ứng ảnh động cho giao diện của khi các thay đổi được thực hiện đối với bộ chuyển đổi. Theo mặc định, RecyclerView sử dụng DefaultItemAnimator cung cấp ả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. Hãy xem bài viết Ảnh động 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: