‫Android Kotlin Fundamentals 07.4: التفاعل مع عناصر RecyclerView

هذا الدرس التطبيقي حول الترميز هو جزء من دورة "أساسيات Android Kotlin". يمكنك تحقيق أقصى استفادة من هذه الدورة التدريبية إذا اتبعت ترتيب الخطوات في دروس البرمجة. يتم إدراج جميع الدروس التطبيقية حول الترميز الخاصة بالدورة التدريبية في الصفحة المقصودة للدروس التطبيقية حول الترميز في دورة Android Kotlin Fundamentals.

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

تتضمّن هذه السلسلة من الجلسات العملية ما يلي:

• ‫7.1 أساسيات RecyclerView
• ‫7.2 DiffUtil وربط البيانات باستخدام RecyclerView
• ‫7.3 GridLayout مع RecyclerView
• ‫7.4 التفاعل مع عناصر RecyclerView
• ‫7.5 العناوين في RecyclerView

مقدمة

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

في هذا الدرس التطبيقي حول الترميز، ستضيف تفاعلاً إلى RecyclerView، استنادًا إلى إصدار موسّع من تطبيق "متتبّع النوم" من السلسلة السابقة من دروس الترميز التطبيقية.

ما يجب معرفته

• إنشاء واجهة مستخدم أساسية باستخدام نشاط وقِطع وعناصر عرض
• التنقّل بين الأجزاء واستخدام safeArgs لنقل البيانات بين الأجزاء
• عرض النماذج وعوامل إنشاء النماذج وعمليات التحويل وLiveData والمراقبين المرتبطين بها
• كيفية إنشاء قاعدة بيانات Room وإنشاء عنصر الوصول إلى البيانات (DAO) وتحديد الكيانات
• كيفية استخدام الروتينات المشتركة لقاعدة البيانات والمهام الأخرى التي تستغرق وقتًا طويلاً
• كيفية تنفيذ RecyclerView أساسي باستخدام Adapter وViewHolder وتنسيق العناصر
• كيفية تنفيذ ربط البيانات في RecyclerView
• كيفية إنشاء واستخدام أدوات ربط البيانات لتحويل البيانات
• كيفية استخدام GridLayoutManager

أهداف الدورة التعليمية

• كيفية جعل العناصر في RecyclerView قابلة للنقر نفِّذ أداة معالجة نقرات للانتقال إلى عرض تفصيلي عند النقر على عنصر.

الإجراءات التي ستنفذّها

• استند إلى إصدار موسّع من تطبيق TrackMySleepQuality من الدرس العملي السابق ضمن هذه السلسلة.
• أضِف أداة معالجة نقرات إلى قائمتك وابدأ في الاستماع إلى تفاعل المستخدم. عند النقر على عنصر في القائمة، يتم بدء عملية الانتقال إلى جزء يتضمّن تفاصيل حول العنصر الذي تم النقر عليه. يوفر الرمز الأولي رمزًا لجزئية التفاصيل، بالإضافة إلى رمز التنقل.

يحتوي تطبيق تتبُّع النوم الأوّلي على شاشتَين، يتم تمثيلهما بلقطات، كما هو موضّح في الشكل أدناه.

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

يستخدم هذا التطبيق بنية مبسطة تتضمّن وحدة تحكّم في واجهة المستخدم ونموذج عرض وLiveData وقاعدة بيانات Room للاحتفاظ ببيانات النوم.

في هذا الدرس العملي، ستضيف إمكانية الردّ عندما ينقر المستخدم على عنصر في الشبكة، ما يؤدي إلى ظهور شاشة تفاصيل مثل الشاشة أدناه. يتم توفير الرمز البرمجي لهذه الشاشة (الجزء ونموذج العرض والتنقّل) مع تطبيق البداية، وعليك تنفيذ آلية معالجة النقرات.

ملاحظة مهمة: يوفّر تطبيق البداية في هذا الدرس العملي نماذج إضافية وتصاميم وموارد وأدوات مساعدة غير مضمّنة في تطبيق TrackMySleepQuality النهائي من الدرس العملي السابق. ننصحك باستخدام رمز البداية المقدَّم لإكمال هذا الدرس البرمجي.

الخطوة 1: الحصول على تطبيق المبتدئين

1. نزِّل رمز RecyclerViewClickHandler-Starter من GitHub وافتح المشروع في "استوديو Android".
2. إنشاء تطبيق تتبُّع النوم الأوّلي وتشغيله

[اختياري] يمكنك تحديث تطبيقك إذا أردت استخدام التطبيق من الدرس العملي السابق.

إذا كنت ستستخدم تطبيقًا مبدئيًا متوفّرًا في GitHub لهذا الدرس العملي، انتقِل إلى الخطوة التالية.

إذا أردت مواصلة استخدام تطبيق تتبُّع النوم الذي أنشأته في الدرس العملي السابق، اتّبِع التعليمات أدناه لتعديل تطبيقك الحالي ليتضمّن الرمز البرمجي الخاص بقطعة الشاشة التفصيلية.

ملاحظة: لنسخ الملفات من نظام الملفات إلى Android Studio، يمكنك نسخها ولصقها أو سحبها وإفلاتها.

1. حتى إذا كنت ستواصل استخدام تطبيقك الحالي، احصل على الرمز البرمجي RecyclerViewClickHandler-Starter من GitHub لتتمكّن من نسخ الملفات.
2. انسخ جميع الملفات في حزمة sleepdetail.
3. في المجلد layout، انسخ الملف fragment_sleep_detail.xml.
4. انسخ المحتوى المعدَّل من navigation.xml، والذي يضيف عناصر التنقّل الخاصة بـ sleep_detail_fragment.
5. في حزمة database، ضمن SleepDatabaseDao، أضِف طريقة getNightWithId() الجديدة:
   

/**
 * Selects and returns the night with given nightId.
*/
@Query("SELECT * from daily_sleep_quality_table WHERE nightId = :key")
fun getNightWithId(key: Long): LiveData<SleepNight>

6. في res/values/strings، أضِف مورد السلسلة التالي:
   

<string name="close">Close</string>

7. نظِّف تطبيقك وأعِد إنشاءه لتعديل ربط البيانات.
   

الخطوة 2: فحص الرمز لشاشة تفاصيل النوم

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

1. في تطبيقك، ابحث عن حزمة sleepdetail. تحتوي هذه الحزمة على الجزء ونموذج العرض وواجهة برمجة تطبيقات نموذج العرض لجزء يعرض تفاصيل ليلة واحدة من النوم.
   
   
2. في حزمة sleepdetail، افتح الرمز البرمجي الخاص بـ SleepDetailViewModel وافحصه. يأخذ نموذج العرض هذا المفتاح الخاص بـ SleepNight وDAO في الدالة الإنشائية.
   
   يتضمّن نص الفئة رمزًا برمجيًا للحصول على SleepNight للمفتاح المحدّد، والمتغيّر navigateToSleepTracker للتحكّم في الرجوع إلى SleepTrackerFragment عند الضغط على الزر إغلاق.
   
   تعرض الدالة getNightWithId() القيمة LiveData<SleepNight> ويتم تعريفها في SleepDatabaseDao (في الحزمة database).
   
   
3. في حزمة sleepdetail، افتح الرمز البرمجي الخاص بـ SleepDetailFragment وافحصه. لاحظ إعداد ربط البيانات ونموذج العرض والمراقب الخاص بالتنقّل.
   
   
4. في حزمة sleepdetail، افتح الرمز البرمجي الخاص بـ SleepDetailViewModelFactory.
   
   وافحصه.
5. في مجلد التنسيق، افحص fragment_sleep_detail.xml. لاحظ المتغيّر sleepDetailViewModel المعرَّف في العلامة <data> للحصول على البيانات التي سيتم عرضها في كل طريقة عرض من نموذج طريقة العرض.
   
   يحتوي التصميم على ConstraintLayout يتضمّن ImageView لجودة النوم وTextView لتقييم الجودة وTextView لمدة النوم وButton لإغلاق جزء التفاصيل.
   
   
6. افتح ملف navigation.xml. بالنسبة إلى sleep_tracker_fragment، لاحظ الإجراء الجديد action_sleep_tracker_fragment_to_sleepDetailFragment الذي تمّت إضافته إلى sleep_detail_fragment.
   
   ، وهو الانتقال من جزء "متتبّع النوم" إلى شاشة التفاصيل.

في هذه المهمة، ستعدّل RecyclerView للاستجابة لنقرات المستخدم من خلال عرض شاشة تفاصيل للعنصر الذي تم النقر عليه.

تتألف مهمة تلقّي النقرات والتعامل معها من جزأين: أولاً، عليك الاستماع إلى النقرة وتلقّيها وتحديد العنصر الذي تم النقر عليه. بعد ذلك، عليك الردّ على النقرة بإجراء.

إذًا، ما هو أفضل مكان لإضافة أداة معالجة نقرات لهذا التطبيق؟

• يستضيف SleepTrackerFragment العديد من طرق العرض، لذا لن يخبرك الاستماع إلى أحداث النقر على مستوى الجزء بالعنصر الذي تم النقر عليه. ولن يخبرك حتى ما إذا كان العنصر الذي تم النقر عليه هو عنصر من العناصر أو أحد عناصر واجهة المستخدم الأخرى.
• عند الاستماع على مستوى RecyclerView، يصعب تحديد السلعة التي نقر عليها المستخدم في القائمة.
• أفضل وتيرة للحصول على معلومات حول عنصر تم النقر عليه هي في الكائن ViewHolder، لأنّه يمثّل عنصر قائمة واحدًا.

على الرغم من أنّ ViewHolder هو مكان رائع للاستماع إلى النقرات، إلا أنّه ليس المكان المناسب عادةً للتعامل معها. إذًا، ما هو أفضل مكان للتعامل مع النقرات؟

• تعرض Adapter عناصر البيانات في طرق العرض، لذا يمكنك التعامل مع النقرات في المحوّل. ومع ذلك، فإنّ مهمة المحوّل هي تكييف البيانات لعرضها، وليس التعامل مع منطق التطبيق.
• يجب عادةً التعامل مع النقرات في ViewModel، لأنّ ViewModel يمكنه الوصول إلى البيانات والمنطق اللازمَين لتحديد الإجراء المطلوب اتّخاذه استجابةً للنقرة.

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

الخطوة 1: إنشاء أداة معالجة نقرات وتشغيلها من تخطيط العنصر

1. في المجلد sleeptracker، افتح SleepNightAdapter.kt.
2. في نهاية الملف، على المستوى الأعلى، أنشئ فئة مستمع جديدة، SleepNightListener.

class SleepNightListener() {
    
}

3. داخل الفئة SleepNightListener، أضِف الدالة onClick(). عند النقر على طريقة العرض التي تعرض عنصر قائمة، تستدعي طريقة العرض الدالة onClick() هذه. (ستضبط السمة android:onClick للعرض لاحقًا على هذه الدالة).

class SleepNightListener() {
    fun onClick() = 
}

4. أضِف وسيطة دالة night من النوع SleepNight إلى onClick(). يعرف العرض العنصر الذي يعرضه، ويجب نقل هذه المعلومات للتعامل مع النقرة.

class SleepNightListener() {
    fun onClick(night: SleepNight) = 
}

5. لتحديد ما تفعله الدالة onClick()، عليك تقديم دالة ردّ الاتصال clickListener في الدالة الإنشائية للفئة SleepNightListener وتعيينها للدالة onClick().
   
   يساعد منح دالة lambda التي تعالج النقرة اسمًا، clickListener ، في تتبُّعها أثناء نقلها بين الفئات. لا يحتاج برنامج clickListener إلى night.nightId للوصول إلى البيانات من قاعدة البيانات. يجب أن يبدو SleepNightListener الصف المكتمل على النحو الموضّح في الرمز البرمجي أدناه.

class SleepNightListener(val clickListener: (sleepId: Long) -> Unit) {
   fun onClick(night: SleepNight) = clickListener(night.nightId)
}

6. افتح list_item_sleep_night.xml.
7. داخل الحظر data، أضِف متغيّرًا جديدًا لإتاحة الفئة SleepNightListener من خلال ربط البيانات. امنح <variable> الجديد name من clickListener. اضبط type على الاسم المؤهّل بالكامل للفئة com.example.android.trackmysleepquality.sleeptracker.SleepNightListener، كما هو موضّح أدناه. يمكنك الآن الوصول إلى الدالة onClick() في SleepNightListener من هذا التصميم.

<variable
            name="clickListener"
            type="com.example.android.trackmysleepquality.sleeptracker.SleepNightListener" />

8. للاستماع إلى النقرات على أي جزء من عنصر القائمة هذا، أضِف السمة android:onClick إلى ConstraintLayout.
   
   اضبط السمة على clickListener:onClick(sleep) باستخدام تعبير lambda لربط البيانات، كما هو موضّح أدناه:

android:onClick="@{() -> clickListener.onClick(sleep)}"

الخطوة 2: تمرير أداة معالجة النقرات إلى عنصر حاوية العرض وعنصر الربط

1. افتح الملف SleepNightAdapter.kt.
2. عدِّل الدالة الإنشائية للفئة SleepNightAdapter لتلقّي val clickListener: SleepNightListener. عندما يربط المحوّل ViewHolder، سيحتاج إلى تزويده بوظيفة معالجة النقرات هذه.

class SleepNightAdapter(val clickListener: SleepNightListener):
       ListAdapter<SleepNight, SleepNightAdapter.ViewHolder>(SleepNightDiffCallback()) {

3. في onBindViewHolder()، عدِّل طلب holder.bind() لتمرير معالج النقر إلى ViewHolder أيضًا. سيظهر لك خطأ في المترجم لأنّك أضفت مَعلمة إلى استدعاء الدالة.

holder.bind(getItem(position)!!, clickListener)

4. أضِف المَعلمة clickListener إلى bind(). لإجراء ذلك، ضَع المؤشر على الخطأ، واضغط على Alt+Enter (في نظام التشغيل Windows) أو Option+Enter (في نظام التشغيل Mac) على الخطأ، كما هو موضّح في لقطة الشاشة أدناه.
   
   

5. داخل الفئة ViewHolder، داخل الدالة bind()، خصِّص أداة معالجة النقرات للكائن binding. يظهر لك خطأ لأنّك بحاجة إلى تعديل عنصر الربط.

binding.clickListener = clickListener

6. لتعديل ربط البيانات، عليك تنظيف مشروعك ثم إعادة إنشائه. (قد تحتاج أيضًا إلى إبطال ذاكرات التخزين المؤقت). لذلك، أخذت أداة معالجة نقرات من دالة إنشاء المحوّل، ومرّرتها إلى حامل العرض وإلى كائن الربط.

الخطوة 3: عرض إشعار مؤقت عند النقر على عنصر

أصبح لديك الآن الرمز اللازم لتسجيل النقرة، ولكن لم تنفِّذ الإجراء الذي يحدث عند النقر على عنصر في القائمة. أبسط ردّ هو عرض إشعار مؤقت يعرض nightId عند النقر على عنصر. يؤكّد ذلك أنّه عند النقر على عنصر في القائمة، يتم تسجيل nightId الصحيح ونقله.

1. افتح الملف SleepTrackerFragment.kt.
2. في onCreateView()، ابحث عن المتغيّر adapter. لاحظ أنّه يعرض خطأ، لأنّه يتوقّع الآن مَعلمة مستمع نقر.
3. حدِّد أداة معالجة نقرات من خلال تمرير تعبير لامدا إلى SleepNightAdapter. تعرض دالة lambda البسيطة هذه إشعارًا مؤقتًا يعرض nightId، كما هو موضّح أدناه. عليك استيراد Toast. في ما يلي التعريف الكامل المعدَّل.

val adapter = SleepNightAdapter(SleepNightListener { nightId ->
   Toast.makeText(context, "${nightId}", Toast.LENGTH_LONG).show()
})

4. شغِّل التطبيق، وانقر على العناصر، وتأكَّد من أنّها تعرض رسالة منبثقة تتضمّن nightId الصحيح. بما أنّ العناصر تتضمّن قيم nightId متزايدة، ويعرض التطبيق الليلة الأحدث أولاً، يظهر العنصر الذي يتضمّن أدنى قيمة nightId في أسفل القائمة.

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

الخطوة 1: التنقّل عند النقر

في هذه الخطوة، بدلاً من عرض إشعار مؤقت فقط، يمكنك تغيير تعبير lambda الخاص بمعالج النقرات في onCreateView() من SleepTrackerFragment لتمرير nightId إلى SleepTrackerViewModel وتفعيل التنقّل إلى SleepDetailFragment.

حدِّد دالة معالجة النقرات:

1. افتح الملف SleepTrackerViewModel.kt.
2. داخل SleepTrackerViewModel، بالقرب من النهاية، حدِّد onSleepNightClicked()دالة معالجة النقرات.

fun onSleepNightClicked(id: Long) {

}

3. داخل onSleepNightClicked()، ابدأ التنقّل من خلال ضبط _navigateToSleepDetail على id الذي تم تمريره في ليلة النوم التي تم النقر عليها.

fun onSleepNightClicked(id: Long) {
   _navigateToSleepDetail.value = id
}

4. تنفيذ _navigateToSleepDetail. كما فعلت من قبل، حدِّد private MutableLiveData لحالة التنقّل. ويجب أن يتضمّن val يمكن الوصول إليه.

private val _navigateToSleepDetail = MutableLiveData<Long>()
val navigateToSleepDetail
   get() = _navigateToSleepDetail

5. تحديد الطريقة التي سيتم استدعاؤها بعد أن ينتهي التطبيق من التنقّل أطلِق عليها اسم onSleepDetailNavigated() واضبط قيمتها على null.

fun onSleepDetailNavigated() {
    _navigateToSleepDetail.value = null
}

أضِف الرمز التالي لاستدعاء معالج النقرات:

6. افتح الملف SleepTrackerFragment.kt وانتقِل للأسفل إلى الرمز الذي ينشئ المحوّل ويحدّد SleepNightListener لعرض إشعار مؤقت.

val adapter = SleepNightAdapter(SleepNightListener { nightId ->
   Toast.makeText(context, "${nightId}", Toast.LENGTH_LONG).show()
})

7. أضِف الرمز التالي أسفل الإشعار المؤقت لاستدعاء معالج النقر، onSleepNighClicked()، في sleepTrackerViewModel عند النقر على عنصر. مرِّر nightId، لكي يعرف نموذج العرض ليلة النوم التي يجب الحصول عليها. سيؤدي ذلك إلى حدوث خطأ لأنّك لم تحدّد قيمة onSleepNightClicked() بعد. يمكنك الاحتفاظ بالإشعار أو وضع علامة تعليق عليه أو حذفه، كما تريد.

sleepTrackerViewModel.onSleepNightClicked(nightId)

أضِف الرمز البرمجي لتتبُّع النقرات:

8. افتح SleepTrackerFragment.kt.
9. في onCreateView()، فوق تعريف manager مباشرةً، أضِف الرمز البرمجي لمراقبة navigateToSleepDetail LiveData الجديد. عندما يتغيّر navigateToSleepDetail، انتقِل إلى SleepDetailFragment، مع تمرير night، ثم استدعِ onSleepDetailNavigated() بعد ذلك. بما أنّك أجريت ذلك من قبل في تجربة عملية سابقة، إليك الرمز البرمجي:

sleepTrackerViewModel.navigateToSleepDetail.observe(this, Observer { night ->
            night?.let {
              this.findNavController().navigate(
                        SleepTrackerFragmentDirections
                                .actionSleepTrackerFragmentToSleepDetailFragment(night))
               sleepTrackerViewModel.onSleepDetailNavigated()
            }
        })

10. نفِّذ الرمز، وانقر على عنصر، و ... يتعطّل التطبيق.

التعامل مع القيم الفارغة في أدوات ربط البيانات:

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

Caused by: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkParameterIsNotNull, parameter item

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

ومع ذلك، تبيّن أنّه باستخدام آلية معالجة النقرات الجديدة هذه، أصبح من الممكن الآن استدعاء أدوات ربط البيانات بقيمة null لـ item. على وجه الخصوص، عند بدء تشغيل التطبيق، تبدأ قيمة LiveData بالقيمة null، لذا عليك إضافة عمليات التحقّق من القيم الخالية إلى كل محوّل.

12. في BindingUtils.kt، لكل محوّل ربط، غيِّر نوع وسيطة item إلى قيمة قابلة للتصغير، ثم لفّ النص البرمجي باستخدام item?.let{...}. على سبيل المثال، سيبدو المحوّل لـ sleepQualityString على النحو التالي. غيِّر المحوّلات الأخرى بالطريقة نفسها.

@BindingAdapter("sleepQualityString")
fun TextView.setSleepQualityString(item: SleepNight?) {
   item?.let {
       text = convertNumericQualityToString(item.sleepQuality, context.resources)
   }
}

13. شغِّل تطبيقك. انقر على عنصر، وسيتم فتح عرض تفصيلي.

مشروع "استوديو Android": RecyclerViewClickHandler.

لجعل العناصر في RecyclerView تستجيب للنقرات، أرفِق أدوات معالجة النقرات بعناصر القائمة في ViewHolder، وتعامل مع النقرات في ViewModel.

لجعل العناصر في RecyclerView تستجيب للنقرات، عليك إجراء ما يلي:

• أنشئ فئة مستمع تأخذ تعبير lambda وتعيّنه إلى دالة onClick().

class SleepNightListener(val clickListener: (sleepId: Long) -> Unit) {
   fun onClick(night: SleepNight) = clickListener(night.nightId)
}

• اضبط أداة معالجة النقرات على العرض.

android:onClick="@{() -> clickListener.onClick(sleep)}"

• مرِّر أداة معالجة النقرات إلى أداة إنشاء المحوّل، ثم إلى أداة عرض العناصر، وأضِفها إلى عنصر الربط.

class SleepNightAdapter(val clickListener: SleepNightListener):
       ListAdapter<DataItem, RecyclerView.ViewHolder>(SleepNightDiffCallback()

holder.bind(getItem(position)!!, clickListener)

binding.clickListener = clickListener

• في الجزء الذي يعرض طريقة العرض القابلة لإعادة الاستخدام، حيث تنشئ المحوّل، حدِّد أداة معالجة النقرات من خلال تمرير تعبير لامدا إلى المحوّل.

val adapter = SleepNightAdapter(SleepNightListener { nightId ->
      sleepTrackerViewModel.onSleepNightClicked(nightId)
})

• تنفيذ معالج النقرات في نموذج العرض بالنسبة إلى النقرات على عناصر القائمة، يؤدي ذلك عادةً إلى الانتقال إلى جزء تفاصيل.

دورة Udacity التدريبية:

• تطوير تطبيقات Android باستخدام لغة Kotlin
• برنامج تدريبي حول لغة Kotlin للمبرمجين

مستندات مطوّري تطبيقات Android:

• إنشاء قائمة باستخدام RecyclerView
• RecyclerView

يسرد هذا القسم مهامًا منزلية محتملة للطلاب الذين يعملون على هذا الدرس التطبيقي العملي كجزء من دورة تدريبية يقودها مدرّب. على المعلّم تنفيذ ما يلي:

• حدِّد واجبًا منزليًا إذا لزم الأمر.
• توضيح كيفية إرسال الواجبات المنزلية للطلاب
• وضع درجات للواجبات المنزلية

يمكن للمدرّبين استخدام هذه الاقتراحات بالقدر الذي يريدونه، ويجب ألا يترددوا في تكليف الطلاب بأي واجبات منزلية أخرى يرونها مناسبة.

إذا كنت تعمل على هذا الدرس العملي بنفسك، يمكنك استخدام مهام الواجب المنزلي هذه لاختبار معلوماتك.

الإجابة عن هذه الأسئلة

السؤال 1

لنفترض أنّ تطبيقك يحتوي على RecyclerView يعرض سلعًا في قائمة تسوّق. يحدّد تطبيقك أيضًا فئة معالجة نقرات:

class ShoppingListItemListener(val clickListener: (itemId: Long) -> Unit) {
    fun onClick(cartItem: CartItem) = clickListener(cartItem.itemId)
}

كيف يمكنك إتاحة ShoppingListItemListener لربط البيانات؟ يُرجى اختيار فئة واحدة.

▢ في ملف التصميم الذي يحتوي على RecyclerView الذي يعرض قائمة التسوّق، أضِف متغيّر <data> لـ ShoppingListItemListener.

▢ في ملف التصميم الذي يحدّد تصميم صف واحد في قائمة التسوّق، أضِف متغيّر <data> لـ ShoppingListItemListener.

▢ في فئة ShoppingListItemListener، أضِف دالة لتفعيل ربط البيانات:

fun onBinding (cartItem: CartItem) {dataBindingEnable(true)}

▢ في الفئة ShoppingListItemListener، داخل الدالة onClick()، أضِف طلبًا لتفعيل ربط البيانات:

fun onClick(cartItem: CartItem) = { 
    clickListener(cartItem.itemId)
    dataBindingEnable(true)
}

السؤال 2

أين تتم إضافة السمة android:onClick لجعل العناصر في RecyclerView تستجيب للنقرات؟ يُرجى اختيار جميع الإجابات المناسبة.

▢ في ملف التصميم الذي يعرض RecyclerView، أضِفه إلى <androidx.recyclerview.widget.RecyclerView>

▢ أضِفها إلى ملف التنسيق الخاص بعنصر في الصف. إذا كنت تريد أن يكون العنصر بأكمله قابلاً للنقر، أضِفه إلى العرض الرئيسي الذي يحتوي على العناصر في الصف.

▢ أضِفها إلى ملف التنسيق الخاص بعنصر في الصف. إذا كنت تريد أن يكون TextView واحد في العنصر قابلاً للنقر، أضِفه إلى <TextView>.

▢ أضِفها دائمًا إلى ملف التصميم الخاص بـ MainActivity.

ابدأ الدرس التالي: ‫7.5: العناوين في RecyclerView

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

تتضمّن هذه السلسلة من الجلسات العملية ما يلي:

• ‫7.1 أساسيات RecyclerView
• ‫7.2 DiffUtil وربط البيانات باستخدام RecyclerView
• ‫7.3 GridLayout مع RecyclerView
• ‫7.4 التفاعل مع عناصر RecyclerView
• ‫7.5 العناوين في RecyclerView