نقل RecyclerView إلى القائمة الكسولة

RecyclerView هو مكوّن View يسهّل عرض مجموعات كبيرة من البيانات بكفاءة. بدلاً من إنشاء طرق عرض لكل عنصر في مجموعة البيانات، يعمل RecyclerView على تحسين أداء تطبيقك من خلال الاحتفاظ بمجموعة صغيرة من طرق العرض وإعادة تدويرها أثناء التمرير عبر هذه العناصر.

في Compose، يمكنك استخدام القوائم الكسولة لإنجاز الأمر نفسه. توضّح هذه الصفحة كيفية نقل بيانات عملية تنفيذ RecyclerView لاستخدام القوائم الكسولة في Compose.

خطوات نقل البيانات

لنقل عملية تنفيذ RecyclerView إلى Compose، اتّبِع الخطوات التالية:

  1. يُرجى الإشارة إلى RecyclerView باعتباره تعليقًا أو إزالته من التسلسل الهرمي لواجهة المستخدم وإضافة 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
    }
}

  3. أنشئ دالة مركّبة مقابلة لكل نوع عرض في عملية تنفيذ RecyclerView.Adapter. يتم عادةً ربط كل نوع عرض بفئة فرعية من ViewHolder، ولكن قد لا يكون هذا هو الحال دائمًا. سيتم استخدام هذه الدوال المركّبة لتمثيل واجهة المستخدم لأنواع مختلفة من العناصر في قائمتك:

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

    سيتم استبدال المنطق في الطريقتَين onCreateViewHolder() وonBindViewHolder() في RecyclerView.Adapter بهذه الدوال المركّبة والحالة التي توفّرها لها. في Compose، لا يوجد فصل بين إنشاء دالة مركّبة لعنصر وربط البيانات به، فهذه المفاهيم مدمجة.

  4. ضمن خانة content في القائمة الكسولة (مَعلمة دالة lambda اللاحقة)، استخدِم دالة items() (أو دالة مكافئة) للتكرار خلال بيانات قائمتك. في دالة lambda itemContent، استدعِ العنصر المركّب المناسب لبياناتك:

    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 مفهومًا مكافئًا لزخارف العناصر. بدلاً من ذلك، يمكنك إضافة أي زخارف لواجهة المستخدم في القائمة مباشرةً في التركيب. على سبيل المثال، لإضافة فواصل إلى القائمة، يمكنك استخدام الدالة المركّبة Divider بعد كل عنصر:

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

الصور المتحركة للعناصر

Glossary: An ItemAnimator can be set on a RecyclerView to animate the appearance of items as changes are made to the adapter. يستخدم RecyclerView تلقائيًا DefaultItemAnimator الذي يوفّر صورًا متحركة أساسية في أحداث الإزالة والإضافة والنقل.

تتضمّن القوائم الكسولة مفهومًا مشابهًا من خلال المُعدِّل animateItemPlacement. لمزيد من المعلومات، يُرجى الاطّلاع على الحركات في العناصر.

مراجع إضافية

لمزيد من المعلومات حول نقل RecyclerView إلى Compose، يُرجى الاطّلاع على المراجع التالية: