شرح أستخدام مكتبة بيكاسو Picasso في الاندرويد

   استخدام مكتبة 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 …

شرح مكتبة  بيكاسو مع مثال في Android Studio

في Android ، يكون تحميل الصور أمرًا صعبًا حيث يتعين عليك التعامل مع طلب الشبكة والتخزين المؤقت للصور وذاكرة الصور. التحدي الكبير الآخر أثناء التخزين المؤقت للصورة هو أن أداة تحميل الصور تحتاج أيضًا إلى إجراء التشفير وفك التشفير ، خاصة مع الصور الكبيرة لأنها غير فعالة للغاية في الذاكرة وتحتاج إلى الكثير من الذاكرة لصورة واحدة كبيرة. الحل لجميع هذه التحديات هو استخدام Picasso في Android.

Picasso هي مكتبة صور لنظام Android. تم إنشاؤه وصيانته بواسطة SQUARE. يخفي بيكاسو كل التعقيدات لأنه سيتعامل مع الخيوط مرة أخرى وتحميل الصور من الإنترنت وحتى التخزين المؤقت. بيكاسو يجعل الذاكرة فعالة لتغيير حجم الصور وتحويلها. يجعل Picasso من السهل جدًا عرض الصور من المواقع البعيدة.

---

جدول المحتويات

• 1 تثبيت بيكاسو في Android:
• 2 التخزين المؤقت للصور في بيكاسو في Android:
• 3 عمليات إعادة الاتصال والأهداف في بيكاسو في Android
• 4 تغيير حجم الصورة وقياسها وملاءمتها () في بيكاسو في Android:
• 5 عناصر نائبة وأخطاء وتلاشي في بيكاسو في Android:
• 6 أولوية تحميل الصور في بيكاسو في Android
• 7 دوران للصورة في بيكاسو:
• 8 مثال Android Picasso في Android Studio:

تثبيت بيكاسو في Android

أضف مكتبة بيكاسو في تبعياتك في ملف build.gradle:

implementation 'com.squareup.picasso:picasso:2.5.0'

من أجل تحميل الصورة مع Picasso ، تحتاج إلى إذن الإنترنت في ملف Android Manifest الخاص بك.

 <uses-permission android:name="android.permission.INTERNET" />

---

التخزين المؤقت للصور في بيكاسو في Android

يعد التخزين المؤقت أمرًا مهمًا للتأكد من أن تحميل الصور فعال وأن المستخدم يتمتع بتجربة جيدة. يستخدم بيكاسو اثنين من ذاكرات
التخزين المؤقت 1.Disk cache
2.Memory cache. ذاكرة التخزين المؤقت على القرص:  إذا تم استخدام ذاكرة التخزين المؤقت في التطبيق ، فقد يتم تعطيل التطبيق عن طريق مكالمة هاتفية أو أي شيء آخر ، وسيتم تدمير ذاكرة التخزين المؤقت في الخلفية. الآن عند استئناف التطبيق ، يجب عليه معالجة كل صورة مرة أخرى هنا يتم إنقاذ ذاكرة التخزين المؤقت على القرص. يمكن استخدام ذاكرة التخزين المؤقت على القرص للمساعدة في تقليل أوقات التحميل عندما لا تكون الصور متاحة في ذاكرة التخزين المؤقت في الذاكرة ويمكن استخدامها لاستمرار معالجة الصور النقطية. هنا موضوع الخلفية يتحقق من ذاكرة التخزين المؤقت للقرص.

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

إذا كنت تقوم بتحميل صورة ، يقوم بيكاسو بتحميلها في ذاكرة التخزين المؤقت على القرص وذاكرة التخزين المؤقت. ولكن إذا كنت تقوم بتحميل الكثير من الصور ، فسيحتفظ بيكاسو بأحدث ذاكرة تخزين مؤقت في الذاكرة ويحاول الاحتفاظ بها جميعًا في ذاكرة التخزين المؤقت على القرص. من المهم ملاحظة أنه عند تحميل صورة ، سيحاول بيكاسو دائمًا ذاكرة التخزين المؤقت أولاً وإذا لم يتمكن من العثور على الصورة في ذاكرة التخزين المؤقت ، فسيحاول العثور عليها في ذاكرة التخزين المؤقت على القرص. وإذا كانت الصورة غير متوفرة في ذاكرة التخزين المؤقت على القرص ، فسيتعين عليها تحميلها من الشبكة.

---

عمليات الاسترداد والأهداف في بيكاسو في Android

يقوم بيكاسو بتحميل الصورة بطريقتين بشكل متزامن وغير متزامن.

.fetch () - سيتم تحميل الصورة بشكل غير متزامن في مؤشر ترابط في الخلفية. تقوم هذه الطريقة فقط بحفظ الصورة في القرص أو ذاكرة التخزين المؤقت. لن يتم تحميل الصورة في عرض الصورة ولن يتم إرجاع أي صورة نقطية. إذا كنت ترغب في تقليل أوقات تحميل الصور وإذا كنت تعلم أن الصورة مطلوبة بعد فترة وجيزة ، فيمكن استخدامها لملء ذاكرة التخزين المؤقت للصورة في الخلفية.

.get () - تقوم بإرجاع كائن Bitmap وتحميل الصورة بشكل متزامن. ولكنه سيؤدي إلى تجميد واجهة المستخدم إذا كنت ستستدعيها من مؤشر ترابط واجهة المستخدم.

.into (ImageView targetImageView) - يتم توفيره بواسطة Picasso حيث يمكنك تحديد Imageview الهدفالذي من المفترض أن يتم عرض الصورة فيه.

إلى جانب استخدام .into () ، هناك طريقة أخرى قدمها بيكاسو تسمى الأهداف.

حتى الآن ، استخدمنا imageView كمعامل لـ .into () ولكن يمكن أيضًا استخدامها مع Target Interface.

سوف يقوم بيكاسو بتحميل صورة ولكن هذه المرة ليس في Imageview ولكنه سيعيد الصورة النقطية لاستدعاء الهدف

target = new Target() {
  @Override
  public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
  // loadig of bitmap is successfull
  }

  @Override
  public void onBitmapFailed(Drawable errorDrawable) {
  // loading of bitmap failed
  }

  @Override
  public void onPrepareLoad(Drawable placeHolderDrawable) {


  };
  Picasso.with(getApplicationContext())

  .load("http://i.imgur.com/DvpvklR.png")

  .rotate(90f)

  .into(target);

إذا نجح الإجراء ، فستتلقى إعادة الاتصال كائن Bitmap وسنحدد ما إذا كانت الصورة تأتي من شبكة أم من ذاكرة التخزين المؤقت. لذلك كلما احتجت إلى صورة نقطية خام ، استخدم تنفيذ الهدف أو .get () لتلقي الصورة.

---

تغيير حجم الصورة وتغيير حجمها وملاءمتها () في Picasso في Android 

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

لسوء الحظ ، لطلب الصور بأبعاد مثالية ، فهذا ليس دائمًا تحت سيطرتك. إذا لم تكن الصور بالحجم المثالي ، يمكنك استخدام تغيير الحجم (أفقي ، حجم رأسي) لتغيير أبعاد صورتك إلى حجم أو حجم مناسب من اختيارك. سيساعدك هذا على تغيير حجم الصورة قبل تحميلها إلى ImageView الفعلي.

Picasso .with(context)

  .load(your image source here)

  .resize(600, 200)
  .into(imageViewResizeCenterCrop);

تحجيم الصورة: في أي معالجة للصورة ، يمكن لتغيير حجم الصورة تشويه نسبة العرض إلى الارتفاع للصورة وجعلها تبدو قبيحة. عندما أقوم بتحميل عرض للصورة وتريد دائمًا منع حدوث ذلك هنا ، يمنحك بيكاسو خيارين centreCrop () و centreInside.

centreCrop (): هو أسلوب اقتصاص يقوم بقياس حجم الصورة ، بحيث يتم اقتصاص الإضافات وتعبئة الحدود المطلوبة فقط من معاينة الصورة. قد لا يتم عرض الصورة بأكملها ولكن سيتم ملء عرض الصورة بالكامل .

Picasso
  .with(context)
  .load(your image source here)
  .resize(600, 200) // resizes the image to these dimensions (in pixel)
  .centerCrop()
  .into(imageViewResizeCenterCrop);

centreInside (): إنها تقنية اقتصاص تقيس الصور بحيث تكون الأبعاد إما مساوية أو أقل من حدود عرض الصورة المطلوب. هنا ستكون الصورة المعروضة كاملة ولكن بدون ملء imageView بالكامل.

Picasso
  .with(context)
  .load(your image source here)
  .resize(600, 200) // resizes the image to these dimensions (in pixel)
  .centerInside()
  .into(imageViewResizeCenterCrop);

Fit (): هي طريقة تقيس داخليًا أبعاد ImageView الهدف وتستخدم تغيير الحجم لتقليل حجم الصورة لتناسب أبعاد ImageView الهدف.

يجب أن تعرف شيئين عن الملاءمة (). أولاً ، قد يؤدي استدعاء fit () إلى تأخير طلب الصورة لأن بيكاسو يحتاج إلى وقت لحساب أبعاد معاينة الصورة المستهدفة. ثانيًا ، لا يمكن استخدام fit () إلا مع ImageView كهدف.

ميزة هذا هو أنه بدون التأثير على جودة الصورة ، تكون الصورة عند أدنى دقة ممكنة لها. تعني الدقة المنخفضة الاحتفاظ ببيانات أقل في ذاكرة التخزين المؤقت. لذلك في بصمة ذاكرة التطبيق الخاص بك ، يمكن أن يقلل ذلك بشكل كبير من تأثير الصور. لذا ، إذا كنت تفضل أوقات تحميل أسرع ولكن بصمة ذاكرة منخفضة ، فإن استخدام () يعد رائعًا.

Picasso

  with(context)

  .load(image source)

  .resize(600, 200)

  .fit()

  .into(imageViewResizeCenterCrop);

العناصر النائبة والأخطاء والتلاشي في Picasso في Android

PlaceHolders: إذا كنت تستخدم Picasso ، فقد يستغرق الأمر وقتًا طويلاً لتحميل الصور من الإنترنت بناءً على بيئة المستخدم. السلوك المتوقع للتطبيق هو أنه بدلاً من تحميل الصورة ، يتم تحميل Place Holder حتى يتم تحميل الصورة الفعلية. يجعل Picasso من السهل القيام بالواجهة الطلاقة التي عليك الاتصال بها فقط.

placeHolder () مع إشارة إلى رسم و Picasso سيعرض ذلك كعنصر نائب حتى يتم تحميل الصورة الفعلية.

Picasso
  with(context)

  .load(your image source here)

  .placeholder(R.mipmap.ic_launcher) // can also be a drawable

  .into(imageViewPlaceholder);

موارد التطبيق والعناصر القابلة للرسم مضمونة لتكون متاحة ويمكن الوصول إليها. لذلك لا يمكننا استخدام عنوان url على الإنترنت كمالك مكان. نظرًا لأن هذا سيكون مطلوبًا ليتم تحميله أيضًا ، ولكن بالنسبة للحمل () يقبل بيكاسو جميع أنواع القيم.

Error PlaceHolder: عندما نقوم بتحميل صورة في تطبيق باستخدام Picasso ويكون الخادم الخاص بك بطريقة ما معطلاً. يتخذ بيكاسو الإجراء المناسب بإعطاء خيار الحصول على رد اتصال خطأ.

Picasso
  with(context)

  .load("Place your image source here")

  .placeholder(R.mipmap.ic_launcher) // can also be a drawable

  .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded

  .into(imageViewError);

لذا فإن الصورة المحددة في load () ، إذا كان لا يمكن تحميلها بطريقة ما ، فسوف يعرض Picasso. Error (R.mipmap.future_studio_launcher) بدلاً من تلك الصورة والمعلمات المقبولة للخطأ () هي بالفعل موارد قابلة للرسم أو مؤشرات.

استخدام noFade (): لا يعتمد الأمر على ما إذا كنت تعرض عنصرًا نائبًا بدلاً من الصور في التطبيق أم لا ، قام بيكاسو بذلك تلقائيًا عن طريق تلاشي الصورة في ImageView لتخفيف التغيير الكبير في واجهة المستخدم الخاصة بك. إذا كنت ترغب في عدم إظهار تأثير التلاشي وعرض الصورة مباشرة دون أي تلاشي ، فعليك استدعاء nofade () على كائن بيكاسو. سيؤدي هذا إلى استدعاء صورتك دون أي تأثير باهت عليها.

Picasso
  with(context)

  .load(“place your image source”)

  .placeholder(R.mipmap.ic_launcher)// can also be a drawable

  .error(R.mipmap.future_studio_launcher)// will be displayed if the image cannot be loaded

  .noFade()

  .into(imageViewFade);

استخدام noPlaceholder (): هذا ليس له أي تأثير على العناصر النائبة الموضوعة مسبقًا. في بعض الأحيان نرغب في عرض الصورة المختلفة في نفس ImageView ولكن عندما نقوم بإنشاء مكالمة بيكاسو التالية ، فإن الصورة السابقة سوف تمسح ImageView وسيتم عرض حامل المكان الذي تم تعيينه مسبقًا بواسطة .placeholder (). قد لا يعطي هذا تجربة مستخدم جيدة إذا لاحظ المستخدم تغيرات سريعة بين الصور. لذا من الأفضل استدعاء .noPlaceholder () في مكالمة بيكاسو التالية. سيؤدي ذلك إلى الحفاظ على الصورة السابقة في مكانها حتى يتم تحميل صورتك الثانية.

أولوية تحميل الصور في بيكاسو في Android

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

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

Picasso.with(context)

  .load("image source here")

  .priority(HIGH)

  .into(someImageView);

يمكننا تعيين أولوية منخفضة للصور الأخرى في نفس الشاشة بأولوية منخفضة . بشكل افتراضي ، يكون للصور أولوية متوسطة.

Picasso.with(context)

  .load("image source here")

  .priority(Picasso.Priority.LOW)

  .into(someImageView);

ملاحظة مهمة: من المهم ملاحظة أن الأولوية لا تضمن طلبًا معينًا ولكن لصالح الطلبات ذات الأولوية العالية ، فهي تقوم فقط بإمالة الميزان نحو ذلك.

تدوير الصورة في بيكاسو:

بيكاسو لديه شيء مدمج لعرض الصور بالتناوب. هناك خياران متوفران؛

دوران بسيط:  يقوم ببساطة بتدوير الصورة بالدرجات عندما نمرر كمعامل. يمكن تمرير قيمة بين 0 إلى 360 وهذا منطقي بالفعل. يبدو استدعاء الدوران البسيط مثل التدوير (درجات تعويم)

Picasso.with(context)

  .load("image source here")

  .rotate(90f)

  .into(someImageView);

سيؤدي هذا إلى تدوير الصورة بمقدار 90 درجة.

الدوران المعقد: يكون مركز الدوران عند 0،0 حسب الاستدعاء الافتراضي كـ "نقطة محورية" في بعض الأحيان يكون هناك متطلب في التطبيق لتدوير صورة إلى نقطة محورية معينة والتي ليست مركزًا قياسيًا. يتيح بيكاسو القيام بذلك عن طريق التدوير (درجات تعويم ، ومحور عائم ، ومحور عائم Y).

Picasso.with(context)

  .load("image source here")

  .rotate(45f, 220f,100f)

  .into(someImageView);

---

مثال على مكتبة بيكاسو Picasso في Android Studio

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

يمكنك أدناه تنزيل الكود أو قراءة شرح المثال خطوة بخطوة:

كود التحميل

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

الخطوة 1 : أنشئ مشروعًا جديدًا في استوديو Android الخاص بك وقم بتسميته باسم Picasso Example

الخطوة 2 : افتح res -> layout -> xml (أو) main. xml وأضف الكود التالي:

في هذه الخطوة ، نفتح ملف XML ونضيف الرمز لعرض تخطيط في نشاطنا. في التخطيط ، استخدمنا عرضًا واحدًا للصورة سيكون عرضًا للصورة المستهدفة ، حيث سيتم عرض الصورة واستخدمت بعض الأزرار عند النقر على هذه الأزرار ، وسنقوم بعمليات مختلفة ستنعكس في معاينة الصورة.

    
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">

  <ImageView
  android:id="@+id/iv"
  android:layout_width="match_parent"
  android:layout_height="@dimen/_180sdp"
  android:layout_marginTop="@dimen/_5sdp"
  android:src="@mipmap/ic_launcher"
  />

  <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/_10sdp"
  android:gravity="center"
  android:orientation="horizontal">

  <Button
  android:id="@+id/resize"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="resize"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/centrecrop"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="centrecrop"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/centreinside"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="centreinside"
  android:textSize="@dimen/_10sdp" />


  </LinearLayout>
  <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/_10sdp"
  android:gravity="center"
  android:orientation="horizontal">

  <Button
  android:id="@+id/fit"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="fit"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/placeholder"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="placeholder"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/error"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="error"
  android:textSize="@dimen/_10sdp" />


  </LinearLayout>
  <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/_10sdp"
  android:gravity="center"
  android:orientation="horizontal">

  <Button
  android:id="@+id/fade"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="no fade"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/callback"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="callback"
  android:textSize="@dimen/_10sdp" />

  <Button
  android:id="@+id/rotate"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="rotate"
  android:textSize="@dimen/_10sdp" />

  </LinearLayout>

  <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="@dimen/_10sdp"
  android:orientation="horizontal">

  <Button
  android:id="@+id/complexrotation"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Complex Rotation"
  android:textSize="@dimen/_10sdp" />
  </LinearLayout>
  </LinearLayout>

الخطوة 3 : افتح src -> package -> MainActivity. جافا

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

import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;
  import android.widget.ImageView;
  import android.widget.Toast;

  import com.squareup.picasso.Picasso;

  public class MainActivity extends AppCompatActivity {
  Button resize, centrecrop, centreinside, fit, placeholder, error, fade, callback, rotate,complexrotate;
  ImageView iv;


  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  resize = findViewById(R.id.resize);
  centrecrop = findViewById(R.id.centrecrop);
  centreinside = findViewById(R.id.centreinside);
  fit = findViewById(R.id.fit);
  placeholder = findViewById(R.id.placeholder);
  error = findViewById(R.id.error);
  fade = findViewById(R.id.fade);
  callback = findViewById(R.id.callback);
  rotate = findViewById(R.id.rotate);
  iv = findViewById(R.id.iv);
  complexrotate = findViewById(R.id.complexrotation);
  getData();
  }

  private void getData() {

  resize.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.with(getApplicationContext())
  .load("http://i.imgur.com/DvpvklR.png")
  .resize(600, 200)// resizes the image to these dimensions (in pixel). does not respect aspect ratio
  .into(iv);
  Toast.makeText(MainActivity.this, "Resize called ", Toast.LENGTH_SHORT).show();

  }
  });

  centrecrop.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.with(getApplicationContext())
  .load("http://i.imgur.com/DvpvklR.png")
  .resize(100,100)
  .centerCrop()
  .into(iv);
  Toast.makeText(MainActivity.this, "Centrecrop called ", Toast.LENGTH_SHORT).show();
  }
  });
  centreinside.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.with(getApplicationContext())
  .load("http://i.imgur.com/DvpvklR.png")
  .resize(100,100)
  .centerInside()
  .into(iv);
  Toast.makeText(MainActivity.this, "Centreinside called ", Toast.LENGTH_SHORT).show();
  }
  });
  fit.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.

  with(getApplicationContext())
  .load("http://i.imgur.com/DvpvklR.png")
  .fit()
  .into(iv);
  Toast.makeText(MainActivity.this, "Fit called ", Toast.LENGTH_SHORT).show();
  }
  });

  placeholder.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.
  with(getApplicationContext())

  .load("http://i.imgur.com/Dvpvkl.png")

  .placeholder(R.drawable.defaultimage) // can also be a drawable

  .into(iv);
  Toast.makeText(MainActivity.this, "Placeholder called ", Toast.LENGTH_SHORT).show();

  }
  });

  fade.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso
  .with(getApplicationContext())
  .load("http://i.imgur.com/DvpvklR.png")
  .placeholder(R.mipmap.ic_launcher) // can also be a drawable
  .noFade()
  .into(iv);
  Toast.makeText(MainActivity.this, "Fade called ", Toast.LENGTH_SHORT).show();
  }
  });
  error.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  Picasso.
  with(getApplicationContext())
  .load("http://i.imgur.com/Dvpvkl.png")
  .error(R.mipmap.ic_launcher) // will be displayed if the image cannot be loaded
  .into(iv);

  Toast.makeText(MainActivity.this, "Error called ", Toast.LENGTH_SHORT).show();



  }
  });
  callback.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
  callback();

  }
  });
  rotate.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {

  Picasso.with(getApplicationContext())

  .load("http://i.imgur.com/DvpvklR.png")

  .rotate(90f)
  // .rotate(45f, 220f,100f)

  .into(iv);
  Toast.makeText(MainActivity.this, "Rotate Called", Toast.LENGTH_SHORT).show();


  }
  });

  complexrotate.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {

  Picasso.with(getApplicationContext())

  .load("http://i.imgur.com/DvpvklR.png")

  //.rotate(90f)
  .rotate(45f, 220f,100f)

  .into(iv);
  Toast.makeText(MainActivity.this, "Complex Rotate Called", Toast.LENGTH_SHORT).show();


  }
  });


  }


  public void callback() {
  Picasso.with(MainActivity.this)
  .load("http://i.imgur.com/DvpvklR.png")
  .into(iv, new com.squareup.picasso.Callback() {
  @Override
  public void onSuccess() {
  //do smth when picture is loaded successfully
  Toast.makeText(MainActivity.this, "Image is loaded succesfully", Toast.LENGTH_SHORT).show();


  }

  @Override
  public void onError() {
  //do smth when there is picture loading error
  Toast.makeText(MainActivity.this, "some Error occured", Toast.LENGTH_SHORT).show();

  }


  });

  }
  }

المخرجات :

الآن قم بتشغيل التطبيق وسترى صورة تم تحميلها باستخدام مكتبة Picasso في تطبيق Android الخاص بك. العب هنا باستخدام الأزرار وتحقق من الصورة بأنماط مختلفة.

تعديل المقال