0Pricing
Android Academy · درس

أساسيات RecyclerView

اعرض القوائم الكبيرة بكفاءة باستخدام RecyclerView. أنشئ Adapter وViewHolder، واربط البيانات باستخدام ViewBinding.

أساسيات RecyclerView درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 2 من أصل 6. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 6 دروس في المجموع.

لماذا RecyclerView؟

يُعد RecyclerView الطريقة القياسية لعرض قائمة قابلة للتمرير من العناصر في Android.

وبخلاف ListView الأقدم، فإن RecyclerView:

  • يعيد تدوير العروض أثناء التمرير — ولا ينشئ إلا العدد الذي يتسع له إطار الشاشة
  • يدعم القوائم الرأسية والأفقية والشبكات
  • قابل للتخصيص بدرجة كبيرة باستخدام LayoutManagers

بنية RecyclerView

يحتاج RecyclerView إلى ثلاثة أجزاء ليعمل:

  • RecyclerView — الأداة الموجودة في ملف XML الخاص بالتخطيط
  • Adapter — يربط بياناتك بعروض العناصر
  • ViewHolder — يحتفظ بمراجع للعروض داخل كل عنصر في القائمة

ينشئ Adapter كائنات ViewHolder ويربط البيانات بها أثناء تمرير المستخدم.

إضافة RecyclerView إلى XML

أضف الأداة إلى التخطيط وصرّح بالتبعية في build.gradle:

<!-- In res/layout/activity_main.xml -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- app/build.gradle dependencies: -->
<!-- implementation 'androidx.recyclerview:recyclerview:1.3.2' -->

تخطيط العنصر

أنشئ ملف XML منفصلًا لكل عنصر في القائمة. على سبيل المثال، res/layout/item_fruit.xml:

<!-- res/layout/item_fruit.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvCalories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp" />

</LinearLayout>

نموذج البيانات

عرّف فئة البيانات التي تمثل كل عنصر في قائمتك:

data class Fruit(
    val name: String,
    val calories: Int
)

إنشاء Adapter

يربط Adapter بياناتك بتخطيط العنصر. ويحتوي على ثلاث دوال أساسية:

  • onCreateViewHolder — ينشئ عرض XML الخاص بالعنصر
  • onBindViewHolder — يملأ بيانات عنصر واحد
  • getItemCount — العدد الإجمالي للعناصر

تنفيذ Adapter

تنفيذ كامل ومختصر لـ RecyclerView Adapter:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class FruitAdapter(
    private val fruits: List<Fruit>
) : RecyclerView.Adapter<FruitAdapter.ViewHolder>() {

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val tvName: TextView = view.findViewById(R.id.tvName)
        val tvCalories: TextView = view.findViewById(R.id.tvCalories)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_fruit, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruits[position]
        holder.tvName.text = fruit.name
        holder.tvCalories.text = "${fruit.calories} kcal"
    }

    override fun getItemCount() = fruits.size
}

الإعداد في Activity

اربط RecyclerView وAdapter وLayoutManager معًا في Activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    val fruits = listOf(
        Fruit("Apple", 95),
        Fruit("Banana", 105),
        Fruit("Cherry", 50),
        Fruit("Mango", 202)
    )

    val adapter = FruitAdapter(fruits)

    binding.recyclerView.apply {
        this.adapter = adapter
        layoutManager = LinearLayoutManager(this@MainActivity)
    }
}

GridLayoutManager

غيّر LayoutManager لعرض شبكة بدلًا من قائمة ذات عمود واحد:

  • LinearLayoutManager — قائمة رأسية أو أفقية
  • GridLayoutManager(context, spanCount) — شبكة تحتوي على N من الأعمدة
  • StaggeredGridLayoutManager — شبكة متداخلة بأسلوب Pinterest

اختبار سريع

ما وظيفة ViewHolder في RecyclerView Adapter؟

مراجعة: أساسيات RecyclerView

يمكنك الآن عرض القوائم بكفاءة:

  • يعيد RecyclerView تدوير العروض لتحسين الأداء
  • الأجزاء الثلاثة: أداة RecyclerView وAdapter وViewHolder
  • يحدد XML الخاص بالعنصر مظهر صف أو بطاقة واحدة
  • يربط Adapter البيانات بالعروض في onBindViewHolder
  • يتحكم LayoutManager في تخطيط القائمة أو الشبكة أو التخطيط المتداخل

التالي: جعل عناصر القائمة قابلة للنقر باستخدام أحداث النقر.

الأسئلة الشائعة

هل درس «أساسيات RecyclerView» مجاني؟

نعم — نص درس «أساسيات RecyclerView» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 6 دروس في المجموع.

ماذا ستتعلم في «أساسيات RecyclerView»؟

اعرض القوائم الكبيرة بكفاءة باستخدام RecyclerView. أنشئ Adapter وViewHolder، واربط البيانات باستخدام ViewBinding. تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 6.

كم من الوقت يستغرق درس «أساسيات RecyclerView»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. مجموعات Kotlin
  2. أساسيات RecyclerView
  3. أحداث النقر في RecyclerView
  4. SharedPreferences
  5. تفضيلات DataStore
  6. Adapters وDiffUtil
← العودة إلى Android Academy