برمجة الأندرويد

الـ RecyclerView وما وراء الـ Adapters و الـ Models الجزء الأول

يمكنك إنشاء Button للتفاعل مع المستخدمين عندما يريدوا فعل أمر ما ، يمكنك إنشاء TextView لعرض نص لمستخدمى التطبيق كذلك الـ imageview لعرض صورة   وعندما يتعلق الأمر بعرض مجموعة من البيانات على هيئة قائمة أو list فان أندرويد يوفر لك الـ ListView ولأن الحياه دائما ما تتطور فتتطورت الـ listView وقام فريق الأندرويد بإصدار الـ RecycleView كنسخة محسنة ومحدثة وأفضل اداءا من الـ ListView وإن لم تكن قد تعلمت الـ RecycleView من قبل فلقد حان الوقت لفعل ذلك الان فهيا بنا نبدأ

 

ما هى الـ RecyclerView  

هى مكون كأى مكون اخر فى الأندرويد مثل الـ Button أو الـ TextView لكن هذا المكون وظيفته عرض  مجموعة من البيانات بشكل منظم .

ولا يهم هذه البيانات كثيرة أو صغيرة بسيطه كمجموعة أسماء اشخاص مثلا أو معقدة كـ مجموعة منتجات لكل منتج الكثير من  الخصائص فالـ RecycelrView تحتفظ بنفس السرعة والأداء  .

 

هل تريد إقناعى أن عرض 1000 اسم من اسماء الاشخاص فى RecycleView سيعالج بنفس الكفاءة التى يعرض فيها 9 اسماء فقط ؟ 

نعم

حسنا لماذا ؟ 

لأنه كما يدل الاسم Recycle وهو إعادة التدوير اى انه بافتراض ان أمامك شاشة تتسع لـ 9 اسماء فقط عند عرض الـ9 اسماء فيتم عرضهم بشكل عادى أما عند عرض الـ 1000 اسم وعمل Scroll فإن ما يحدث ليس إنشاء صفوف جديدة  ان ما يحدث هو أن يقوم الاندرويد بإنشاء الـ 9 صفوف ليعرض اول 9 اسماء من الـ 1000  وعندما تقوم بعمل scroll  سوف يقوم الأندرويد باستخدام نفس الـ 9 صفوف فقط سيحدث البيانات الخاصة بهم هل فهمت شيئا ؟!

عندما يقوم الأندرويد بإنشاء صف نعنى أنه قام باستخدام findViewByID لايجاد الـTextView الموجود فى الصف كذلك عند إنشاء الصف الثانى يقوم باستخدام findViewByID ايضا لإنشاء الصف الجديد وهكذا الى ان ينتهى من الـ 9 صفوف  اما عندما يكون هناك Scroll فإنه يقوم فقط بتحديث الـ Text مثلما تقوم بعمل setText  لمكون موجود من قبل ، مع كل Scroll يقوم بتحديث البيانات فقط ولا ينشىء صفوف جديدة وهو ببساطه مبدأ الـ Recycling أى إعادة التدوير واستخدام صفوف القديمة ببيانات جديدة .

 

ماذا نحتاج لإنشاء RecylerView  فى تطبيق الاندرويد  ؟

بما أنك تستخدم الـ RcyclerView لعرض البيانات فبالتأكيد ستحتاج لمصدر البيانات والذى فى مثالنا السابق List من النصوص List<Strings> (لا علاقة للـ List بـ ListView هذا شىء وهذا شىء اخر ) .

لكن لا يمكن أن تعطى البيانات مباشرة للـ RcyclerView لأنه يمكن أن يعرض اى شىء وبأى طريقة نريدها وبالتالى قد نرسل اليه قائمة من الاسماء او قائمة من الاسماء والصور او قائمة من الاسماء والصور والوصف أو اى شىء اخر ولذلك نحتاج الى ما يطلق عليه الـ Adapter ليعمل كوسيط بين مصدر البيانات وبين الـ RecyclerView .

 

 ما هو الـ Adapter  ؟

تعنى كلمة Adapter محول أو مزود حيث يطلق على شاحن الـ laptop او الـ mobile اسم الـ Adapter وذلك لانه يزود الـ laptop  بالكهرباء وكذلك الموبايل لأنك لا تستطيع وضع الموبايل فى فيشة الكهرباء ببساطه لا بد من وسيط ينقل الكهرباء باعدادات معينة وبفولت معين للموبايل حتى تتم العملية بشكل صحيح فالشاحن الخاص بأى  جهاز كهربى ليس مجرد سلك أو ووصلة تنقل الكهرباء انما ينقل الكهرباء باعدادات معينة أمبير معين وفولت معين يتوافق مع الجهاز .

وكما أنك لا تستطيع ان تستخدم شاحن الـ laptop لشحن الموبايل او العكس فكذلك الـ Adapter لكل Recyclerview يكون هناك Adapter مخصص لها  حسب البيانات التى ستعرضها لذلك عندما تنشىء RecyclerView بالتأكيد ستقوم بإنشاء Adapter خاص لها .

 

حسنا الان تعرفت على الـ RecyclerView والـ Adapter هيا بنا نبدأ فى التنفيذ بتطيق مثال عملى

كما ذكرت أنه لعمل RecyclerView ستحتاج لمصدر بيانات (قائمة اسماء ، أو قائمة ارقام أو قائمة مخصصة لاى شىء ) وستحتاج لإنشاء Adapter .

 

وسنبدأ بمصدر البيانات

 

إنشاء مَصْدَر بيانات 

يمكنك إنشاء List من الـ الاسماء او النصوص بسهولة كالتالى :

        List<String> names = new ArrayList<>();
        names.add("Ahmed");
        names.add("Ali");
        names.add("Omar");
        names.add("Said");
        names.add("Osama");

واذا لم تدرى لماذا عندما أنشأنا الـ List انشأنا كائن جديد من الـ ArrayList  ولم ننشىء List جديدة هكذا List<Strings> list = new List<>() ; فهذا لأن الـ List مجرد Interface وليس كلاس والـ ArrayList  هى كلاس تقوم بعمل implemet للـ List  لكن ليس هذا موضوعنا الان وربما نتحدث عنه لاحقا فى مقال عن الـ Collections فى جافا .

 

لكن لا اريد انشاء List من الاسماء او النصوص ماذا لو أردت إنشاء List من الـ Movies مثلا ؟ أو List من الـ Products  أو list من الـممثلين أو اى شىء اخر

ففى هذا الدرس مثلا أريد إنشاء List من الـ Movies الهندية المفضلة لدى  بكل بساطه سوف أغير النوع الخاص بالـ List كالتالى :

list

بالتأكيد يخبرنا الأندرويد ستوديو بأنها لا يوجد شىء اسمه IndianMovie  ويظهر لنا الكلمة باللون الأحمر ويعترض على عمل add للأسماء لانها Strings وهو الان يريد اضافة IndianMovie فقط وليس String لكن يمكننا تعريف ما يسمى بالـ Model أو كلاس جديد يعمل كـ Model او معرف يعرف الجافا بنوع جديد من البيانات وهو الـ IndianMovie ! لذلك قم بحذف الـ List وتعالى لنعرف الجافا على الـ IndianMovie

 

ind

 

الـ Models

سنقوم بإنشاء كلاس جديدة اسمها IndianMovie  كاالتالى :

indanmovieclass

الان نريد تعريف خصائص الفيلم الهندى IndianMovies ليتعرف عليها الأندرويد ستوديو وكذلك الجافا وبالتأكيد فإن الفيلم له اسم وله تقييم وله صورة بوستر وله قصة وقد يكون له بيانات اخرى يمكنك تعريف البيانات كما تريد لأى Model تقوم بإنشاءه سواء تقوم بإنشاء Product أو Post او اى شىء اخر .

سأقوم بتعريف البيانات التى اريدها للـ Movie كالتالى :

java model class

ولاحظ ان الـ posterImage  عباره عن int لأنى سأخزنها فى الـ IndianMovie على هيئة R.mipmap.image* وبالتالى فهى عباره عن id الصورة المخزنة وليس الصورة نفسها كما سنرى .

الان سنقوم بعمل constractur لهذا الكلاس يقوم بالتقاط البيانات عند إنشاء IndianMovie جديد كاالتالى :

desktop

لذلك عندما نريد إنشاء IndainMovie جديد سنعطيه القيم مباشرة كما سنرى لاحقا .

الأن الاندرويد ستوديو يعرف الـ IndianMovie نرجع الى موضوعنا وهو انشاء مصدر بيانات الان ستجد أنه لا مشكلة من إنشاء List من الـ IndianMovie فى الاندرويد ستوديو بعدما تعرف عليه

Screen Shot 2016-02-07 at 8.45.18 AM

حسنا الان لدينا List من الـ IndianMovie لكنها فارغه ليس بها أى Movie ولذلك سأقوم الان بإنشاء عدة مصفوفات مصفوفة للبوسترات ومصفوفة لأسماء الافلام ومصفوفة للـ rates ومصفوفة للقصة كالتالى :

Screen Shot 2016-02-07 at 9.02.11 AM

والان اصبح لدينا عدة مصفوفات واريد الان ان اقوم ببدء ملىء الـ List الخاصة بالـ Indin Movies وسنبدأ بملئها عن طريق إنشاء for loop كالتالى : for loop

فى كل دورة فى الـ for سنقوم بلإنشاء فيلم جديد واضافته للـ List

movie

الان اصبح لدينا List من الـ IndianMovies جاهزة كمصدر بيانات يمكنك إنشاء List من أى شىء كما تحب بنفس الطريقة فقط عرف كلاس كـ Model وابدأ .

يتبقى لنا أن نقوم بإنشاء الـ Adapter والـ Recycler فتابعونا فى الجزء الثانى .

السابق
Android Webservices بالعربية – الدرس السادس
التالي
الـ RecyclerView وما وراء الـ Adapters و الـ Models الجزء الثانى

29 تعليق

أضف تعليقا

  1. mohammed alhazmee قال:

    مشكور اسلوبك رائع دائما ممكن تصدر الدروس على شكل pdf

    1. Hendiware قال:

      قريبا إن شاء الله سوف نقوم بتجميع الدروس فى pdfs

  2. mohamed قال:

    شكرا جدا دروسك روعة

    1. Hendiware قال:

      نورت التدوينة يامحمد .. نتمنى لك اكودا سعيدة

  3. علي زهير قال:

    يعطيك الف عافية
    شِرح بسيط و وافي
    شكرا لك
    حسب ما فهمت منك ان الفرق بين ListView و ال RecycleView ان الثانية تقوم بحذف العناصر الغير ظاهرة في الشاشة و استدعاءها فقط عند احتياج ظهورها بالسكرول بغرض التخفيف على الرام . صحيح؟

    1. Hendiware قال:

      نعم وليس هذا الفرق فقط بل أيضا توفر الـ Recycler عدة اشياء اخرى كالـ Animation بشكل متقدم و الـ decoration وكذلك الزامية استخدام الـ ViewHolderPattern وكذلك التحكم فى ديكور كل item عبر الـ item decoration
      وايضا لم يكن يوجد طريقة مباشرة لعمل السكرول بشكل افقى فى الـ listView لكن الـ recycler توفر لك هذا بسهولة .

  4. Khalid قال:

    أحب شرحك جداً جداً
    من السطور الأولى فهمت الـ RecyclerView

    1. Hendiware قال:

      شكرا خالد ^_^
      نورت التدوينة

  5. Berkanioussama قال:

    اتمنا ان تربطوا هذا الدرس ب SQLite

    1. Hendiware قال:

      فى الحقيقة لا نخطط لفعل هذا الان لانه اذا كان سيتم شرح شىء يجب أن نقوم بشرحه بالكامل وبالتفصيل وبالتالى عمل سلسلة عن الـ SQlite لكن المبدأ واحد كل ما ستفعله انك ستجلب البيانات من الـ SQLite وتقوم بإعداد list فقط

  6. 3llomi قال:

    شرح رائع وبسيط ومفهوم شكراً لك 🙂

    1. Hendiware قال:

      نورتنا علومى 😉

  7. yussef قال:

    السلام عليكم،

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

    أخوك من المغرب.

  8. ghadeer قال:

    شكرررا جزيلا لك ع الشرح الرااائع

  9. maysara قال:

    موقع رااااااااااااااااااااااائع جدا جدا جدا
    بتمنى انكم تستمرو بهذه الكفاءة و الوتيرة
    تحيايتي @!

  10. ياسر قال:

    ايه الجمال والروعة دي..
    بارك الله فيك. وياريت لو يتم التدعيم من خلال Github بالسورس كود.

  11. Ali Hassan قال:

    يا أخي حبيتك يا أخي

  12. اشرف ابوبكر قال:

    لا اعرف ماذا اقول
    لكن شرح فوق العاده وقليلا ما يوجد في المحتوي العربي
    وفقكم الله لفعل الخير وجزاكم الله خيرا

  13. mohamed ali قال:

    شرح رائع جدا…… ممكن شرح لل maps…. bluetooth… camera…. sensor….

  14. S.E Ahmed Ali قال:

    جميل جدا مدونة رائعة

  15. Aktham قال:

    الف شكر على الشرح الجميل ولكن هل يعمل ال Recycleview مع كل اصدارات ااندرويد

  16. المبرمجة دودو قال:

    كيف ممكن اجعل الRecycleView يتم ادخال عناصرها من قبل المستخدم والعناصر المدخلة تخزن في قاعدة بيانات mysql

  17. ibrahim قال:

    هذا شرح مفهوم فعلا ولكني اواجه مشكلة في اين اضع ال list

  18. Shams Keshk قال:

    ربنا يباركلك ان شاء الله و يجعله فى ميزان حساناتك .. هو فى اختلاف شويه فى ال implement بتاع ال Adapter معنديش ال holder كل اللى عندى method واحده اسمها getVIew .. بس نفس الفكره ربنا يباركلك

  19. Mahmoud Zahran قال:

    Excellent explanation

  20. شرح رائع جدا فهمت بسلاسة شكرا لك اخي

  21. Baher.Ahmed قال:

    Very interesting ..Really thx <3

  22. bakry قال:

    شباب والله من امس وانا م قادر اطلع من الموقع فعلا كل الحاات الكنت محتاج ليها ولفيت ع كتييير من المدونات م لقيت شرح وافي وكافي كدا . فربنا يجزاكم عننا وعن كل مستفيد خيير ويوفقكم كمان وكمان ان شاءالله وكلامي م حيوفيكم حقكم واتمني المساعده باي شكل كان لاستمرار هذا العمل الجميل وشكرا

  23. hesham ahmed قال:

    شكرا جدا ليك ,انا مكنتش فاهم يعني ايه recycling view بس فهمت من شرحك البسيط,جزاك الله خيرا

اترك تعليقاً

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