ย้ายข้อมูล 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 รายการแบบเลื่อนที่คุณต้องการโดยอิงตาม RecyclerViewของ Layout Manager (ดูตารางด้านล่าง) Composable ที่คุณเลือก จะเป็น Composable ระดับบนสุดของ 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
    }
}

  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`
    }
}

    ระบบจะแทนที่ตรรกะในเมธอด 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)
        }
    }
}

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

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

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

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

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

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

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

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

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

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

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