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

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

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

ขั้นตอนการย้ายข้อมูล

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

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

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

  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 มีแนวคิดคล้ายกันผ่านตัวแก้ไข animateItemPlacement ดูข้อมูลเพิ่มเติมที่ภาพเคลื่อนไหวของไอเทม

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

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