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

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

ในฟีเจอร์เขียน คุณสามารถใช้รายการแบบเลซีเพื่อทำสิ่งเดียวกันนี้ได้ หน้านี้อธิบายวิธีย้ายข้อมูลการติดตั้งใช้งาน 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 ที่คุณต้องการโดยอิงตาม Layout Manager ของ RecyclerView (ดูตารางด้านล่าง) 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 ได้ที่แหล่งข้อมูลต่อไปนี้