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

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

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

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

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

1. ทำเครื่องหมายเป็นความคิดเห็นหรือนำ RecyclerView ออกจากลำดับชั้น UI แล้วเพิ่ม ComposeView เพื่อแทนที่หากยังไม่มีในลำดับชั้น นี่คือคอนเทนเนอร์สำหรับ Lazy list ที่คุณจะเพิ่ม

         <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 (ดูตารางด้านล่าง) คอมโพสิเบิลที่คุณเลือกจะเป็นคอมโพสิเบิลระดับบนสุดของ ComposeView ที่คุณเพิ่มในขั้นตอนก่อนหน้า

   LayoutManager	Composable
   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 แต่อาจไม่เป็นเช่นนั้นเสมอไป ระบบจะใช้ฟังก์ชันที่ประกอบกันได้เหล่านี้เป็นตัวแทน 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() (หรือโอเวอร์โหลดที่เทียบเท่า) เพื่อทำซ้ำผ่านข้อมูลสำหรับรายการของคุณ ใน Lambda itemContent ให้เรียกใช้รายการที่ประกอบกันได้ที่เหมาะสมสำหรับข้อมูลของคุณ ดังนี้

   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 ในรายการได้โดยตรงใน Composition ตัวอย่างเช่น หากต้องการเพิ่มตัวแบ่งลงในรายการ คุณสามารถใช้ Composable Divider หลังแต่ละรายการได้ ดังนี้

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

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

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

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

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

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

• รายการและตารางกริด: เอกสารประกอบเกี่ยวกับวิธีใช้รายการและตารางกริดใน Compose
• การทำงานร่วมกันของ Jetpack Compose: การใช้ Compose ใน RecyclerView: บล็อกโพสต์สำหรับการใช้ Compose ภายใน RecyclerView อย่างมีประสิทธิภาพ