ย้ายข้อมูล 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 ที่คุณต้องการโดยอิงตาม RecyclerViewของ Layout 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คลาสย่อย แต่ก็อาจไม่เป็นเช่นนั้นเสมอไป ระบบจะใช้ Composable เหล่านี้เป็นตัวแทน UI สำหรับองค์ประกอบประเภทต่างๆ ในรายการ

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

    ระบบจะแทนที่ตรรกะในเมธอด onCreateViewHolder() และ onBindViewHolder() ของ RecyclerView.Adapter ด้วย 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 ที่ใช้ร่วมกันได้หลังจากแต่ละ รายการ

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 ได้ที่แหล่งข้อมูลต่อไปนี้