شرح RecyclerView في Android

AbdulAlim Rajjoubمنذ 3 أشهر

ال 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 لإضافة المكتبة

recyclerView.thumb.png.6df62f2bbe264750701ad5784e1d3a9f.png

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

recyclerView2.png.e4cd76109895f489375c9249ca46425f.png

 

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

 

recyclerView3.thumb.png.9c984f33ce0e36a0fc4587fe8e8434ca.png

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

 

recyclerView4.png.01d949e203e23a332f8cf400e4b94281.png

 

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

 

recyclerView5.png.2a9d96b1c0b555acd28c4afb5dde1c39.png

 

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

 

recyclerview6.thumb.png.86b2ee7f4aa789da052145310cac1607.png

 

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

 

recyclerView7.png.625cb8b7b5c5be33fe774cc307b4f37c.png

 

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

 

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

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

recyclerView8.png.2cd7730876e61c815f839b834039253e.png  

 

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

 

recyclerView9.png.a1607bdcc189029121883a3a51280589.png

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

 

recyclerView10.png.a2acf4ef6b5cf330596fafda3de6ff29.png

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

 

recyclerView11.png.03f53bc1ee23929a5809ca0747362ff2.png

 

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

 

recyclerview12.png.22a65a4ac138c1726d079e813fc44694.png

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

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

 

recyclerView14.png.618447fbf40ef7ad8c3cecba700f0a5c.png

 

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

recyclerView15.thumb.png.51cf388b75b1e47dea9d18de25bcf5af.png

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

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

 

recyclerView-fgt3.png.527f47fdde3c9d25af30a1a1b31328ad.png

 

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

 

recyclerView16.thumb.png.d19b8dd401583fae50f977a0d6355440.png

 

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

 

recyclerView18.thumb.png.855fe25de42b3f4bda872727bd5dbbb3.png

 

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

recyclerView19.png.c8d249c65636fda37395dc0a5804e26b.png

 

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

 

recyclerView20.png.6aaf2888deafbebc751b22bdd96170ef.png

 

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

 

recyclerView21.png.76438ae0e84e696c44fcd0cf53bb94b6.png

 

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


Mobile mobile = mobileList.get(position);

 

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

 

recyclerView23.png.285e1c9cd09dad0eef03702f22e817c9.png

 

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

 

recyclerView_fgt.png.be81db7b4b6284e1af4566efe4f990a4.png

 

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

 

recyclerView_fgt2.png.6804f31cf03f52da77c0517b98a0b5e5.png

 

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

 

recyclerView24.png.7d2424bf4ccde15853bcb66dd1dab4f6.png

 

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

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

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

 

recyclerView25.png.6d88b55dcf80d15c5dc53b8d9d466ed0.png

 

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

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

 

recyclerView25.5.png.a879d5425163c7b7815f570a5a627ee1.png 

 

 

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

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

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

 

recyclerview26.thumb.png.7f5fa27867e800d9a0212ef44f61b36b.png

 

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

 

recyclerView28.thumb.png.342e791fa79fc02ff5403b9ab661f4e7.png

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

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

 

recyclerView29.png.791d228d99cd947d33d704875dc478e8.png

 

نعود الى 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);

 

النتيجة

 

 recyclerviewm.png.95b39efa4243656edcf614a936bd2875.png

 

الكود على Github  

كلمات دليلية:
0
إعجاب
283
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !