[Android][Compose]Coil框架

由 Kotlin 协程 (Instacart) 提供支持的图片加载库。（本文主要偏重Android compose开发说明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 首字母得来。

组成

Coil的图像管道由五个主要部分组成，按以下顺序执行：拦截器、映射器、键控器、获取器和解码器。

• 拦截器：允许您观察、转换、短路或重试对ImageLoader的图像引擎的请求。例如，可以添加自定义缓存层
• 映射器：映射器允许您添加对自定义数据类型的支持。例如，假设我们从服务器获取此模型
• 键控器：键控器将数据转换为缓存键的一部分。此值用作MemoryCache。Key.Key当/如果此请求的输出被写入MemoryCache。
• 获取器：获取器将数据（例如URL、URI、文件等）转换为ImageSource或Drawable。它们通常将输入数据转换为解码器可以使用的格式。使用此接口添加对自定义获取机制（例如Cronet、自定义URI方案等）的支持
• 解码器：解码器读取ImageSource并返回Drawable。使用此界面可以添加对自定义文件格式（例如GIF、SVG、TIFF等）的支持。

依赖

//xml
implementation("io.coil-kt:coil:2.6.0") 
//compose
implementation("io.coil-kt:coil-compose:2.6.0")

快速使用

可以使用 ImageView 的扩展函数 load 或者使用AsyncImage加载一张图片：

// URL
imageView.load("https://example.com/image.jpg")
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = null,
)

图片加载器Image Loaders

创建ImageLoaders

ImageLoaders是执行ImageRequest的服务对象。它们处理缓存、数据提取、图像解码、请求管理、位图池、内存管理等。可以使用生成器创建和配置新实例：

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

当您创建一个ImageLoader并在整个应用程序中共享它时，Coil的性能最好。这是因为每个ImageLoader都有自己的内存缓存、磁盘缓存和OkHttpClient。

缓存配置

每个ImageLoader都有一个最近解码的位图的内存缓存，以及一个从互联网加载的任何图像的磁盘缓存。在创建ImageLoader时，两者都可以进行配置：

val imageLoader = ImageLoader.Builder(context)
    .memoryCache {
        MemoryCache.Builder(context)
            .maxSizePercent(0.25)
            .build()
    }
    .diskCache {
        DiskCache.Builder()
			//本地缓存文件保存位置
            .directory(context.cacheDir.resolve("image_cache"))
            .maxSizePercent(0.02)
            .build()
    }
    .build()

您可以使用它们的键访问内存和磁盘缓存中的项，这些键在加载图像后在ImageResult中返回。ImageResult由ImageLoader.execute或在ImageRequest中返回。Listener.OnAccess和ImageRequest。Listener.错误。

图片请求ImageRequest

ImageRequest是为ImageLoader加载图像提供所有必要信息的值对象。

val request = ImageRequest.Builder(context)
    .data("https://example.com/image.jpg")
    .crossfade(true)
    .target(imageView)
    .build()

预加载

创建请求后，将其传递给ImageLoader进行排队/执行：

imageLoader.enqueue(request)

过渡

您可以使用ImageRequest启用内置的渐变。建筑商横向坡度：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .crossfade(true)
        .build(),
    contentDescription = null
)

自定义转换不适用于AsyncImage、SubcomposeAsyncImage或rememberAsyncImagePainter，因为它们需要视图引用。CrossfadeTransition的工作得益于特殊的内部支持。

也就是说，可以通过观察AsyncImagePainter的状态在Compose中创建自定义转换：

val painter = rememberAsyncImagePainter("https://example.com/image.jpg")

val state = painter.state
if (state is AsyncImagePainter.State.Success && state.result.dataSource != DataSource.MEMORY_CACHE) {
    // Perform the transition animation.
}

Image(
    painter = painter,
    contentDescription = stringResource(R.string.description)
)