ย้ายข้อมูล RecyclerView ไปยังรายการแบบ Lazy

RecyclerView เป็นคอมโพเนนต์ของ View ที่ช่วยให้แสดงชุดข้อมูลขนาดใหญ่ได้อย่างมีประสิทธิภาพ แทนที่จะสร้างมุมมองสำหรับแต่ละรายการในชุดข้อมูล RecyclerView จะปรับปรุงประสิทธิภาพของแอปโดยการเก็บพูลมุมมองขนาดเล็ก และหมุนเวียนผ่านมุมมองเหล่านั้นขณะที่คุณเลื่อนดูรายการ

ใน Compose คุณสามารถใช้รายการแบบเลซีเพื่อทำสิ่งเดียวกันนี้ได้ หน้านี้จะอธิบายวิธีย้ายข้อมูลการติดตั้งใช้งาน RecyclerView เพื่อใช้ Lazy List ใน Compose

ขั้นตอนการย้ายโปรเจ็กต์

หากต้องการย้ายข้อมูลการติดตั้งใช้งาน RecyclerView ไปยัง Compose ให้ทำตามขั้นตอนต่อไปนี้

  1. แสดงความคิดเห็นหรือนำ RecyclerView ออกจากลำดับชั้น UI แล้วเพิ่ม 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>

  2. พิจารณาว่าคุณต้องการ Composable ของ Lazy list ประเภทใดโดยอิงตาม RecyclerViewLayout Manager (ดูตารางด้านล่าง) Composable ที่คุณเลือก จะเป็น Composable ระดับบนสุดของ 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
    }
}
    MigrationCommonScenariosSnippets.kt

  3. สร้าง Composable ที่สอดคล้องกันสำหรับแต่ละประเภทมุมมองในRecyclerView.Adapterการใช้งาน โดยปกติแล้ว มุมมองแต่ละประเภทจะแมปกับViewHolderคลาสย่อย แต่ก็อาจไม่เป็นเช่นนั้นเสมอไป ระบบจะใช้ Composables เหล่านี้เป็นตัวแทน UI สำหรับองค์ประกอบประเภทต่างๆ ในรายการ

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

    ระบบจะแทนที่ตรรกะในเมธอด RecyclerView.Adapter ของ onCreateViewHolder() และ onBindViewHolder() ด้วย Composable เหล่านี้และสถานะที่คุณระบุ ใน Compose จะไม่มีการแยกส่วนระหว่างการสร้าง Composable สำหรับรายการและการเชื่อมโยงข้อมูลกับรายการดังกล่าว แนวคิดเหล่านี้จะรวมกัน

  4. ภายในcontentช่องของรายการแบบ Lazy (พารามิเตอร์ Lambda ต่อท้าย) ให้ใช้ฟังก์ชัน items() (หรือการโอเวอร์โหลดที่เทียบเท่า) เพื่อวนซ้ำผ่าน ข้อมูลสำหรับรายการ ใน itemContent Lambda ให้เรียกใช้ รายการที่ประกอบได้ที่เหมาะสมสำหรับข้อมูลของคุณ

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

กรณีการใช้งานทั่วไป

การตกแต่งไอเทม

RecyclerView มีแนวคิดของ ItemDecoration ซึ่งคุณสามารถใช้เพื่อเพิ่ม การวาดภาพพิเศษสำหรับรายการในลิสต์ได้ เช่น คุณสามารถเพิ่ม ItemDecorationเพื่อเพิ่มเส้นคั่นระหว่างรายการได้

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

Compose ไม่มีแนวคิดที่เทียบเท่ากับการตกแต่งรายการ แต่คุณ สามารถเพิ่มการตกแต่ง UI ในรายการได้โดยตรงในการจัดองค์ประกอบ เช่น หากต้องการเพิ่มตัวคั่นลงในรายการ คุณสามารถใช้ Divider composable หลังแต่ละ รายการได้

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

ภาพเคลื่อนไหวของรายการ

ItemAnimatorสามารถตั้งค่าใน RecyclerView เพื่อเคลื่อนไหวลักษณะที่ปรากฏของ รายการเมื่อมีการเปลี่ยนแปลงในอแดปเตอร์ โดยค่าเริ่มต้น RecyclerView จะใช้ DefaultItemAnimator ซึ่งให้ภาพเคลื่อนไหวพื้นฐานเมื่อนำออก เพิ่ม และ ย้ายเหตุการณ์

Lazy List มีแนวคิดคล้ายกันผ่านตัวแก้ไข animateItemPlacement ดูข้อมูลเพิ่มเติมได้ที่ภาพเคลื่อนไหวของรายการ

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูล RecyclerView ไปยัง Compose ได้ที่แหล่งข้อมูลต่อไปนี้