کتابخانه ی 1 : لود کردن تصاویر اینترنتی با Picasso

در این قسمت از سری آموزش های کتابخانه های اندرویدی به بررسی کتابخانه ی قدرتمند بارگذاری تصاویر و لود عکس از طریق آدرس اینترنتی می پردازیم . کتابخانه ی پیکاسو یک کتابخانه ی قدرتمند جهت دانلود و کش کردن تصاویر است .

مفهوم دانلود به معنای نمایش یک عکس با یک آدرس دلخواه در یک ImageView می باشد. این آدرس هر آنچه که باشد و هر جایی وجود داشته باشد می تواند توسط این کتابخانه نمایش داده شود.

برای اضافه کردن این کتابخانه باید کد زیر را در قسمت dependencies در فایل build.gradle در اندروید استودیو خود وارد نمایید. ( در صورتی که با روش های اضافه کردن کتابخانه در اندروید استودیو آشنایی ندارید می توانید به مقاله ی کتابخانه ی 0 : افزودن کتابخانه ها به روش آنلاین و دستی در اندروید استودیو مراجعه نمایید )

implementation 'com.squareup.picasso:picasso:2.5.2'

1	implementation 'com.squareup.picasso:picasso:2.5.2'

برای این که همیشه بتوانید از آخرین نسخه ی این کتابخانه استفاده کنید بهتر است هر از چند گاهی وارد صفحه گیتهاب این کتابخانه شده و آخرین ورژن آن را در فایل گردل خود وارد نمایید.

لینک صفحه ی گیتهاب پیکاسو : https://github.com/square/picasso

نحوه استفاده از کتابخانه :

مرحله 1 : برای استفاده از پیکاسو نیاز به یک ImageView دارید پس اولین کار این است که در اکتیویتی که می خواهید از این کتابخانه استفاده کنید با زبان xml به صورت زیر یک ImageView ایجاد کنید.

<ImageView
android:id="@+id/imageView"
android:layout_width="300dp"
android:layout_height="300dp"
/>

<ImageView

android:id="@+id/imageView"

android:layout_width="300dp"

android:layout_height="300dp"

مرحله 2 : حال در فایل جاوای مرتبط به همین اکتیویتی (برای مثال MainActivity.java) این ویدجت را به صورت زیر بیابید:

ImageView imageView = (ImageView) findViewById(R.id.imageView);

1	ImageView imageView = (ImageView) findViewById(R.id.imageView);

مرحله 3 :

نمایش عکس از طریق آدرس اینترنتی :

برای نمایش عکس از طریق آدرس اینترنتی ابتدا باید اجازه ی دسترسی اینترنت را به قسمت permission های فایل Android Manifest اضافه نمایید:

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

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="android.ir.listviewtest2">

    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ListViewtest2">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="android.ir.listviewtest2">

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

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/Theme.ListViewtest2">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

حال با نوشتن کد زیر می توانید عکس مورد نظر خود که در یک آدرس اینترنتی قرار گرفته است را در ImageView خود لود نمایید :

Picasso.with(context)
    .load(url)
    .into(imageView);

Picasso.with(context)

.load(url)

.into(imageView);

این ساده ترین مدل نوشتن و استفاده کردن از کتابخانه پیکاسو هست .

Context:در این قسمت شما باید context را وارد نمایید برای این کار اگر در داخل اکتیویتی هستید از getApplicationContext() یا اسم اکتیویتی مورد نظر(MainActivity.this) ، اگر در داخل فرگمنت هستید از getActivity و در داخل کلاس های دیگر با تعریف context می توانید به آدرس اکتیویتی خود دسترسی داشته باشید.

imageView :همان imageView ای هست که آن را در اکتیویتی خود پیدا کردید و می خواهید عکس از آن طریق لود شود.

URL : یک متغیر String حاوی آدرس اینترنتی عکس مورد نظر شما

شما می توانید به 4 صورت از متد load استفاده کنید :

همانطور که از تصویر بالا مشخص است شما می توانید به 4 صورت از متد load استفاده نمایید

حالت 1 : اگر عکسی را در پوشه drawable و یا سایر پوشه های مرتبط به مدیا مانند assets وارد کرده باشید می توانید با استفاده از R.drawable.imgname عکس خود را در imageview لود نمایید.

حالت 2 : اگر عکس را در آدرسی از فضای ذخیره سازی دستگاه ذخیره کرده باشید می توانید با دستور (Uri.parse(path که در آن path آدرس دقیق عکس موجود در گوشی کاربر است آن را لود نمایید.

حالت 3 : در بسیاری از اوقات می توانید با استفاده از متد file یک فایل عکس را بسازید و آن را از طریق پیکاسو لود نمایید.

حالت 4 : بدون نیاز به این که از Uri و یا file استفاده نمایید به راحتی مسیر را به متد load بدهید تا عکس را برای شما لود کند.

در صورتی که با مفاهیم file وUri و ذخیره سازی اطلاعات در اندروید آشنایی ندارید می توانید به دوره ذخیره سازی اطلاعات در اندروید مراجعه کنید که در آن راجع به تمامی روش های ذخیره سازی به همراه پیاده سازی پرمیشن های مربوطه پرداخته شده و یک پیش نیاز برای شروع کار حرفه ای در اندروید و ساخت اپلیکیشن های قدرتمند مثل دیجی کالا و دیوار و … می باشد .

نمایش عکس قبل از لود شدن تصویر :

بدلیل این که ممکن است دریافت عکس از اینترنت مقداری زمان بر باشد بهتر است برای بالا بردن تجربه کاربری اپلیکیشن خود هنگامی که مشغول استفاده از کتابخانه پیکاسو هستید عکسی را به کاربر نمایش دهید که برای این کار کافیست از دستور زیر استفاده نمایید :

Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.placeholder)
    .into(imageView);

Picasso.with(context)

.load(url)

.placeholder(R.drawable.placeholder)

.into(imageView);

با استفاده از دستور placeholder می توانید عکسی را جهت نمایش به کاربر در هنگام لود شدن عکس اصلی نمایش دهید.

نمایش ارور در هنگام لود نشدن تصویر :

گاهی ممکن است که به علت های متفاوتی مثل عدم وجود اتصال اینترنتی یا وجود نداشتن عکس ، اپلیکیشن شما نتواند به آدرس عکس قرار گرفته در پیکاسو دسترسی پیدا کند به همین جهت بهترین راه برای نمایش این حالت قرار دادن عکسی است که این موضوع را به کاربر نمایش دهد مانند عکس های زیر :

برای چنین کاری کافیست در دستورات پیکاسو از متد error استفاده کنید :

Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .into(imageView);

Picasso.with(context)

.load(url)

.placeholder(R.drawable.placeholder)

.error(R.drawable.error)

.into(imageView);

پیکیر بندی پروگارد

اگر شما از پروگارد برای مخافظت و فشرده سازی پروژه اندروید خودتان استفاده می کنید (یعنی در داخل build.gradle مقدار minifyEnabled را true قرار دادید ) حتما کد زیر را به فایل proguard-rules.pro در زیر شاخه Gradle Scripts (فایل proguard-rules.pro تقریبا زیر فایل build.gradle قرار دارد ) اضافه کنید تا بتوانید بدون مشکل از پروژه ی خود خروجی دریافت کنید.