أساسيات 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مجموعات Kotlin
- أساسيات RecyclerView
- أحداث النقر في RecyclerView
- SharedPreferences
- تفضيلات DataStore
- Adapters وDiffUtil