Recycler View بالعربي

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

بداية يجب علينا وضع Recycler View في المشروع الخاص بنا فهي ظهرت حديثا ولا تتوفر ضمن Android Studio وبالتالي علينا إضافتها بشكل يدوي

نذهب الى ملف “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
هذا الكلاس يمكن ان نقول عنه انه عبارة عن علبة فارغة سنضع به بعض المتغيرات ومن ثم نقوم بإنشاء Getters وهي وظيفتها أخذ القيمة
و Setters ووظيفتها وضع القيمة وهذا سيسهل علينا بشكل كبير

والجميل في الموضوع أنه يمكننا وضع أكثر من نوع متغير String int boolean الخ..
نقوم بإنشاء كلاس جافا عادي نسميه Mobile مثلا

سيكون كلاس فارغ بداخله سنقوم بتعريف المتغيرات التالية

اسم الموبايل mobileName من نوع String

اسم الشركة mobileManufacture من نوع String

صورة الموبايل mobile image من نوع int

سنقوم بإنشاء ال 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

الآن داخل 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) بهذا الشكل ستكون طريقة العرض بشكل عمودي

بعد ذلك نقوم بإعطاء recyclerView نعطيها adapter

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

رائع 😀

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

نقوم بإنشاء أكتفتي جديد نسميه DetailsActivity

وداخل xml نقوم بإنشاء 2 TextView وواحد ImageView

ونقوم بربطهم في ملف الجافا

نعود ل rv_row.xml ونعطي id ل RelativeLayout وذلك لنستطيع الضغط على العنصر كاملاً دون ان نضغط على textView او ImageView

ونقوم بتعريفه داخل MobileHolder في MobileAdapter

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

ثم نقوم بتشغيل الأكتفتي

نعود الى DetailsActivity لنستقبل البيانات

نقوم بتخزين النصوص على شكل 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

 

عن 3llomi

Just A GEEK :)

شاهد أيضاً

Firebase Authentication | تسجيل الدخول باستخدام حساب فيسبوك

  بدايةً يجب عليك التوجه الى Facebook Developers والتسجيل كمطور  عبر حسابك الشخصي في فيسبوك وذلك بالضغط على …

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *