آموزش Glide در اندروید – بخش دوم (شروع کار با گلاید)

1396/11/16
هادی اکبرزاده
منسوخ شده‌ها بروزرسانی : 1397/11/30
آموزش Glide در اندروید – بخش دوم (شروع کار با گلاید)

آموزش Glide در اندروید
بخش اول (راه اندازی گلاید)

در مطلب قبل، به روش راه‌اندازی گلاید پرداختیم و حالا می‌خواهیم کار با آن را شروع کنیم.

انواع حالت لود کردن تصویر

برای مشخص کردن تصویری که قرار است بارگزاری شود، از متد load استفاده می‌کنیم. این متد، 8 حالت دارد و هرکدام شامل یک ورودی می‌باشند:

1. ورودی String: لینک

Glide
    .with(context)
    .load("https://fullkade.com/wp-content/uploads/2018/02/ic-glide.jpg")
    .into(imageView);

2. ورودی Int: ریسورس

Glide
    .with(context)
    .load(R.mipmap.ic_launcher)
    .into(imageView);

3. ورودی فایل

Glide
    .with(context)
    .load(new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "fullkade.jpg"))
    .into(imageView);

4. ورودی Uri

Uri uri = resourceIdToUri(context, R.mipmap.ic_launcher);
 
Glide
    .with(context)
    .load(uri)
    .into(imageView);

ورودی‌های Drawable، Bitmap، Object و byte[] را هم خودتان تست کنید.

ایجاد GlideApp

نکته: این مرحله را به صورت کلیشه‌ای انجام داده و رد کنید.
اگر سعی کنید به کلاس GlideApp دسترسی پیدا کنید، خواهید دید که چنین کلاسی وجود ندارد! برای دسترسی به این کلاس، یک کلاس با نام MyAppGlideModule ایجاد کرده و آن را به صورت زیر کامل کنید.

package com.fullkade.test;

import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

حالا برای اطمینان، یک بار پروژه‌ی خود را build کنید. اکنون GlideApp قابل دسترسی می‌باشد و از این به بعد، به جای Glide، از GlideApp استفاده می‌کنیم.

تصویر placeholder

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

  • int: آیدی تصویر در ریسورس
  • آبجکت drawable
GlideApp
    .with(context)
    .load(url)
    .placeholder(R.mipmap.ic_launcher)
    .into(imageView);

نکته: چنانچه از Glide به جای GlideApp استفاده کنیم، متد placeholder وجود نخواهد داشت.
مثال: یک رنگ به عنوان placeholder قرار می‌دهیم:

GlideApp.with(fragment)
  .load(url)
  .placeholder(new ColorDrawable(Color.BLACK))
  .into(view);

ممکن است بخواهید یک رنگ تصادفی ایجاد کنید، به این‌پست مراجعه کنید.

تصویر error

ممکن است به دلیل قطع بودن اینترنت یا سرور و هردلیل دیگری، Glide قادر به دریافت تصویر نباشد که در این‌صورت اگر خطا را مدیریت نکنیم، ممکن است با مشکلاتی مواجه شویم. بدین منظور از متد error استفاده می‌کنیم تا در صورت بروز خطا، تصویر تنظیم شده برای error نمایش داده شود؛ این متد سه نوع ورودی متفاوت دارد:

  • int:آیدی تصویر در ریسورس
  • drawable
  • RequestBuilder (بعدا توضیح خواهم داد.)
GlideApp
    .with(context)
    .load("https://fullkade.com/error.png")
    .placeholder(R.mipmap.ic_launcher)
    .error(R.mipmap.future_studio_launcher)
    .into(imageView);

این لینک در سایت ما وجود ندارد، بنابراین با خطا مواجه شده و اگر متد error را با یک تصویر از ریسورس تنظیم کرده باشیم، آن تصویر نمایش داده خواهد شد.

تنظیم dontAnimate

زمانی که تصویر لود شده در حال قرار گرفتن در ImageView است، شاید دوست داشته باشید این قرار گرفتن به نرمی صورت گیرد تا برای مثال تصویر قبلی ImageView همچون placeholder ، سریعا از بین نرفته و باعث آزار چشم نشود و زیبایی و نرمی در عین تغییر دیده شود. این حالت به صورت Fade (محو شدن) انجام می‌گیرد

به طور پیش‌فرض چنین چیزی فعال است و برای غیرفعال کردن آن باید از متد dontAnimate استفاده کنیم تا تصویر بدون درنگ، جایگزین شود:

GlideApp
    .with(context)
    .load("https://fullkade.com/wp-content/uploads/2018/02/ic-glide.jpg")
    .placeholder(new ColorDrawable(Color.BLACK))
    .error(R.mipmap.ic_error)
    .dontAnimate()
    .into(imageView);

تغییر اندازه تصویر

بتهرین کار این است که سرور تصویر را در اندازه‌ی مورد نیاز برای برنامه ارسال کند تا برنامه منابع سخت افزاری محدود سمت کلاینت را برای انجام چنین کاری صرف نکند.

  • سرعت کم نشود
  • اینترنت بیهوده استفاده نشود

اما بسنگی به دلایل خودتان، می‌توانید از متد override برای تغییر سایز تصویر استفاده کنید:

GlideApp
    .with(context)
    .load("https://fullkade.com/wp-content/uploads/2018/02/ic-glide.jpg")
    .override(600, 200)
    .into(imageView);

نکته: اندازه تصاویر بر واحد پیکسل است و همچنین ممکن است واحدهایی که تنظیم می‌کنید، باعث کشیدگی و زشت دیده شدن تصویر شوند.
نکته: متدهای centerCrop، centerInside و fitCenter بعدا توضیح داده خواهند شد.

نمایش تصویر Gif

از برتری‌های گلاید نصبت به سایر ایمیج لودرها، همین مورد است. مشکل این‌جاست که خود اندروید به صورت پیش‌فرض از تصاویر گیف پشتیبانی نمی‌کند اما همانطور که می‌دانید، این روزها گیف‌ها یکی از پرکاربردترین و پراستفاده‌ترین موارد در پیام‌رسان‌ها به شمار می‌روند.

نکته‌ی جالب این است که شما برای تنظیم گیف، دوباره به همان روش‌های بالا آن را درون ایمیج ویو قرار می‌دهید و خود گلاید شروع به پخش آن می‌کند!

بررسی گیف بودن تصویر

از آن‌جایی که گلاید هیچ تفاوتی بین تصویر عادی و گیف قائل نمی‌شود و چنانچه شما بخواهید تنها تصویر گیف روی ایمیج ویو قرار بگیرد، می‌توانید از متد asGif استفاده کنید تا در صورت گیف نبودن تصویر، تصویر تنظیم شده برای ارور نمایش داده شود.

Glide  
    .with(context)
    .load(url)
    .asGif()
    .error(R.drawable.ic_error)
    .into(imageView);

نمایش تصویر به جای  پخش گیف

ممکن است تصاویر شما شامل گیف و تصویر ثابت باشند و شما بخواهید تصاویر گیف نیز همچون تصاویر عادی ثابت باشند؛ می‌توانید از متد asBitmap استفاده کنید تا در صورتی که تصویر گیف بود، بدون پخش نمایش داده شود.

Glide  
    .with(context)
    .load(url)
    .asBitmap()
    .error(R.drawable.ic_error)
    .into(imageView);

تصاویر بند اندگشتی

البته بهتر است در صورت دریافت تصویر از سرور، خود سرور حالت کوچک شده‌ی تصویر، یعنی بند انگشتی یا thumbnail را برایمان داشته باشد اما چنانچه این گونه نبود، می‌توانید از متد thumbnail استفاده کنید.

Glide  
    .with(context)
    .load(url)
    .thumbnail(0.30f)
    .into(imageView);

نکته: مقدار وارد شده در ورودی این متد، نسبت آن به تصویر اصلی است.

اولویت دهی به درخواست‌ها

البته نمی‌شود اسم این قسمت را اولویت بندی گذاشت، چرا که با وجود آن هم تضمینی در ترتیب دریافت تصاویر وجود ندارد اما این مثل این است که سی‌پی‌یوی کامپیوتر، به جای این‌که بیشتر به فایرفاکس اهمیت دهد، بیشتر به Android Studio اهمیت می‌دهد تا سرعت آن بالا رود. البته این قفط یک مثال است.

در اینجا نیز با متد priority می‌توانیم گلایدی که می‌نویسیم را اولویت بندی کنیم. البته من اسم اهمیت دهی را بیشتر به جای اولویت بندی ترجیح می‌دهم.
با تنظیم این متد، گلاید آن تصویر را نسبت به تصاویر دیگر بیشتر یا کمتر در نظر خواهد گرفت و سرعت خود را برای تصاویر مختلف تنظیم خواهد کرد.

Glide
    .with(context)
    .load(url)
    .priority(Priority.HIGH)
    .into(imageView);

مقدارهای اولویت یا اهمیت، به شرح زیر از بیشتر به کمتر می‌باشند:

  • Prority.IMMEDIATE
  • Priority.HIGH
  • Priority.NORMAL
  • Priority.LOW
درس بعدی (آماده نیست)درس قبلی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

cp-codfk

نظرات ثبت شده بدون دیدگاه

توضیحات پیشنهادی نظرات اشتراک