快捷導(dǎo)航

Android圖片加載框架Coil的詳細(xì)使用總結(jié)

更新時(shí)間：2022年07月28日 16:34:52 作者：趙彥軍

Coil是Android上的一個(gè)全新的圖片加載框架,它的全名叫做coroutine image loader,即協(xié)程圖片加載庫(kù),下面這篇文章主要給大家介紹了關(guān)于Android圖片加載框架Coil詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下

簡(jiǎn)介

Coil 是一個(gè) Android 圖片加載庫(kù)，通過(guò) Kotlin 協(xié)程的方式加載圖片。特點(diǎn)如下：

更快: Coil 在性能上有很多優(yōu)化，包括內(nèi)存緩存和磁盤(pán)緩存，把縮略圖存保存在內(nèi)存中，循環(huán)利用 bitmap，自動(dòng)暫停和取消圖片網(wǎng)絡(luò)請(qǐng)求等。
更輕量級(jí): Coil 只有2000個(gè)方法（前提是你的 APP 里面集成了 OkHttp 和 Coroutines），Coil 和 Picasso 的方法數(shù)差不多，相比 Glide 和 Fresco 要輕量很多。
更容易使用: Coil 的 API 充分利用了 Kotlin 語(yǔ)言的新特性，簡(jiǎn)化和減少了很多樣板代碼。
更流行: Coil 首選 Kotlin 語(yǔ)言開(kāi)發(fā)并且使用包含 Coroutines, OkHttp, Okio 和 AndroidX Lifecycles 在內(nèi)最流行的開(kāi)源庫(kù)。
Coil 名字的由來(lái)：取 Coroutine Image Loader 首字母得來(lái)。

github：https://github.com/coil-kt/coil

文檔：https://coil-kt.github.io/coil/image_loaders/

添加依賴(lài)：

implementation("io.coil-kt:coil:1.4.0")

簡(jiǎn)單使用

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

// Resource
imageView.load(R.drawable.image)

// File
imageView.load(File("/path/to/image.jpg"))

// And more...

可以使用 lambda 語(yǔ)法輕松配置請(qǐng)求選項(xiàng)：

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true) //漸進(jìn)進(jìn)出
    placeholder(R.drawable.image) //加載中占位圖
    transformations(CircleCropTransformation())  //圓形圖
    error(R.drawable.image) //加載錯(cuò)誤占位圖
}

高斯模糊

//正常圖片
mBinding.image1.load(imageUrl)

//高斯模糊-輕微模糊
mBinding.image11.load(imageUrl) {
     transformations(BlurTransformation(this@MainActivity, 5f, 10f))
     scale(Scale.FILL)
}

//高斯模式-嚴(yán)重模糊
mBinding.image12.load(imageUrl) {
     transformations(BlurTransformation(this@MainActivity, 20f, 40f))
     scale(Scale.FILL)
 }

效果圖：

圓角

        //沒(méi)有圓角
        mBinding.image1.load(imageUrl){
            transformations(RoundedCornersTransformation())
            scale(Scale.FILL)
        }

        //圓角一樣
        mBinding.image11.load(imageUrl) {
            transformations(RoundedCornersTransformation(20f))
            scale(Scale.FILL)
        }

        //圓角不一樣
        mBinding.image12.load(imageUrl) {
            transformations(
                RoundedCornersTransformation(
                    topLeft = 20f,
                    topRight = 20f,
                    bottomLeft = 50f,
                    bottomRight = 50f
                )
            )
            scale(Scale.FILL)
        }

效果圖：

圓形

布局文件

<ImageView
     android:id="@+id/image1"
     android:layout_gravity="center"
     android:layout_width="150dp"
     android:layout_height="150dp" />

代碼：

mBinding.image1.load(imageUrl){
     transformations(CircleCropTransformation())
     scale(Scale.FILL)
}

效果圖：

灰色變換 GrayscaleTransformation

簡(jiǎn)單來(lái)說(shuō)就是把彩色圖變成灰色的

mBinding.image1.load(imageUrl) {
    transformations(GrayscaleTransformation())
}

效果圖：

Gif

添加依賴(lài)

implementation("io.coil-kt:coil-gif:1.4.0")

官方文檔：https://coil-kt.github.io/coil/gifs/

創(chuàng)建 gif ImageLoader 實(shí)例

val imageLoader = ImageLoader.Builder(context)
    .componentRegistry {
        if (SDK_INT >= 28) {
            add(ImageDecoderDecoder(context))
        } else {
            add(GifDecoder())
        }
    }
    .build()
    
 //設(shè)置全局唯一實(shí)例
 Coil.setImageLoader(imageLoader)

加載 gif 圖片：

mBinding.image1.load(gifUrl)

效果圖如下：

監(jiān)聽(tīng)下載過(guò)程

mBinding.image1.load(imageUrl) {
      listener(
           onStart = { request ->
               Log.d("coil-", "onStart")
            },
           onError = { request, throwable ->
               Log.d("coil-", "onError")
           },
           onCancel = { request ->
               Log.d("coil-", "onCancel")
           },
           onSuccess = { request, metadata ->
               Log.d("coil-", "onSuccess")
           }
       )
}

取消下載

val imageUrl = "https://t7.baidu.com/it/u=433422559,1779762296&fm=193&f=GIF"

val disposable = mBinding.image1.load(imageUrl)

//取消加載
disposable.dispose()

替換 okhttp 實(shí)例

coil 底層是使用 okhttp 作為網(wǎng)絡(luò)請(qǐng)求工具，可以設(shè)置 okHttpClient 實(shí)例

val okHttpClient = OkHttpClient.Builder()
       .cache(CoilUtils.createDefaultCache(this))
       .build()

val imageLoader = ImageLoader.Builder(this).okHttpClient {
     okHttpClient
}.build()
        
Coil.setImageLoader(imageLoader)

自定義

  val okHttpClient = OkHttpClient.Builder()
            .cache(CoilUtils.createDefaultCache(this))
            .build()

        val imageLoader = ImageLoader.Builder(this)
            .availableMemoryPercentage(0.2)
            .diskCachePolicy(CachePolicy.ENABLED)  //磁盤(pán)緩策略 ENABLED、READ_ONLY、WRITE_ONLY、DISABLED
            .crossfade(true) //淡入淡出
            .crossfade(1000)  //淡入淡出時(shí)間
            .okHttpClient {  //設(shè)置okhttpClient實(shí)例
                okHttpClient
            }.build()

        Coil.setImageLoader(imageLoader)

availableMemoryPercentage 設(shè)置用于此 ImageLoader 的內(nèi)存緩存和位圖池的可用內(nèi)存百分比，范圍：0-1 ，如果為0 , 則禁用內(nèi)存緩存。

默認(rèn)行為：