لست فيو بالاندرويد قائمة متقدمة صورة + نص برمجياً

بسم الله الرحمن الرحيم

في هذا الدرس الأكثر من رائع, سوف نتعرف كيفية استخدام الصور في اللست فيو, في برمجة تطبيقات الاندرويد.

في البداية قدمنا دروس تكمل بعضها, تهتم ببرمجة اللست فيو وان شاء الله سوف نتعمق فيها أكثر وأكثر, فهي من أكثر العناصر استخداماً في تطبيقات الاندرويد.

الدروس السابقة في برمجة القائمة – اللست فيو -:

لو لاحظتم في البداية كنا نبرمج القائمة باستخدام لياوت رئيسية تحتوي على القائمة, واكتفتي يحمل العناصر وبرمجتها, من ثم أصبح لدينا لياوت مخصصة لتنسيق العناصر, ثم أصبح لدينا ملف خاص لاضافة العناصر داخله. والآن في درس اليوم لدينا اكتفتي اخرى مخصصة لتخصيص العناصر, سواء نصوص صور إلخ. إذا مع تقدم الدروس تتقدم خبرتنا ومعلوماتنا بعنصر القائمة اللست فيو.

# معاينة لتطبيق درس اليوم :

في البداية نقوم بإضافة الصور المطلوبة لمجلد الصور – drawable – داخل مشروعنا. واستخدمت الصور التالية :
custom_listadapter_listview_android_ image_text1

وقمت تسميتها على ترتيب معين, التسمية يجب ان تبدأ الصورة بحرف سمول باللغة الانجليزية.

كما ذكرنا في الدروس السابقة, وضعنا مصفوفة من نوع سترنج وتحتوي على نصوص العناصر صحيح !! نفسها تماماً تبقى معناً, ولكن في درس اليوم نضيف مصفوفة اخرى من نوع انتجر وفيها مسار الصور.
لكن احذر يجب أن يكون النص الأول, تابع للصورة الاولى التي يتم اضافتها, يتم قراءة العناصر من المصفوفات بالترتيب.
يعني في مصفوفة النصوص وضعت اول نص بعنوان Android إذا من مصفوفات الصور كانت القيمة الاولى هي مسار الصورة الاولى img1 .

سوف تلاحظ الكود وتشاهد بنفسك .. عموماً كي لا أطيل عليكم كثيراً سوف أسرد لكم هنا الكود المستخدم, وهو كذلك بسيط جداً نفس سابقه فقط اضافات بسيطة.

إذا لدينا الحاصل التالي :
+ اللياوت الرئيسية -activity_main.xml-: تحتوي على عنصر القائمة.

+ لياوت للعنصر -text.xml-: تنسيق عنصر القائمة, تحتوي على نص + صورة.

+ اكتفتي الرئيسية -MainActivity.java-:

بعض النقاط تم شرحها من الكود في الدروس الماضية, الجديد هنا : (النقاط التي سوف يتم تلوينها بنفس اللون اي تعني هي واحدة وإذا غيرت اسم احداها يجب تغير الاخرى لنفس الاسم)
String[] AndRody_Name // مصفوفة من نوع سترنج تحتوي على نصوص العناصر داخل القائمة.

Integer[] AndRody_img // مصفوفة من نوع انتجر تحتوي على مسارات الصور للعناصر داخل القائمة.

بالنسبة لـ :

ListAdapter adapter = new ListAdapter(this, AndRody_Name, AndRody_img);

في الدروس السابقة كانت ArrayAdapter وهو كلاس معرف اساسي في الاندرويد, وعرفنا داخله ( المحتوى, اللياوت, الآي دي, المصفوفة ). وهذا لا يفيد في درس اليوم, لأننا نحتاج لإضافة صور .. لذلك استخدمنا كلاس جديد مخصص نغيير فيه حسب حاجتنا.

لذلك استخدمنا ListAdapter وهو اسم الكلاس القادم, الذي يجب اضافته لمشروعك ووضع فيه التغيرات كما تناسبك, طبعاً هذا اسم تستطيع كتابة اي اسم تريد ولكن يجب ان يكون متوافق مع اسم الكلاس لديك في المشروع. وعرفنا داخله ( المحتوى, مصفوفة الاسماء, مصفوفة الصور).

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

+ كلاس لتخصيص المحول -ListAdapter.java-: اسمه تماماً نفس الموجود بالاكتفتي السابق, يجب ان يتوافقا الاسمين. لأنه الاول هو نفسه لاستخدام هذا الكلاس.

لاحظو بالكود السابق إنه extends ArrayAdapter اي يعني مشتق من ArrayAdapter الذي كنا نستخدمه بالدروس السابقة, فنحن هنا قمنا بعمل ملف جديد واعطيناه اسم ListAdapter وجعلناه يستخدم نفس الخصائص الخاصة بـ ArrayAdapter فقط لدينا بعض التعديلات, من أجل ربط مسار الصورة الانتجر, بالصورة داخل اللياوت لعرضها.

private final Activity context;
private final String[] name;
private final Integer[] icon;

عرفنا عناصر واعطينها اسماء من عندنا, وهي العناصر التي سوف نستخدمها لطلب العنصر واعطائه النص + الصورة الخاصة به .

public ListAdapter(Activity context, String[] Name, Integer[] Icon) {
super(context, R.layout.text, Name);

استخدام هذا الكلاس الجديد يجب ان يكون معاه محتوى + مصفوفة سترنج + مصفوفة انتجر, وهكذا نحن استخدمناه بالاكتفتي الرئيسية, قمنا بتعريف داخل ما طلبه لنستطيع استخدامه.
أما بخصوص الـ super فتم تعرف داخلها المحتوى, اللياوت, مصفوفة النصوص, بناءاً عليها يتم تحديد طول/ عدد عناصر القائمة. || R.layout.text اللياوت التي تحتوي على نص وصورة.

this.context=context;
this.name=Name;
this.icon=Icon;

هنا نخبره إن المحتوى الذي أتيت لنا به من الاكتفتى الرئيسية هو نفسه المحتوى الذي عرفناه في هذا الكلاس, وإن مصفوفة الاسماء ومصفوفة الايقون هي نفسها . والسبب اخبراه بهذا الشيء لكي تكون موجودة هنا في هذا الكلاس يستطيع التحكم فيها, وهي تؤثر على تلك في الاكتفتي الرئيسية اي يستخدمها. تابعوا الوان الكلمات لتعرفوا قصدي.

أما getView فهو المهم هنا, وهو المعرف سابقاً ولكن طلبناه هنا لنقوم بتعديلاتنا التي نريدها, ومن أجل إنشائنا كلاس جديد.

و LayoutInflater باب اخر يتم شرحه في وقت لاحق. ما يهمنا هنا : – انتبهوا جيداً ان getView لتأتي لنا بعنصر واحد, ونفس الامر يطبق على جميع العناصر.

TextView txtTitle = (TextView) Item.findViewById(R.id.tv);
ImageView Icon = (ImageView) Item.findViewById(R.id.im);

هنا تم تعريف النص الموجود داخل اللياوت الخاصة للعنصر الواحد, وتم ربطها بالنص بواسطة الآي دي ونفس الشيء مع صورة الايقونة للنص.

txtTitle.setText(name[position]);
Icon.setImageResource(icon[position]);

قلنا أو أخبرنا للنص إن يأخذ قيمة الاسم من مصفوفة الاسم, والصورة تأخذ المسار من مصفوفة الايقون. وإما position فهي لتحدد موضع واحد او مثلاً العنصر الأول هو نفسه يكون النص الاول والصورة الاولى.

+++ نحن استخدمنا مصفوفة سترنج للاسماء لانها عبارة عن نصوص , وإما انتجر لأننا وضعنا داخلها مسارات داخل المشروع وهي تدل على الصور. يوجد طرق كثيرة واستخدام انواع كثيرة ومختلفة ولكن نأخذها في مراحل متقدمة مثلاً نستطيع كذلك اخذ الاسماء مصفوفة انتجر وتكون النصوص معرفة سابقاً بالمشروع بملف السترنج مثلاً إلخ.

 

كذلك لو لاحظتم في المشروع يتم برمجة كل عنصر على حدة, في دروس قادمة سوف نتعمق أكثر وسوف نتعرف كيف بنفس الطريقة نستطيع برمجة الجميع ببرمجة عنصر واحد, اتمنى لكم الاستفادة جميعاً واعتذر على اطالة الشرح.

دعواتكم ودعمكم لنا .. وانتظرونا بكل جديد وحصري ان شاء الله والسلام عليكم 🙂

عن عبدالقادر عليوي

مواليد 1996 , سوري الجنسية, طالب علم, لدي شغوف كبير في تعلم كل ما يتعلق بالانترنت من تطوير وحماية, أحب القراءة كثيراً .. هدفي نشر العلم بشتى أنواعه ومجالاته, متابع من الدرجة الأولى لـ الدكتور ابراهيم الفقي و الشيخ أحمد ديدات – رحمهم الله -.

شاهد أيضاً

مشغل ملفات صوتية للاندرويد برمجياً اوف لاين RAW

بسم الله الرحمن الرحيم بالمشروع السابق, عرضنا لكم مشروع مشغل ملفات صوتية اون لاين بالكود …

2 تعليقان

  1. جزاك الله خيرا

  2. ممكن فيديو يشرح الدرس

اترك تعليقاً

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

7 + = 12