كيفية إنشاء قائمة GridView وإضافة صور من الاستديو

السلام عليكم                                                                         

اليوم سوف نقوم بعمل قائمة مثل الlistView ولكن بشكل شبكة و تسمى GridView وهي مفيدة جدا في التعامل مع الصور مثلا اذا كنت تريد عرض قائمة من الصور بشكل شبكة فالGridView هي الحل الأمثل  .

تطبيق اليوم سوف يحتوي في الاكتيفيتي الرئيسية على Button  و GridView  والاكتيفيتي الأخرى سوف تحتوي على زر لفتح معرض الصور وبعد اختيار الصورة والعودة إلى الاكتيفيتي الرئيسية سوف تظهر الصورة في القائمة .

 قم بإنشاء كلاس باسم Photos عن طريق New > JavaClass  (سوف أشرح وظيفته لاحقا) :

 

xml custom_photo_gallery : وهذه سوف يتم عرضها في كل item في ال gridView مثل الليست فيو

كود ال xml للاياوت الأكتيفيتي الرئيسية activity_grid_list_view :

الان في الاكتيفيتي الرئيسية سوف نضع كود فتح الأكتيفيتي الأخرى باستخدام دالة onActivityResult لكي نستقبل الصورة من الاكتفيتي الثانية ونضعها في القائمة ,ولقد قمنا بشرح onActivityResult   في درس سابق ويمكنك مراجعته من هنا 

قمت بتسمية الأكتيفيتي الرئيسية بGridListView :

 في البداية عرفنا اوبجكت من gridView وقمنا باعطائه الاي دي الخاص به في الاون كريت بعدها قمنا بإنشاء اوبجكت من كلاس الأدابتر وأعطيناه في الباراميتر الأول Context والثاني ال ArrayList والتي تتكون من Objects من الكلاس Photos وكل اوبجكت واحد يمثل صورة واحدة ,بعدها نعين الادابتر لل GridView  ,وفي حدث onClick للزر  نقوم بفتح أكتيفيتي  SelectPhoto  ونستعمل startActivityForResult لكي نستقبل الصورة بعد اختيارها , في دالة onActivityResult  نقوم بالبداية التأكد من الResultCode  و requestCode  كما تعلمنا سابقا ,, بعدها ننشئ اوبجكت من كلاس  Photos ونعين ال  photo_uri وال photo_name عن طريق دالة  set  وهي تقوم بتعيين المتغير كما وضعت في الباراميتر .. أي انه الآن أصبح لدينا اوبجكت يحتوي علىUri الصورة واسم الصورة وبعدها نقوم بإضافته إلى ال ArrayList .

قم بإنشاء اكتيفيتي  باسم SelectPhoto (أو أي اسم اخر ولكن لا تنسى تغييره عند استدعاء الاكتيفيتي )

 SelectPhoto :

كود xml :

اللاياوت تحتوي على زرين وصورة و editText  عند الضغط على الزر الأول يفتح معرض الصور وبعدها في دالة onActivityResult نقوم بأخذ ال Uri من ال data وباستخدام مكتبة بيكاسو نعين الصورة لل ImageView   وعند الضغط على الزر الثاني   ننشئ انتنت جديد ونعين الداتا الخاصة به عن طريق setData  لنضع ال Uri الخاص بالصورة التي اختارها المستخدم ثم نأخذ ما كتب في ال  EditText ونستخدم  putExtra لتمرير قيمة ال  Text إلى الأكتيفيتي الأولى

دالة setResult نضع فيها  RESULT_OK و  الانتنت الذي نريد تمريره بعدها بدالة finish ننهي هذه الاكتيفيتي للعودة للاكتفيتي السابقة .

نعود لonActivityResult في GridListView  وكما ترى data.getData هي ال uri الذي وضعناه في دالة setData في اكتيفيتي SelectPhoto و photo_name هو الkey لقيمة ما كتب في ال EditText,  بعد اضافة الأوبجكت للArrayList ننشئ اوبجكت للأدابتر وسوف يقوم الأدابتر بعرض ال objects الموجودة في ال ArrayList على شكل شبكة في ال GridView

ما يهم في كلاس الأدابتر هو دالة getView في البداية نقوم باستخدام ال inflater بتعيين اللاياوت التي تظهر في كل عنصر وهي custom_photo_gallery أي أن كل عنصر سوف يحتوي على صورة و textView بعدها ننشئ اوبجكت من كلاس ViewHolder  وهو يحتوي على ال ImageView ,, TextView ثم نقوم بإعطائهما ال Id ,

دالة  setTag تأخذ باراميتر واحد يمكن أن يكون أي اوبجكت وبما أننا أعطيناها ال holder فسيصبح   convertView يحتوي على id  الخاص بال views  لذلك لن نحتاج إلى انشاء اوبجكت جديد من كلاس ViewHolder في كل مرة نضيف صورة , لأن if لن تنفذ إلا في المرة الأولى من استدعاء getView  وفي داخل ال else نقوم بتعيين ال holder إلى getTag وسترجع هذه الدالة holder الذي يحتوي على id لذلك لن نحتاج إلى إعادة تعيين ال id للصورة والتيكست فيو في كل مرة تستدعى getView وذلك سيسرع عملية عرض الصور ,

(Photos photo = mPhotos.get(position

mPhotos هي ArrayList وتحتوي على objects من نوع Photos ولكي نحصل على الصورة الحالية ننشئ اوبجكت من Photos  ونستدعي دالة get ثم نمرر ال position لل row (يعني موقع الصورة في القائمة ) ليصبح الآن photo يحتوي على معلومات الصورة

قم بتشغيل البرنامج الآن واختر أي صورة من الاستديو لتجدها في القائمة , طبعا اذا خرجت من البرنامج ستختفي كل الصور وذلك بسبب أننا لم نحفظ ال ArrayList  , ولكن سنتعلم كيفية حفظها في درس اخر إن شاءالله

أتمنى أنكم استفدتم .. ترقبوا الدروس القادمة 

عن Yaser Alosh

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

شاهد أيضاً

تطبيق تشغيل ملفات صوتية اون لاين مفتوح المصدر

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

أضف تعليقاً

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