腳本之家服務器常用軟件

快捷導航

Android 官推 kotlin-first 的圖片加載庫——Coil的使用入門

更新時間：2021年04月07日 09:01:53 作者：developerHaoz

這篇文章主要介紹了Android 官推 kotlin-first 的圖片加載庫——Coil的使用入門，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下

Coil 是一個非常年輕的圖片加載庫，在 2020 年 10 月 22 日才發(fā)布了 1.0.0 版本，但卻受到了 Android 官方的推廣，在 Android Developers Backstage 這個博客中專門聊過一期。推廣的原因比較簡單：一方面是這個庫確實做得很好，另一方面是這個庫完全是用 Kotlin 寫的，而且運用了大量 Kotlin 的特性，尤其是協(xié)程。所以 Google 嘴上說著不會放棄 Java，但實際上咱們都懂的。

Coil 名字的由來：取 Coroutine Image Loader 首字母得來，可以看出通過 Kotlin 協(xié)程來進行圖片加載，特點如下：

更快：Coil 在性能上有很多優(yōu)化，包括內存緩存和磁盤緩存、把縮略圖保存在內存中、通過 BitmapPool 循環(huán)利用 Bitmap、自動暫停和取消網(wǎng)絡請求等
更輕量級：Coil 只有 2000 個方法，跟 Picasso 的方法數(shù)差不多，相比 Glide 和 Fresco 要輕量非常多
更容易使用：Coil 的 API 充分利用 Kotlin 的新特性，而且還有豐富的拓展函數(shù)，簡化和減少了很多樣板代碼
更流行：Coil 通過 Kotlin 來開發(fā)，并且使用包含 Coroutines、okhttp、okio 和 AndroidX Lifecycles 在內的非常多流行的開源庫

從 Coil 的特性可以看出，這是一個非常適合個人 App 使用的圖片加載庫，特別是純 Kotlin 開發(fā)的 App。而且 Coil 里面運用了大量 Kotlin 的新特性以及協(xié)程，對于我們學習 Kotlin 有非常大的價值。相比于 glide 和 fresco 有著非常復雜的結構和驚人的代碼量，Coil 只有 2000 左右的方法數(shù)，所以也很適合進行源碼研究和學習。

一、基本使用

Coil 可以在 mavenCentral() 下載

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

Coil 給 ImageView 加了很多拓展函數(shù)，所以我們一行代碼便能進行圖片加載

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

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

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

同時我們也可以使用 lambda 語法輕松進行圖片加載的配置

imageView.load("https://www.example.com/image.jpg") {
  crossfade(true)
  placeholder(R.drawable.image)
  transformations(CircleCropTransformation())
}

二、常用的 API

ImageLoader

ImageLoader 是 Coil 中對于圖片加載的大管家，負責處理緩存、數(shù)據(jù)獲取、圖像解碼、請求管理、Bitmap 緩存池、內存管理等工作，一般建議只創(chuàng)建一個 ImageLoader 并在 App 中進行共享，這樣性能是最優(yōu)的。這是因為每個 ImageLoader 都有自己的內存緩存和 Bitmap 緩存池。

我們可以通過構造器來創(chuàng)建和配置 ImageLoader。

val imageLoader = ImageLoader.Builder(context)
  .availableMemoryPercentage(0.25)
  .crossfade(true)
  .build()

同時由于 ImageLoader 是一個接口，也就意味著我們可以非常方便地進行測試，例如可以注入一個 fake 的 ImageLoader，從而每次都返回相同的 drawable。

val fakeImageLoader = object : ImageLoader {

  private val drawable = ColorDrawable(Color.BLACK)

  override fun enqueue(request: ImageRequest): Disposable {
    request.target?.onStart(drawable)
    request.target?.onSuccess(drawable)
    return disposable
  }

  override suspend fun execute(request: ImageRequest): ImageResult {
    return SuccessResult(
      drawable = drawable, request = request,
      metadata = ImageResult.Metadata(
        memoryCacheKey = MemoryCache.Key(""),
        isSampled = false,
        dataSource = DataSource.MEMORY_CACHE,
        isPlaceholderMemoryCacheKeyPresent = false
      )
    )
  }
}

ImageRequest

ImageRequest 為 ImageLoader 加載圖片提供所有的必要信息，同時我們也可以使用自定義的 Target 進行處理。

val request = ImageRequest.Builder(context)
  .data("https://www.example.com/image.jpg")
  .target { drawable ->
    // Handle the result.
  }
  .build()
context.imageLoader.enqueue(request)

ImageRequest 基于 Builder 模式來進行創(chuàng)建，包含了加載圖片的各個配置項，這里重點看下最常用的配置項

配置項	作用
context	外部傳入的 Context，一般是 ImageView 包含的 Context
data	圖片的地址
target	圖片加載之后的處理類
memoryCachePolicy	內存緩存策略
diskCachePolicy	磁盤緩存策略
networkCachePolicy	網(wǎng)絡緩存策略
decoder	圖片解碼器
fetcher	將圖片地址轉換成 BufferedSource 或 Drawable
lifecycle	一般是對應 Activity 或 Fragment 的 Lifecycle

Disposable

Disposable 是調用 load() 方法之后的返回值，主要是用于取消圖片加載

interface Disposable {

  /**
   * 如果圖片加載請求已經(jīng)完成或者取消，則返回 true
   */
  val isDisposed: Boolean

  /**
   * 取消正在進行的圖片加載請求以及釋放相關的資源，而且該方法是冪等的
   */
  fun dispose()

  /**
   * 非阻塞式地等待任務結束
   */
  @ExperimentalCoilApi
  suspend fun await()
}

圖片變換

圖片變換是圖片加載庫中很常見的功能，Coil 將其抽象成 Transformation 接口，可以看到在 transform() 方法中有一個 BitmapPool 參數(shù)，這是因為在實現(xiàn)圖形變換的時候往往需要一個 Bitmap，此時可以直接在 BitmapPool 中獲取，從而復用已有的 Bitmap。

interface Transformation {
  fun key(): String
  suspend fun transform(pool: BitmapPool, input: Bitmap, size: Size): Bitmap
}

imageView.load("https://www.example.com/image.jpg") {
  transformations(CircleCropTransformation())
}

Coil 主要提供了這幾個圖片變換的效果

Tranformation	功能
BlurTransformation	高斯模糊
CircleCropTransformation	圓形裁剪
GrayscaleTransformation	圖片置灰
RoundedCornersTransformation	添加圓角

三、功能拓展

Coil 在提供了很多必要功能的基礎上，預留了很多的拓展點給開發(fā)者實現(xiàn)自定義。Coil 的圖片加載主要包括四個主要的模塊：

模塊	作用
Interceptors	攔截器，可以對圖片加載請求進行觀察、轉換和重試
Mappers	映射器，實現(xiàn)不同數(shù)據(jù)類型之間的轉換
Fetchers	抓取器，將圖片地址轉換成 BufferedSource 或 Drawable
Decoders	解碼器，實現(xiàn)各種圖像格式的解碼

Interceptors

Coil 的 Interceptor 無疑是借鑒了 okhttp 的設計思路，極大方便了后續(xù)的功能拓展，例如我們可以給 Coil 添加一個自定義的緩存層

class CustomCacheInterceptor(
  private val context: Context,
  private val cache: LruCache<String, Drawable>
) : Interceptor {

  override suspend fun intercept(chain: Interceptor.Chain): ImageResult {
    val value = cache.get(chain.request.data.toString())
    if (value != null) {
      return SuccessResult(
        drawable = value.bitmap.toDrawable(context),
        request = chain.request,
        metadata = TODO()
      )
    }
    return chain.proceed(chain.request)
  }
}

Mappers、Fetchers

外部在調用 load() 時，傳入的 String 參數(shù)既可能指向本地資源文件，也可能指向網(wǎng)絡圖片，Mappers 和 Fetchers 搭配使用，可以對資源類型進行區(qū)分，舉個例子：

imageView.load("android.resource://example.package.name/drawable/image")
imageView.load("https://www.example.com/image.jpg")

StringMapper 會將傳入的 String 轉換為對應的 Uri。

internal class StringMapper : Mapper<String, Uri> {

  override fun map(data: String) = data.toUri()
}

ResourceUriFetcher 會判斷 Uri 的 scheme 類型是否為 android.resource，是的話代表本地資源文件，而 HttpUriFetcher 則判斷 Uri 的 scheme 是否為 http 或 https，是的話代表網(wǎng)絡圖片。

internal class HttpUriFetcher(callFactory: Call.Factory) : HttpFetcher<Uri>(callFactory) {

  override fun handles(data: Uri) = data.scheme == "http" || data.scheme == "https"

  override fun key(data: Uri) = data.toString()

  override fun Uri.toHttpUrl(): HttpUrl = HttpUrl.get(toString())
}

Mapper	作用
FileUriMapper	將 Uri 轉換為 File
StringMapper	將 String 轉換為 Uri
ResourceIntMapper	將 @DrawableRes Int 轉換為 Resource Uri
ResouceUriMapper	將具有資源名稱的 android.resource Uri 映射到包含其資源 ID 的 Uri

Decoders

Android 支持了很多圖像格式，但也有很多它不支持的格式（例如：Gif、SVG、視頻幀等），所以 Coil 便提供了對應的拓展庫

① Gif（GifDecoder 支持所有 API 級別，但速度較慢，ImageDecoderDecoder 的加載速度快，但僅在 API 28 及更高版本可用）

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

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

② SVG（如果請求的 MIME 類型是 image/svg+xml，則會自動檢測并解碼所有 SVG）

implementation("io.coil-kt:coil-svg:1.1.1")

val imageLoader = ImageLoader.Builder(context)
  .componentRegistry {
    add(SvgDecoder(context))
  }
  .build()

③ 視頻幀（僅支持 File 和 Uri）

implementation("io.coil-kt:coil-video:1.1.1")

val imageLoader = ImageLoader.Builder(context)
  .componentRegistry {
     add(VideoFrameFileFetcher())
     add(VideoFrameUriFetcher())
  }
  .build()