التعامل مع تطبيقات الأندرويد يتطلب في بعض الأحيانا صبرا و حنكة، و يتطلب أيضا بعض المكتبات الخارجية التي تساعدك على إنجاز بعض المهام، من المكتبات الأكثر شهرة في التعامل مع الصور هي مكتبة Picasso التي تسمح لك بإدارة الصور و إظهارها في تطبيقك بشكل إحترافي.
سيسعدنا في هذا المقال الشرحي على أكوا ويب ان نستعرض عليك طريقة إستخدام هذه المكتبة من خلال تمرين بسيط نستطيع إنجازه، و الذي سيساعدنا مستقبلا بالتأكيد بتجسيد تطبيقات كاملة و متكاملة من كل النواحي، و تذكر دائما ان البرمجة و المشروع البرمجي هما عبارة عن قطعة أحجية كبيرة و ضخمة، لا تكتمل الا بعد العمل على كل قطعة صغيرة و إيجادها بشكل عفوي، نشكر أيضا أحد أصدقاء الصفحة الذي راسلنا بخصوص تقديم مقال شرحي حول كيفية التعامل مع الصور على الويب على الأندرويد .
الهدف الأخير :
الهدف الذي نحن بصدد إنجازه في هذا المقال، هو صناعة تطبيق بسيط، ببساطة هذا التطبيق سيتضمن واجهة تعرض لنا صورة، و زر أسفلها يحمل إسم Random، ما سنقوم بفعله عند تشغيل التطبيق هو الحصول على صورة من الويب، و عند النقر على Random تقوم الصورة بالتغير، الصور سنقوم بتجميعها في Arraylist تتضمن روابط الصور من على الإنترنت و ليست روابط صور موجودة في ملف Drawables .
إقرأ أيضا : كتاب كامل لتعليم صناعة تطبيقات الاندرويد من الالف الى الياء
العائق و دراسة حالة :
العائق او المشكلة التي جعلتنا نستخدم مكتبة Picasso لهذا الغرض، هو عدم توفر القدرة لعنصر ImageView للتعامل مع روابط الصور الموجودة في الويب، إذ ان الـ ImageView في الاندرويد تدعم فقط إستدعاء و إستعراض الصور من ملف Drawables الشيئ الذي قد يكون عائقا بالنسبة لنا في العديد من المشاريع البرمجية مثل :
لنفترض انك تتعامل مع قواعد بيانات تحمل العديد من البيانات من بينها عمود في جدول معين مخصص للصور، في الغالب انت تقوم برفع الصور في موقع للرفع (imgur) مثلا، ثم تقوم بإضافتها لخانة الجدول، ماذا لو أردنا إستعراض تلك الصورة من قواعد البيانات الى تطبيقنا ؟ هنا سيظهر المشكل بشكل واضح، إذ لا يمكنك الحصول على الرابط بشكل مباشر من قواعد البيانات و تمريره للـ ImageView لأنه و كما سبق الذكر تتعامل الـ ImageView فقط مع الصور الموجودة في ملف الـ Drawables .
الطريقة :
نبدأ أولا بفتح برنامج أندرويد ستوديو او Intellij حسب الإستخدام الشخصي الخاص بك، ثم نقوم بصناعة مشروع جديد، و ننتظر الى ان يتم تهيئة المشروع بشكل كامل، بالطبع هذه طرق إعتيادية لا حاجة لإستعراضها بشكل مصور، فأنت كمبرمج أندرويد تتعامل مع هذا الأمر بشكل دائم .
بعد صناعة المشروع، نقوم أولا بصناعة و تنسيق الواجهة الخاصة بنا، كما اشرنا الواجهة ستكون بسيطة للغاية، مجرد ImageView و أسفلها زر من أجل تغيير الصور عند النقر عليها :
مثال بسيط و كود بسيط لواجهة بسيطة جدا، ما قما به في كود الواجهة، هو صناعة LinearLayout بتوجيه Vertical بحيث يسمح لنا هذا التوجيه بوضع العناصر واحدا أسفل الآخر لتنسيق أفضل، اما وسطه فأضفنا عنصرين أساسيين و هما الـ ImageView و الـ Button، الـ ImageView تسمح لنا بإظهار الصورة التي نريد، ستأخذ في العرض الشاشة كاملة، بينما في الطول طول الصورة فقط، من أجل إظهارها قمنا بالمناداة على صورة متوافرة في الأندرويد مسبقا فقط من أجل إظهار الـ ImageView و مكانها من أجل تنسيق أفضل لا اقل و لا أكثر، سنقوم بتغييرها بالطبع في الأكواد القادمة .
اما الزر او Button فسيأتي أسفل الـ ImageView سيأخذ wrap_content في كل من العرض و الطول و سيأخذ اسم random و لوضع الزر في الوسط سنستخدم Layout Gravity .
و بالطبع لكل من الصورة و الزر id مخصص من أجل المناداة عليهما عند الحاجة .
لننطلق الآن لإضافة مكتبة Picasso للمشروع البرمجي الخاص بنا من أجل بدئ إستخدامها، لفعل ذلك سنتوجه الى الموقع الرسمي او مكتبة Picasso على Github من أجل الإطلاع عليها و جلب الأعتماد المناسب (Dependency) المناسب من أجل إدراجها، يمكنك فعل ذلك من هنا .
نتوجه بعدها مباشرة الى Gradle Scripts ثم الى Build Gradle، سنجد بعض المشاريع المسبقة المضافة الى الى مشروع الـ Gradle، نقوم بإضافة مكتبة Picasso عبر إضافة السطر :
قم نقوم بعملية مزامنة الـ Gradle بعد ذلك :
بعد تضمين المكتبة، أصبح بإمكاننا إستخدامها، و لدينا الواجهة المثالية للإستخدام في هذا المشروع، كل ما تبقى هو إستغلال المكتبة من أجل جلب الصور من الويب عبر روابط URL و إدراجها في مكان الـ ImageView ثم تهيئة الـ Button الخاصة بالـ Random من أجل جلب صور مختلفة في كل مرة يتم النقر عليها، صور سنقوم بتنظيمها مسبقا في Arraylist تقوم بحفظ هذه الصورة ( بما اننا لا نتوفر على قواعد بيانات و لم نقم بإنشائها مسبقا فلن نستطيع حل مشكلة دراسة حالة التي اشرنا اليها سابقا ) .
دعونا نبدأ أولا بصناعة Arraylist من نوع String و تحميلها بمجموعة من روابط الصور من الويب :
ستجد الكود النهائي في الأسفل لا تقلق، في الوقت الراهن سنلتزم فقط بالصور، ما قمنا بفعله هو صناعة ArrayList من نوع String تحميل إسم imageContainer و إضافة مجموعة من الصور قمنا بإختيارها من موقع Imgur تلقائيا الى الـ ArrayList، يمكنك فعل الأمر بشكل منفصل بتنفيذ الكود التالي على سبيل المثال :
لكن سيتوجب عليك تكرار الكود كلما اردت إضافة صورة، لفعل الأمر بسلاسة أكبر قمنا بإدراجها على شكل 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 :
اما الزر او 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 بالشكل التالي، لا تنسى انك ستجد الكود كاملا في أسفل المقال :
حتى الآن الكود سيشتغل لديك بشكل صحيح و عند النقر على زر Random سيقوم بجلب صورة بشكل عشوائي في كل مرة، لكن هناك عائق أمامنا، فليست كل الصور لها نفس الحجم و الأبعاد، لذلك وجب تصحيح هذا الأمر، و مكتبة Picasso توفر لنا كل شيئ، دعونا نقوم بتجربة الكود التالي :
تسمح لنا مكتبة Picasso بإضافة العديد من الخواص من أجل تعديل الصور و إدراجها في الـ ImageView، في المثال اعلاه اخترنا إضافة الـ Resize التي تسمح لنا بإضافة كل من العرض و الطول الخاص بالصورة، و من اجل منع تشوه الصور العريضة او الطويلة جدا، قمنا بإضافة خاصية centerCrop اي اخذ الصورة من المنتصف و ازالة الجوانب ان كانت الصورة كبيرة، يوجد العديد من الخواص و المميزات التي يمكنك تطبيقها من أجل الحصول على نتيجة مرضية، ستجدها كلها في توثيق مكتبة Picasso، من أجل تنظيم اكثر و سهولة اكبر لقراءة الكود، قمنا بجعل كل خاصية او ميزة من Picasso في سطر معين، يمكنك إضافة الميزات حسب المطلوب .
إن قمت بتشغيل التطبيق الآن، فسيمكنك الحصول على تطبيق يقوم بجلب الصور من الويب، و إدراجها في ImageView مع تغيير الصورة بصورة عشوائية عند النقر على زر Random .
الكود النهائي لملف MainActivity.java :