由 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)
)