Recycler View بالعربي الجزء ٢ (GridLayoutManager + SearchView)

تابعنا في الجزء الأول كيفية عمل RecyclerView وإنشاء List من Model وغيرها

يمكنك متابعة الدرس من هنا

في هذا الدرس سنشرح كيف يمكننا عرض القائمة على شكل شبكي “Grid” و أيضاً على شكل قائمة أفقية

بالإضافة الى عملية البحث في List بالإعتماد على SearchView

عرض البيانات على شكل شبكي “Grid”

بالإعتماد على المثال السابق من درس RecyclerView الأول سنقوم بتعديل ملف rv_row.xml ليظهر بشكل متناسق مع الشكل الشبكي

ليظهر بهذا الشكل على سبيل المثال

ملاحظة: قمت بإزالة RelativeLayout واستبدلتها ب LinearLayout وبذلك عليك استبدالها أيضاً في MobileAdapter والا فسيظهر خطأ

نعود ل MainActivity وبدلاً من

        recyclerView.setLayoutManager(new LinearLayoutManager(this));

نستبدلها ب

recyclerView.setLayoutManager(new GridLayoutManager(this, 3));

ليصبح الكود بهذا الشكل

طبعاً رقم ٣ هو عدد الأسطر في الصف الواحد ولتبيان ذلك نقوم بتشغيل التطبيق

كما نرى كل صف يوجد به ٣ عناصر كما وضعنا في GridLayoutManager

اما في هذا الشكل فوضعنا ٤ ليظهر ٤ عناصر في الصف

عرض قائمة عادية على شكل أفقي

الأمر بسيط جداً كل ماعليك هو وضع

recyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));

ليصبح بهذا الشكل

نقوم بتشغيل التطبيق

ستظهر لدينا قائمة يمكن السحب عبرها الى اليمين واليسار

إنشاء مربع للبحث داخل ال RecyclerView

قبل أن نبدأ في التطبيق لنفهم كيف ستتم عملية البحث

سنقوم بإنشاء SearchView ومهمتها الإستماع الى أي نص يقوم بكتابته المستخدم وتعيده لنا على هيئة String

فنقوم بدورنا بأخذ هذا النص وإنشاء List جديدة تحتوي على العناصر التي تحتوي على هذه الكلمة

ثم نعطيها ل RecyclerView ونقوم بتحديث الليست

نبدأ بالتطبيق,نقوم بإنشاء SearchView في activity_main.xml ونقوم بربطه في MainActivity.Java

بعد ذلك نقوم بإنشاء ميثود تعيد لنا List<Mobile> وهي List المفلترة التي تحتوي على العناصر التي تم البحث عليها

وتأخذ ٢ بارامتر

الأول mobileList وهي List التي تحتوي على جميع البيانات التي قمنا بإنشائها في الدرس السابق

والثاني query هو النص الذي أدخله المستخدم في SearchView

ماهذا؟

قمنا بإنشاء List<Mobile> وهي ليست فارغة حاليا ولكن سيتم ملؤها لاحقا بالعناصر المفلترة

قمنا بعمل for Loop على الليست الكاملة mobileList

ثم أخذنا اسم الموبايل من هذه الليست(اسم الموبايل وليس النص الذي أدخله المستخدم)

ثم نتحقق اذا كان اسم الموبايل يحتوي على query وهو النص الذي أدخله ,اذا كان ذلك أضفه الى القائمة الفارغة (tempList)

أخير نقوم بإعادة return tempList

الآن انتهينا من الميثود ,نعود الى SearchView

ونضع OnQueryTextListener

فيقوم بعمل Override ل ٢ ميثود

الأولى onQueryTextSubmit وهي تنفذ عملية البحث فقط عن الضغط على زر البحث(المكبر في لوحة المفاتيح)

أما الثانية onQueryTextChange وهي التي سنطبق عليها تنفذ كلما تم إدخال حرف جديد نلاحظ أنها تعيد String newText وهو النص الذي أدخله المستخدم والذي سنقوم باستخدامه

 

ماهذا الكود؟

بداية نتأكد من أن searchView ليست فارغة عبر newText

                if (!newText.isEmpty()){

اذا كانت غير فارغة سنقوم بإنشاء List<Mobile> وهي تساوي الليست المفلترة(الميثود) وأعطيناه البارامتر الأول الليست الكاملة وال newText الذي أدخله المستخدم

ثم ننشئ اوبجكت من MobileAdapter الذي أنشأناه في الدرس السابق ونسمي الأوبجكت adapter1 ونعطيه الليست mobileSearchResult و الكونتيكست

بعد ذلك نستدعي الميثود notifyDatasetChanged ووظيفتها إخبار adapter أنه هنالك تغييرات قد حدثت في list (عنصر تمت إضافته حذفه تعديله الخ..)

adapter1.notifyDataSetChanged();

أخيراً نعطي recyclerView الأدابتر الجديد

recyclerView.setAdapter(adapter1);

 

أما اذا كان newText فارغ (searchView فارغة)

عندها نعيد الليست الكاملة ونعطي recyclerView الأدابتر القديم بهذا الشكل

                    recyclerView.setAdapter(adapter);

أما الآن حان وقت التجربة 😀

عند كتابة 6P يظهر لنا Nexus 6P

عند كتابة Nexus 5 يظهر لنا Nexus 5X و Nexus 5

أما عند كتابة Nexus 5D لن يظهر لنا شيئ لأنه لا يوجد عنصر بهذا الإسم

 

الكود على Github

عن 3llomi

Just A GEEK :)

شاهد أيضاً

Recycler View بالعربي

ال Recycler View هو طريقة لعرض البيانات على شكل قائمة سواء كانت أفقية او عمودية …

أضف تعليقاً

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