استفاده از Coil برای بارگذاری تصاویر در کاتلین

 از کتابخانه coil به منظور بارگذاری تصویر از url استفاده می شود (خواندن تصویر از لینک) کتابخانه های مختلفی برای نمایش تصویر منشتر شده است در ادامه با ما همراه باشید تا بیشتر با کتابخانه coil آشنا شوید.

Coil از ویژگی های پیشرفته مانند coroutine ، OkHttp و androidX.lifecycles استفاده می کند. Coil حدود 1500 تابع به APK شما اضافه می کند که قابل مقایسه با پیکاسو و کمتر از Glide و Fresco است.Coil همچنین دارای چندین ویژگی پیشرفته مانند نمونه برداری از تصویر ، استفاده موثر از حافظه لغو و مکث خودکار درخواست ها است. Coilبه طور پیش فرض کاملاً با تکنیک های بهینه سازی R8 سازگار است بنابراین توسعه دهندگان برای افزودن هرگونه قانون ProGuard مربوط به Coil نیاز ندارند.

برای یادگیری  اندروید به دوره رایگان آموزش اندروید مقدماتی سایت باگتو مراجعه نمایید.

Integration

Coil به بایت کد جاوا 8 نیاز دارد  بنابراین کد های زیر را در فایل build.gradle خود اضافه کنید تا کار کند.

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

Coil دارای چهار dependency است. هر کدام هدف خود را دارند اما عمدتا ما از دو مورد زیر استفاده می کنیم:

1. io.coil-kt: Coil: dependency پیش فرض است که دارای Singleton Coil است. اگر از تزریق وابستگی یا حفظ نمونه ای از Coil در برنامه خود استفاده نمی کنید بهتر است از این dependency استفاده کنید.
2. io.coil-kt: coil-base: dependency پایه که شامل Singleton Coil نیست. اگر از تزریق وابستگی برای تزریق نمونه های Coil استفاده می کنید  این dependency را ترجیح دهید.

//Singleton artifact
    implementation "io.coil-kt:coil:0.9.5"
//Base artifact without singleton
    implementation "io.coil-kt:coil-base:0.9.5"

توابع

اکنون که کتابخانه را با موفقیت به پروژه اضافه کردیم وقت آن است که Coil را عملیاتی کنیم. بیایید با بارگیری یک تصویر از طریق یک url ساده شروع کنیم.

imageView.load("https://www.example.com/image.jpg")

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

Coil پاس دادن context و ایجاد نمونه imageloader را برای ماانجام داده. به گسترش Coil نگاهی بیندازید:

inline fun ImageView.load(
    uri: String?,
    imageLoader: ImageLoader = Coil.loader(),
    builder: LoadRequestBuilder.() -> Unit = {}
): RequestDisposable {
    return imageLoader.load(context, uri) {
        target(this@load)
        builder()
    }
}

این روش برای گرفتن context از imageView و ایجاد یک Coil loader بود. به همین دلیل کتابخانه های زبان native ارجعیت دارند.

 Placeholder و  خطا ها

تقریباً همه کتابخانه ها مانند Glide ، Picasso و Fresco از این ویژگی برخوردارند - نشان دادن یک تصویر ساختگی تا زمان بارگیری تصویر اصلی در view (placeholder) و نشان دادن تصویر خطا(error) در صورت عدم موفقیت درخواست. Coil نیز این ویژگی را خارج از box دارد و قسمت هیجان انگیز آن syntax است. پیاده سازی آنها بیشتر با syntax زبان مانند ویژگی های let و توابع در کاتلین است.

fun loadWithCoil(imageView: ImageView, imageUrl: String){
    imageView.load(imageUrl){
        placeholder(R.drawable.placeholder)
        error(R.drawable.error)
    }
}

Preload images(بارگذاری تصاویر)

Coil برای بارگیری موثرتر تصاویر از coroutine استفاده می کند. با استفاده از suspend function می توانیم یک تصویر از طریق url را بارگیری کنیم.

val image = Coil.get(imageUrl)

با استفاده از suspend function می توانیم یک تصویر از طریق url که آن را بارگیری کرده ایم را نیز به صورت drawable بارگیری کنیم.

Callback ها

برخی از موارد وجود دارد که پس از بارگیری تصویر از طریق url شما نیاز به callback دارید. Coil آن را با فیچر target پوشش می دهد.

fun coilWithCallbacks(){
    Coil.load(context, "https://www.example.com/image.jpg") {
        target { drawable ->
            // Handle the successful result.
        }
    }
}

سه نوع target وجود دارد: Target ، ViewTarget و possibleViewTarget.

• وقتی درخواست به هیچ view مرتبط نباشد از Target استفاده می شود.
• ViewTarget هنگامی که درخواست به imageView پیوند داده می شود ، مانند نمایش  placeholder که تا زمان تکمیل درخواست استفاده می شود.
• possibleViewTarget در صورت نیاز به تجمع bitmap استفاده می شود.

Transformation ها

اکنون که ما انواع مختلفی از تکنیک های بارگیری تصویر از Coil را یاد گرفته ایم زمان آن فرا رسیده است که Transformation را کار کنیم. تغییر شکل یک تابع مفید است که هر لودر تصویری باید حاوی آن باشد. Coil دارای چهار تغییر شکل است: تاری ، برش دایره ای ، مقیاس خاکستری و گوشه های گرد.

fun loadWithCoil(imageView: ImageView, imageUrl: String){
    imageView.load(imageUrl){
        placeholder(R.drawable.gradient_place_details)
        error(R.drawable.gradient_place_details)
        transformations(CircleCropTransformation())
    }
}

Cancel Request(لغو درخواست)

coil به طور پیش فرض  هنگام detache شدن imageview یا از بین رفتن context یا درخواست دیگر برای نمایش ، درخواست را لغو می کند. Coil به طور پیش فرض همه موارد memory leak را پوشش می دهد اما شرایطی پیش می آید که بخواهید درخواست را لغو کنید. برای این منظور  Coil برای هر درخواست load که از طریق آن می توانید درخواست را لغو کنید RequestDisposable را برمی گرداند.

  val disposable = imageView.load("https://www.example.com/image.jpg")

// Cancel the request.
        disposable.dispose()

Image Sampling

Image Sampling پیشرفته ترین تکنیکی است که برای بارگیری تصاویر با کیفیت بر اساس اندازه imageview استفاده می شود. فرض کنید تصویری با اندازه 500 در 500 روی دیسک وجود دارد. در ابتدا Coil  100 در  100 بارگیری می کند و تا زمان بارگیری کیفیت کامل از آن به عنوان placeholder استفاده می کند. این به عنوان progressive JPEG کار می کند. ما می توانیم این کار را هنگام  هرگونه درخواست بارگیری تصویر  Coil از طریق ویژگی های crossfade فعال کنیم.

imageView.load(imageUrl){
    crossfade(true)
}

مهاجرت از Glide  و  Picasso

Coil یک لودر تصویر بومی کاتلین است که به راحتی قابل استفاده است. این همه کاربردهای اساسی و پیشرفته را با extension ها پوشش می دهد تا برای توسعه دهندگان ساده باشد. حال ، بیایید کد بارگذاری تصویر را بین Glide ، Picasso و Coil مقایسه کنیم.

        // Glide
        Glide.with(context)
            .load(url)
            .into(imageView)

// Picasso
        Picasso.get()
            .load(url)
            .into(imageView)

// Coil
        imageView.load(url)

درخواست های Callback

        // Glide (has optional callbacks for start and error)
        Glide.with(context)
            .load(url)
            .into(object : CustomTarget<Drawable>() {
                override fun onResourceReady(resource: Drawable, transition: Transition<Drawable>) {
                    // Handle the successful result.
                }

                override fun onLoadCleared(placeholder: Drawable) {
                    // Remove the drawable provided in onResourceReady from any Views and ensure no references to it remain.
                }
            })

// Picasso
        Picasso.get()
            .load(url)
            .into(object : BitmapTarget {
                override fun onBitmapLoaded(bitmap: Bitmap, from: Picasso.LoadedFrom) {
                    // Handle the successful result.
                }

                override fun onBitmapFailed(e: Exception, errorDrawable: Drawable?) {
                    // Handle the error drawable.
                }

                override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                    // Handle the placeholder drawable.
                }
            })

// Coil (has optional callbacks for start and error)
        Coil.load(context, url) {
            target { drawable ->
                // Handle the successful result.
            }
        }

درخواست های Custom

        imageView.scaleType = ImageView.ScaleType.FIT_CENTER

// Glide
        Glide.with(context)
            .load(url)
            .placeholder(placeholder)
            .fitCenter()
            .into(imageView)

// Picasso
        Picasso.get()
            .load(url)
            .placeholder(placeholder)
            .fit()
            .into(imageView)

// Coil (autodetects the scale type)
        imageView.load(url) {
            placeholder(placeholder)
        }

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