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

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

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

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

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

  1. علِّق على RecyclerView أو أزِله من تسلسل هرمي لواجهة المستخدم وأضِف 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. حدِّد نوع العنصر القابل للإنشاء Lazy list الذي تحتاجه استنادًا إلى أداة إدارة التنسيق في 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 في القائمة Lazy (مَعلم 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()
        }
    }
}

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

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

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

مراجع إضافية

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