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

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

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

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

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

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

مراجع إضافية

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

• القوائم والجداول: مستندات حول كيفية تنفيذ القوائم والجداول في Compose
• التوافق بين Jetpack Compose وRecyclerView: استخدام Compose في RecyclerView: مشاركة مدوّنة حول كيفية استخدام Compose بكفاءة في RecyclerView.