استخدام مكتبة Picasso لتعديل الصور في الأندرويد برمجياً

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

في الدرس الماضي قمنا باستخدام دالة onActivityResult لجلب صورة من الاستوديو ووضعها في ImageView .. لكن هناك طريقة أسهل لفعل ذلك باستخدام مكتبة بيكاسو Picasso لأنك بسطر واحد سوف تستطيع وضع الصورة في تطبيقك من خلال هذه المكتبة

تستطيع مراجعة الدرس الماضي من  هنا

في البداية عليك اضافة المكتبة إلى مشروعك … اضغط على Gradle Scripts سوف تجد ملفين باسم build.gradle أحدهم يحتوي بين القوسين على Module : app قم بالضغط عليه

اخر أسطر هذا الملف بداخل dependencies قم بإضافة هذا الكود :

compile 'com.squareup.picasso:picasso:2.5.2'

بعد ذلك ستظهر كلمة sync nowفي الأعلى قم بالضغط عليها وانتظر حتى ينتهي التزامن

اذا انتهى التزامن بدون أي أخطاء فهذا يعني بأن المكتبة تمت اضافتها بنجاح !

والآن في داخل دالة onActivityResult امسح الأكواد الموجودة لتصبح هكذا :

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if(requestCode == 1 && resultCode == RESULT_OK){
Uri photo_uri = data.getData(); }}

بعدها ضع الكود التالي :

Picasso.with(this).load(photo_uri).into(photo);

من خلال كلاس picasso  استدعينا :

with:  تأخذ باراميتر واحد وهو الكونتكس وسنضع this للإشارة إلى الاكتيفيتي الحالية

load : هنا سوف نضع  ال Uri الخاص بالصورة (تستطيع وضع ملف File , أو صورة مخزنة في مشروعك resourceId , أو مسار الصورة String Path ,أو ال Uri)

into : هنا ضع في الباراميتر ال ImageView التي تريد وضع الصورة بداخله

قم بتشغيل البرنامج وجربه

---

 

طبعا الآن ستواجهك مشكلة حجم الصورة .. لكن لا تقلق فمكتبة بيكاسو ستساعدك على تغيير حجم الصورة بكل سهولة !

باستخدام resize :

باستخدام دالة resize فقط ضع العرض والطول الذي تريده وهي تحتوي على بارامترين الأول هو width والثاني height

بامكانك استخدامها اذا كنت قد اعطيت لل ImageView عرض وطول معين .. ثم تضع في دالة resize ضعف عرض ثم ضعف طول ال ImageView ثم قم باستدعاء دالة centerCrop .

مثال : قم بتغيير طول ال imageView إلى 100 و عرضها إلى 100 أيضا بعدها بدالة resize ضع في الباراميتر الأول 200 (ضعف العرض ) وفي الثاني 200 أيضا (ضعف الطول ) ثم دالة centerCrop

ليصبح الكود هكذا :

Picasso.with(this).load(photo_uri).resize(200,200).centerCrop().into(photo);

الان ستصبح الصورة بنفس حجم ال ImageView وبدقة جيدة

قمنا بمضاعفة الطول والعرض لكي نحصل على دقة أكبر ولاحظ أنك لو قمت بوضع عرض وطول الصورة نفسها سوف تكون الصورة بجودة منخفضة

centerCrop : تملئ ال ImageView بالكامل وتقوم بقص المساحة الزائدة .. وقد لا تعرض الصورة الكاملة اذا كانت كبيرة

الآن جرب تشغيل البرنامج واختر أي صورة من الاستديو وسوف تكون مناسبة لحجم ال ImageView

---

 

استخدام fit :

نستخدمها عندما لا نضع عرض وطول معين لل ImageView مثلا لو قمت بتعيين match_parent للطول والعرض .. فمن الافضل استخدام fit لأنها تقيس أبعاد ال ImageView وبعدها تغير حجم الصورة لتناسب أبعادها

Picasso.with(this).load(photo_uri).fit().centerCrop().into(photo);

قم بتشغيل البرنامج وسترى الصورة تتناسب مع ال ImageView

---

 

ملاحظة : لا تضع wrap_content لل ImageView اذا كنت تريد استخدام fit… استخدمها مع match_parent ولا تسى استدعاء centerCrop أو centerInside اذا قمت باستخدام fit… أو استخدم resize اذا قمت بتعيين حجم معين لل ImageView باستخدام وحدة قياس DP

centerInside: تعرض الصورة بالكامل ولكن لا تملئ ال ImageView كاملة

---

 

قلب الصورة rotate : 

rotate :  تقوم بإمالة الصورة حسب الدرجة المعطاة

مثلا

Picasso.with(this).load(photo_uri).resize(200,200).rotate(90).centerCrop().into(photo);

الصورة سوف تصبح مائلة بدرجة 90 …

بامكانك استكشاف الدوال الأخرى بنفسك لتتعرف على هذه المكتبة أكثر وسوف أقوم بالمزيد من الشروحات عن هذه المكتبة قريبا ان شاء الله

و السلام عليكم