شرح RecyclerView في Android

ال Recycler View هو طريقة لعرض البيانات على شكل قائمة سواء كانت أفقية او عمودية او على شكل "شبكي Grid" ويعتبر Recycler View أسرع وأخف على الذاكرة من List View حيث يتم عمل Recycler او إعادة تدوير للعناصر كلما قمنا بعمل Scroll لليست..

بداية يجب علينا وضع Recycler View في المشروع الخاص بنا فهي ظهرت حديثا ولا تتوفر ضمن Android SDK بشكل افتراضي وبالتالي علينا إضافتها بشكل يدوي نذهب الى ملف "build.gradle" (app) ونضيف السطر التالي بالنسبة لي فإني أستخدم Build Tools قديم وبالتالي سأضع هذا السطر

compile 'com.android.support:design:24.1.1'

أما اذا كنت تستخدم Build Tools حديث (25 على سبيل المثال) فضع هذا السطر

compile 'com.android.support:design:25.1.0'

ثم اضغط على Sync Now لإضافة المكتبة

سنقوم في هذا المشروع إنشاء قائمة بأجهزة "نيكسس Nexus" من الأحدث الى الأقدم وسنضع التالي: اسم الجهاز الشركة المصنعة صورة الجهاز وعند الضغط على عنصر معين سيتم الانتقال الى اكتفتي جديد يحتوي على نفس بيانات العنصر الذي تم الضغط عليه سنبدأ بتصميم Row والذي سيكون الشكل الذي سيظهر عليه كل عنصر نقوم بإنشاء ملف xml  على سبيل المثال rv_row

 

ونقوم بوضع به 2 TextView وواحد ImageView ونقوم بوضع الصور في مجلد drawable

 

الآن سنقوم بتجهيز الداتا او البيانات ليتم عرضها ولذلك سنقوم بإنشاء كلاس Model او يسميه البعض ب (POJO  (Plain Old Java Objectهذا الكلاس يمكن ان نقول عنه انه عبارة عن علبة فارغة سنضع به بعض المتغيرات ومن ثم نقوم بإنشاء Getters وهي وظيفتها أخذ القيمة و Setters ووظيفتها وضع القيمة وهذا سيسهل علينا بشكل كبير والجميل في الموضوع أنه يمكننا وضع أكثر من نوع متغير String int boolean الخ.. نقوم بإنشاء كلاس جافا عادي نسميه Mobile مثلا

 

 

سيكون كلاس فارغ بداخله سنقوم بتعريف المتغيرات التالية اسم الموبايل mobileName من نوع String اسم الشركة mobileManufacture من نوع String صورة الموبايل mobile image من نوع int (سيتم استدعاؤه من مجلد drawable)

 

 

سنقوم بإنشاء ال getters & setters في نفس الكلاس تحت المتغيرات نقوم بالضغط على زر Alt+Insert ستظهر لنا قائمة نحتار Getter and Setter بعد ذلك نختار ال 3 متغيرات ثم OK  

 

 

الآن تم إنشاء Getter and Setter

 

 

جميل جداً الآن عندما نريد وضع اسم الموبايل على سبيل المثال سنستدعي الميثود setMobileName وهكذا

 

وعندما نريد جلب القيمة نستدعي الميثود getMobileName .

إنتهينا من كلاس Model نعود لل MainActivity نقوم بإنشاء List ولكن هذه المرة ليست List<String> بل List<Mobile> ثم نقوم بإنشاء اوبجكت من كلاس Mobile الذي أنشأناه لنستطيع وضع القيم داخله

 

 

الآن نبدأ بوضع القيم داخل mobile,وعند كتابة mobile. ستبدأ setters و getters بالظهور

 

نبدأ بوضع البيانات

 

ونكرر نفس العملية على باقي العناصر ولكن نغير اسم mobile الى mobile1 mobile2 وهكذا..

 

 

ثم نبدأ بإضافة هذه mobile الى الليست

 

الآن نقوم بإنشاء Adapter ليقوم بتحويل هذه البيانات ل Recycler View .

نقوم بإنشاء كلاس جديد نسميه MobileAdapter مثلا

 

 

وفي داخله سنقوم بإنشاء كلاس نسميه MobileHolder وهو Holder الذي سيكون مسؤول عن TextView و ImageView ونجعله extends RecyclerView.ViewHolder سنجد أنه يوجد خطأ نقوم بالضغط على Alt+Enter ثم اختيار  Create Constructor matching super

وسيقوم بإنشاء Constuctor بشكل اوتوماتيكي.

  نعود الى كلاس MobileAdapter ونجعله extends RecyclerView.Adapter<MobileAdapter.MobileHolder> ملاحظة: اذا قمت بتسميه الكلاس باسم ثاني سيظهر لك خطأ تأكد من كتابة الاسم الكلاس الذي أنشأته

 

 

سنجد خطأ نقوم بالضغط على Alt+Enter ونختار Implement methods وسيبدأ بإنشاء ال methods الخاصة ب Recycler View

 

 

داخل MobileAdapter نقوم بإنشاء List<Mobile> و Context والذي سيتم استدعائهما عند استدعاء Adapter من MainActivity ثم نضغط على Alt+Insert لإنشاء Constructor نختار العنصرين ثم OK

 

 

نذهب الى ميثود onCreateViewHolder ونقوم بإنشاء View ونسميه row ونجعله يقوم بعمل Inflate لملف rv_row.xml الذي أنشأناه سابقاً ونقوم بإنشاء اوبجكت من MobileHolder ونسميه holder وثم نعطيه row وبدلاً من return null نقوم  بعمل return ل holder

 

نذهب الى ميثود getItemCount وبدلاً من return 0 نجعله return mobilelist.size الليست الذي قمنا بإنشاءها وذلك ليصبح طول RecyclerView بنفس حجم list

 

 

نعود الى كلاس MobileHolder نقوم بربط TextView و ImageView مع ملف xml  عبر findViewById

 

 

الآن داخل onBindViewHolder نقوم بإنشاء mobile ونعطيه list ونعطي position الخاص ب onBindViewHolder وبالتالي نستطيع التحكم بعناصر mobile

Mobile mobile = mobileList.get(position);

 

أخيراً نقوم بوضع الداتا ل TextView و ImageView عبر setText و setImageResource وكما نرى استخدمنا getters لنقوم بأخذ الداتا من list

 

 

انتهينا من Adapter نعود ل activity_main.xml وننشئ recyclerView ونعطيه id على سبيل المثال rv

 

 

و نقوم بربطها ب MainActivity

 

 

ثم سنقوم باستدعاء Adapter ونعطيه list و this للكونتيكست نلاحظ أنه يطلب نفس العنصرين الذي قمنا بإنشاءهم في Adapter (عند إنشاء constructor)

 

 

recyclerView يحتاح LayoutManager وهو الذي سيحدد طريقة عرض ال RecyclerView (بشكل افقي او عمودي او شبكي)

نقوم بإعطاءه new LinearLayoutManager(this) بهذا الشكل ستكون طريقة العرض بشكل عمودي

بعد ذلك نقوم بإعطاء adapter ل RecyclerView عبر setAdapter

 

 

أخيراً نقوم بتشغيل التطبيق

وسيظهر بهذه النتيجة  

 

 

 

 

إظهار بيانات عنصر تم الضغط عليه في أكتفتي ثاني

الآن نريد عندما يتم الضغط على أي موبايل أن يتم توجيهنا الى أكتفتي آخر يحتوي على صورة الجهاز واسمه واسم الشركة المصنعة بشكل واضح ومفصل

 نقوم بإنشاء أكتفتي جديد نسميه DetailsActivity وداخل xml نقوم بإنشاء 2 TextView وواحد ImageView ونقوم بربطهم في ملف الجافا

 

 

نعود ل rv_row.xml ونعطي id ل RelativeLayout وذلك لنستطيع الضغط على العنصر كاملاً دون ان نضغط على textView او ImageView ونقوم بتعريفه داخل MobileHolder في MobileAdapter

 

الآن عند الضغط على relativeLayout يتم إرسال اسم الموبايل + اسم الشركة + الصورة عبر intent ووضعنا key لكل عنصر ليتم استقبالهم في الأكتفتي الآخر .

أخيراً نقوم بتشغيل الأكتفتي

 

 

نعود الى DetailsActivity لنستقبل البيانات عبر intent  نقوم بتخزين النصوص على شكل String ونقوم بتخزين الصورة على شكل int

Intent intent = getIntent();
String theName = intent.getStringExtra("name");
String theManufacture = intent.getStringExtra("manufacture");
int theImg = intent.getIntExtra("img", 0);

 

أخيراً نقوم بوضع البيانات في TextView و ImageView

mobileName.setText(theName);
mobileManufacture.setText(theManufacture);
mobileImg.setImageResource(theImg);

 

النتيجة

 

 

 

الكود على Github  

كلمات دليلية: