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

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

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

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