الهدف الأخير :
إقرأ أيضا : كتاب كامل لتعليم صناعة تطبيقات الاندرويد من الالف الى الياء
العائق و دراسة حالة :
الطريقة :
اما الزر او Button فسيأتي أسفل الـ ImageView سيأخذ wrap_content في كل من العرض و الطول و سيأخذ اسم random و لوضع الزر في الوسط سنستخدم Layout Gravity .
و بالطبع لكل من الصورة و الزر id مخصص من أجل المناداة عليهما عند الحاجة .
لننطلق الآن لإضافة مكتبة Picasso للمشروع البرمجي الخاص بنا من أجل بدئ إستخدامها، لفعل ذلك سنتوجه الى الموقع الرسمي او مكتبة Picasso على Github من أجل الإطلاع عليها و جلب الأعتماد المناسب (Dependency) المناسب من أجل إدراجها، يمكنك فعل ذلك من هنا .
نتوجه بعدها مباشرة الى Gradle Scripts ثم الى Build Gradle، سنجد بعض المشاريع المسبقة المضافة الى الى مشروع الـ Gradle، نقوم بإضافة مكتبة Picasso عبر إضافة السطر :
implementation 'com.squareup.picasso:picasso:2.71828'قم نقوم بعملية مزامنة الـ Gradle بعد ذلك :
بعد تضمين المكتبة، أصبح بإمكاننا إستخدامها، و لدينا الواجهة المثالية للإستخدام في هذا المشروع، كل ما تبقى هو إستغلال المكتبة من أجل جلب الصور من الويب عبر روابط URL و إدراجها في مكان الـ ImageView ثم تهيئة الـ Button الخاصة بالـ Random من أجل جلب صور مختلفة في كل مرة يتم النقر عليها، صور سنقوم بتنظيمها مسبقا في Arraylist تقوم بحفظ هذه الصورة ( بما اننا لا نتوفر على قواعد بيانات و لم نقم بإنشائها مسبقا فلن نستطيع حل مشكلة دراسة حالة التي اشرنا اليها سابقا ) .
دعونا نبدأ أولا بصناعة Arraylist من نوع String و تحميلها بمجموعة من روابط الصور من الويب :
ستجد الكود النهائي في الأسفل لا تقلق، في الوقت الراهن سنلتزم فقط بالصور، ما قمنا بفعله هو صناعة ArrayList من نوع String تحميل إسم imageContainer و إضافة مجموعة من الصور قمنا بإختيارها من موقع Imgur تلقائيا الى الـ ArrayList، يمكنك فعل الأمر بشكل منفصل بتنفيذ الكود التالي على سبيل المثال :
imageContainer.add("https://i.imgur.com/aIkHPPp.jpg")لكن سيتوجب عليك تكرار الكود كلما اردت إضافة صورة، لفعل الأمر بسلاسة أكبر قمنا بإدراجها على شكل Array أيضا، و قمنا بتقسيم كل صورة في سطر من أجل تسهيل قرائتها، إدراج صور جديد او حذف صور قديمة أيضا .
لنقم الآن بتحديد قيم كل من الـ ImageView و أيضا الـ Random Button :
قمنا بتهيئة كل من الـ imageView و random على شكل Public في الاعلى قبل الولوج لحدث onCreate و ذلك من أجل تسهيل الوصول إليهما من داخل المشروع ككل، ثم قمنا بربط كل متغير بقيمته او العنصر الذي سيتحكم فيه عن طريق خاصية findViewById، قمنا قبلها بعمل Cast من أجل التوافق بين القيمة و العنصر الذي يجلبه .
دعونا نقوم بتجربة بسيطة لمكتبة Picasso بتلفيق الصور رقم 1 ( اي 0 😏) من الـ ArrayList الخاصة بنا الى الـ ImageView و نرى ان كانت المكتبة تشتغل بشكل جيد :
قبل تجربة التطبيق و الإطلاع على النتيجة، نتوجه الى ملف Manifest و نضيف خاصية السماح بالإتصال بالإنترنت، لا تنسى اننا نأتي بالصور من الويب، لذلك وجب الإتصال بالإنترنت من أجل جلب الصور، اما بالنسبة للكود السابق، فسطر برمجي واحد قادر على فعل كل شيئ، نقوم بالمناداة على Picasso و تحميل load رابط الصورة التي نريد إظهارها في الـ ImageView، اخترنا العنصر رقم 0 ( اي الصورة الأولى ) من الـ ArrayList الخاصة بنا، ثما الخيار الثالث هو تحديد مكان تحميل هذه الصورة، اخترنا imageView التي قمنا بجلبها سابقا .
لإضافة السماح بالإنترنت في الـ Manifest نقوم بإضافة الكود التالي :
لنقم الآن بتشغيل التطبيق الخاص بنا و نرى النتيجة :
الهدف من هذه الخطوة هو التحقق أولا من عمل الكل، و أيضا عند بدئ التطبيق، سنحتاج إلى اظهار صورة ما، و ليس إظهارها بعد النقر على الزر، فالزر سيقوم فقط بإختيار صورة عشوائية و إظهارها، لأجل ذلك، سنبدأ الآن ببرمجة الزر Random بعد التأكد من عمل كل شيئ بالطبع .
لن نقوم بإضافة الكود على شكل Function ثم تشغيله مباشرة عند النقر على الزر، سنقوم مباشرة بكتابة الكود البرمجي على زر Random في حدث onClickListner بالشكل التالي، لا تنسى انك ستجد الكود كاملا في أسفل المقال :
ما قمنا بفعله هنا هو كتابة الكود البرمجي الخاص بنا وسط حدث setOnClickListner و هو عندما ينقر المستخدم على الزر، اما الكود البرمجي فبسيط، قمنا اولا بتحديد متغيرين، و هما العدد الادنى للـ Array الخاصة بنا و هو 0 بالطبع، و الحد الأقصى لحجمها، بما ان الـ array قد تكون ديناميكية و ليست محددة الحجم، قمنا بإختيار الحد الأقصى هو حجم size الـ Array كاملة، ثم قمنا بالمناداة على عنصر او Object من Random من أجل تجسيد رقم عشوائي ما بين min و max، ثم نقوم بتخزين ذلك العدد في متغير من نوع Integer، ثم نقوم بالمناداة على الصورة الموجودة في الـ Array و الموجودة في ترتيب تلك الصورة .
حتى الآن الكود سيشتغل لديك بشكل صحيح و عند النقر على زر Random سيقوم بجلب صورة بشكل عشوائي في كل مرة، لكن هناك عائق أمامنا، فليست كل الصور لها نفس الحجم و الأبعاد، لذلك وجب تصحيح هذا الأمر، و مكتبة Picasso توفر لنا كل شيئ، دعونا نقوم بتجربة الكود التالي :
تسمح لنا مكتبة Picasso بإضافة العديد من الخواص من أجل تعديل الصور و إدراجها في الـ ImageView، في المثال اعلاه اخترنا إضافة الـ Resize التي تسمح لنا بإضافة كل من العرض و الطول الخاص بالصورة، و من اجل منع تشوه الصور العريضة او الطويلة جدا، قمنا بإضافة خاصية centerCrop اي اخذ الصورة من المنتصف و ازالة الجوانب ان كانت الصورة كبيرة، يوجد العديد من الخواص و المميزات التي يمكنك تطبيقها من أجل الحصول على نتيجة مرضية، ستجدها كلها في توثيق مكتبة Picasso، من أجل تنظيم اكثر و سهولة اكبر لقراءة الكود، قمنا بجعل كل خاصية او ميزة من Picasso في سطر معين، يمكنك إضافة الميزات حسب المطلوب .
إن قمت بتشغيل التطبيق الآن، فسيمكنك الحصول على تطبيق يقوم بجلب الصور من الويب، و إدراجها في ImageView مع تغيير الصورة بصورة عشوائية عند النقر على زر Random .
الكود النهائي لملف MainActivity.java :
التعليقات 0
شاركنا رأيك أو استفسارك حول الموضوع