از کتابخانه 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)
        }

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