List View بالعربية

 

ماهي ListView؟

هي قائمة تقوم بعرض البيانات التي تريدها مثل النصوص والصور والخ..

فلنبدأ بإنشاء أول ليست فيو بسيطة والتي تحتوي على أسماء بعض المنشدين..

نقوم بالذهاب الى ملف activity_main.xml ونقوم بإنشاء ListView ونعطيها id واسمه list_view

ثم نذهب الى ملف MainActivity.java

ونعرف عنصر listView الذي أنشأناه في xml

 

الآن نقوم بتجهيز البيانات التي نريد عرضها

قمنا بإنشاء مصفوفة من نوع String وأسميناها artistsNames

الآن لكي نعطي هذه المصفوفة ل ListView نحتاج الى شيئ يسمى “Adapter محول ” يقوم بتحويل البيانات ل ListView

نقوم بإنشاء ArrayAdapter<String> والذي سيقوم بتحويل مصفوفة String الذي قمنا بإنشائها

this = الكونتيكست

android.R.layout.simple_list_item_1 = وهو الشكل الذي ستكون عليه البيانات في الليست فيو وهو شكل جاهز مقدم من فريق الأندرويد ومضمن في أندرويد ستوديو

وأخيراً artistName هي المصفوفة التي نريد تحويلها

كل ماتبقى علينا الآن هو إعطاء الليست فيو الأدابتر ليقوم بعرض البيانات

ليصبح الكود كما في الصورة

نقوم بتشغيل التطبيق لنرى النتيجة

الآن اذا أردنا ان نضغط على أي عنصر لن يحصل على أي شيئ

لفعل ذلك نقوم بإنشاء Listener ل listView

للتجربة قمت بإنشاء رسالة توست تظهر “you clicked” +  رقم العنصر الذي قمت بالضغط عليه في الليست “i”

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

فعند الضغط على Sami Yusuf يظهر لي 0

وعند الضغط على Maher Zain يظهر لي  1 وهكذا..

ولكننا الآن لنفترض أننا نريد معرفة الاسم الذي قمنا بالضغط عليه ,بمعنى اذا ضغطنا على Sami Yusuf يظهر لنا Sami Yusuf

الأمر بسيط جداً ,نفس الميثود ولكن نضع

adapterView.getItemAtPosition(i).toString()

مهمة هذه الميثود هي اخذ النص عند المكان (i) وتحويله الى String

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

جميل أليس كذلك 😀

إنشاء List View تعرض 2 TextView و ImageView واحد

حسناً الآن نريد عرض اسم المنشد وتحت الاسم نريد عرض البلد على سبيل المثال وبجانبه صورة المنشد

نبدأ بوضع الصور في مجلد Drawables

ثم نقوم بإنشاء 2 Array جديدة واحدة لأسماء البلدان وهي من نوع String والثانية من نوع Integer  لأسماء الصور التي قمنا بوضعها للتو (فكما نعلم ان drawables تخزن على هيئة int )

الآن نريد تجهيز ملف xml لعرض البيانات عليه

فكما رأينا في مثال القائمة البسيطة اننا استخدمنا ملف xml الخاص بأندرويد (android.R.layout.simple_list_item_1)

وهو مخصص فقط لعرض عنصر واحد

نقوم بإنشاء ملف xml الخاص بنا ونسميه list_row على سبيل المثال

 

ثم نقوم بتصميمه على الشكل التالي(يمكنك تخصيص الشكل كما تريد)

ونضع به 2TextView واحد لإسم المنشد والآخر للبلد

ونضع به ImageView واحد لعرض صورة المنشد

ونضع View بسيط لوضع خط يفصل بين العنصر والآخر

الآن يجب علينا إنشاء Adapter الخاص بنا (لن نستيطع استخدام نفس الأدابتر لأنه مخصص فقط لعرض Array<String> )

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

ثم نجعله ArtistAdapter extends ArrayAdapter<String> وهذا يعني أنه من نوع Adapter

ستجد أن هناك خط أحمر وهناك مشكلة,لاتقلق سنحلها لاحقا

الآن نقوم بتعريف المتغيرات التالية

Context context = الكونتيكست

String[] artistNames = مصفوفة أسماء المنشدين

String[] artistCountries = مصفوفة بلدان المنشدين

Integer[] artistImg = مصفوفة صور المنشدين

الآن نقوم بإنشاء Constructor والذي سنقوم باستدعائه في كلاس MainActivity وإعطائه المتغيرات..

نلاحظ أن Constructor يأخذ نفس البارامترات التي قمنا بإنشائها للتو!

super يأخذ ٣ بارامترات

الكونتيكست,ملف xml الذي قمنا بإنشاءه (R.layout.list_row) ,مصفوفة artistNames

ثم نقوم بإعطاء قيمة المتغيرات التي خارج constructor ونجعلها تساوي المتغيرات التي داخل constructor

الآن خارج Constructor نقوم باستدعاء الميثود getView

ثم ننشأ الصف item الذي سيتم استدعاؤه

LayoutInflater.from(context).inflate(R.layout.list_row,parent,false) = هذا السطر يقوم بعمل inflate او استدعاء لملف xml الذي قمنا بإنشاءه سابقاً

ثم نقوم بعمل return لهذا ال item

الآن قبل return نقوم بتعريف ال TextView و ImageView

وبما أننا لسنا داخل اكتفتي فيجب علينا وضع item.findViewById بدلاً من findViewById

 

ثم نبدأ بإعطاء القيم ل TextView و ImageView

position = هو مكان العنصر في array وعليه يأخذ البيانات

ليصبح شكل الكود كاملاً

الآن نعود ل MainActivity

ونقوم بإنشاء اوبجكت من ArtistAdapter ونعطيه

الكونتيكست = this

مصفوفة الأسماء = artistNames

مصفوفة البلدان = country

مصفوفة الصور = images

 

 

نلاحظ أن هذه البارامترات هي نفسها التي قمنا بإنشائها في Constructor ال ArtistAdapter

وبنفس الفكرة يمكنك تنفيذ مثلا 3 TextView و2 ImageView على سبيل المثال..

الآن لحظة الحقيقة 😀 لنجرب التطبيق

رائع أليس كذلك 😀

إنشاء أكتفتي لعرض العنصر الذي تم الضغط عليه من الليست فيو

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

نبدأ بإنشاء أكتفتي جديد ونسميه DetailActivity على سبيل المثال

 

 

ثم نقوم بالذهاب الى ملف xml الخاص ب DetailActivity لإنشاء التصميم

ثم نقوم بربط ال TextViews و ImageView في ملف الجافا DetailActivity

الآن نرجع الى كلاس MainActivity الذي به ListView وداخل ميثود onItemClickListener نقوم بإنشاء Intent الذي سيقوم بالإنتقال الى أكتفتي DetailActivity

MainActivity.this = الكونتيكست (لا يمكننا استخدام this لأننا في داخل Override)

DetailActivity.class = اسم الكلاس الذي نريد الذهاب اليه

ثم نقوم بعمل putExtra والتي مهمتها إرسال قيم عند إستخدام intent الى الكلاس المرسل اليه

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

key و value

وضعنا key أسميناه name

ثم وضعنا value وهي اسم العنصر

ثم قمنا بتشغيل الأكتفتي عبر الميثود startActivity والتي تأخذ intent الذي قمنا بإنشاءه كبارامتر

الآن نرجع الى كلاس DetailActivity

ونقوم بتعريف String والذي سيكون قيمته هي التي أرسلناها من خلال intent

وبما أن القيمة التي أرسلناها هي string قمنا باستدعاء getStringExtra وأعطيناها نفس key

الآن نقوم بعمل شرط if اذا كان الإسم theArtistName يساوي كذا فاعرض القيمة كذا

نقوم بتشغيل التطبيق لنرى النتيجة

 

بعض الملاحظات:

ال ListView غير مخصصة للإستخدام الثقيل (مئات العناصر في القائمة مثلاً) وستلاحظ بعض البطء أحيانا في ListView بسبب استهلاك الذاكرة

ولذلك قامت Google بإنشاء شيئ جديد يسمى RecyclerView والذي يقوم بإعادة تدوير العناصر في كل مرة نقوم بعمل Scroll والذي سنتظرق الى شرحه في دروس قادمة بإذن الله

في RecyclerView لن نحتاج الى عمل if else كما فعلنا في المثال الأخير وسنعتمد على كلاس Model يسهل علينا الموضوع بشكل ديناميكي أكبر

 

المشروع على github

عن 3llomi

Just A GEEK :)

شاهد أيضاً

تحميل المزيد عند السحب للأسفل | Pagination In Firebase

سنقوم في هذا الدرس بشرح عملية Pagination في Firebase باستخدام مكتبة Infinite-Fire ماهو Pagination؟ لنفترض …

اترك تعليقاً

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