نقل 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، يُرجى الاطّلاع على المراجع التالية: