Android妙用的圖檔加載架構——Coil使用與解析

簡介

Coil 是一個 Android 圖檔加載庫，通過 Kotlin 協程的方式加載圖檔。特點如下：

• 更快: Coil 在性能上有很多優化，包括記憶體緩存和磁盤緩存，把縮略圖存儲存在記憶體中，循環利用 bitmap，自動暫停和取消圖檔網絡請求等。
• 更輕量級: Coil 隻有2000個方法（前提是你的 APP 裡面內建了 OkHttp 和 Coroutines），Coil 和 Picasso 的方法數差不多，相比 Glide 和 Fresco 要輕量很多。
• 更容易使用: Coil 的 API 充分利用了 Kotlin 語言的新特性，簡化和減少了很多樣闆代碼。
• 更流行: Coil 首選 Kotlin 語言開發并且使用包含 Coroutines, OkHttp, Okio 和 AndroidX Lifecycles 在内最流行的開源庫。 Coil 名字的由來：取 Coroutine Image Loader 首字母得來。

添加依賴：

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

簡單使用

// 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 文法輕松配置請求選項：

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

高斯模糊

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

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

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

效果圖：

圓角

//沒有圓角
        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

簡單來說就是把彩色圖變成灰色的

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

效果圖：

Gif

添加依賴

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

           

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

建立 gif ImageLoader 執行個體

val imageLoader = ImageLoader.Builder(context)
    .componentRegistry {
        if (SDK_INT >= 28) {
            add(ImageDecoderDecoder(context))
        } else {
            add(GifDecoder())
        }
    }
    .build()

 //設定全局唯一執行個體
 Coil.setImageLoader(imageLoader)

           

加載 gif 圖檔：

mBinding.image1.load(gifUrl)

           

效果圖如下：

監聽下載下傳過程

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 執行個體

coil 底層是使用 okhttp 作為網絡請求工具，可以設定 okHttpClient 執行個體

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)  //磁盤緩政策 ENABLED、READ_ONLY、WRITE_ONLY、DISABLED
            .crossfade(true) //淡入淡出
            .crossfade(1000)  //淡入淡出時間
            .okHttpClient {  //設定okhttpClient執行個體
                okHttpClient
            }.build()

        Coil.setImageLoader(imageLoader)

           

availableMemoryPercentage 設定用于此 ImageLoader 的記憶體緩存和位圖池的可用記憶體百分比，範圍：0-1 ， 如果為0 , 則禁用記憶體緩存。

預設行為：

memoryCachePolicy 記憶體緩存政策，有4中政策，預設為 CachePolicy.ENABLED

diskCachePolicy 磁盤緩存政策，方式和記憶體政策一直

crossfade 開啟淡入淡出

Coil 源碼分析

Coil 是一個單例類

轉載請标明出處：http://blog.csdn.net/zhaoyanjun6/article/details/122040645

本文出自【趙彥軍的部落格】

Android圖檔加載也是其中部分重要技術；Android的學習之路永無止境的，進階自己就是為自己鋪上更高的财富。《Android進階技術手冊》可以讓你的技術水準跟上一層樓，查缺補漏讓你更加全面。

【私信：“手冊”領取】Android核心進階技術手冊

文末

Coil是Android上的一個全新的圖檔加載架構，全名叫做 coroutine image loader，即協程圖檔加載庫。與傳統的圖檔加載庫Glide，Picasso或Fresco等相比。該具有輕量（隻有大約1500個方法）、快、易于使用、更現代的API等優勢。

它支援GIF和SVG，并且可以執行四個預設轉換：模糊，圓形裁剪，灰階和圓角。