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

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

في ميزة "الإنشاء"، يمكنك استخدام القوائم غير الكاملة لتحقيق النتيجة نفسها. توضّح هذه الصفحة كيفية نقل عملية تنفيذ RecyclerView لاستخدام القوائم البطيئة loading في ميزة "الإنشاء".

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

لنقل عملية تنفيذ 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. حدِّد نوع العنصر القابل للتجميع في القائمة البطيئة الذي تحتاجه استنادًا إلى مدير تنسيق 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

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