Coil - Google推荐的协程图片加载库

随着Kotlin的转正，Glide不再是最佳选择。看一下Google极力推荐的Coil框架。

GitHub：Coilhttps://coil-kt.github.io/coil/

Pangu-Immortal (Pangu-Immortal) · GitHub

Coil可以配合Kotlin协程实现图片加载，非常适合在Kotlin/Android项目中使用：

性能优秀
体积较小：其包体积与Picasso相当，显著低于Glide和Fresco，仅仅只有1500个方法，但是在功能上却不输于其他同类库
简单易用：配合Kotlin扩展方法等语法优势，API简单易用
技术先进：基于Coroutine、OkHttp、Okio、AndroidX等先端技术开发，确保了技术上的先进性
丰富功能：缓存管理（MemCache、DiskCache）、动态采样（Dynamic image sampling）、加载中暂停/终止等功能有助于提高图片加载效率

环境构筑

build.gradle里添加依赖。

dependencies {// 正常引入这一个库就可以了。implementation 'io.coil-kt:coil:1.4.0'// Coil视频解析库，用来解析封面图。// 如果imageView的资源不是图片地址，而是个视频地址，可以用这个库，加载视频的第一帧。implementation 'io.coil-kt:coil-video:1.2.0'
}

AndroidManifest.xml里添加网络权限。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="kaleidot725.coilsample"><uses-permission android:name="android.permission.INTERNET" />
</manifest>

使用ImageView加载图片

我们在activity_main.xml中声明ImageView，并使用Coil为ImageView加载图片：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><ImageViewandroid:id="@+id/image_view"android:layout_width="300dp"android:layout_height="300dp"android:layout_gravity="center"android:background="#CCCCCC"/><Buttonandroid:id="@+id/reload_button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right|bottom"android:layout_margin="16dp"android:text="Reload"/>
</FrameLayout>

普通加载

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {val disposable = imageView.load(url)disposable.dispose()
}

通过扩展方法load加载url
除了String以外，还支持HttpUrl 、Url、 File、 DrawableRes Int 、Drawable、 Bitmap等各种类型的加载
load返回Disposable，可以终止加载

crossfade 淡入效果加载

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {crossfade(true)}
}

通过kotlin的尾lambda语法，load(url) {... }内部启动crossfade。

crossfade 淡入效果的时间设置

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {crossfade(3000)}
}

placeholder 设置占位图

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {placeholder(R.drawable.placeholder)crossfade(3000)}
}

error 设置出错时候的占位图

val url = "https://notfound.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {error(R.drawable.error)}
}

Transformations 图片变换

图片加载时，可以通过transformations对图片进行变换处理，目前支持Blur、CropCircle、Grayscale、Rouded corners等四种变换效果。

Blur 高斯模糊

通过BlurTransformation类可以实现时下流行的毛玻璃效果。

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {transformations(BlurTransformation(context = applicationContext, radius = 5f, sampling = 5f))}
}

CropCircle 圆形切图

圆形头像、圆形ICON也是非常常见的设计需求，CircleCropTransformation类则可帮助我们实现。

 val url = "https://img-blog.csdnimg.cn/20210124002108308.png"val imageView = findViewById<ImageView>(R.id.image_view)val reloadButton = findViewById<Button>(R.id.reload_button)reloadButton.setOnClickListener {imageView.load(url) {transformations(CircleCropTransformation())}}

Grayscale 灰度变换

特殊节日或事件的时候，难免需要将图片变灰展示。而GrayscaleTransformation类则是对应的转换类。

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {transformations(GrayscaleTransformation())}
}

Rouded Corners 圆角效果

除了带火了毛玻璃效果，iOS上推出的圆角效果在设计界也大受欢迎。RoundedCornersTransformation类则可以实现圆角矩形的变换。

val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url) {transformations(RoundedCornersTransformation(topRight = 10f, topLeft = 10f, bottomLeft =  10f, bottomRight =  10f))}
}

复用ImageLoader

除了上面介绍的在load(url)时，在尾lambda内进行各种配置以外，还可以通过创建ImageLoader，复用配置。

上面介绍的所有配置都可以在ImageLoader中进行，此外，还可以进行Memory Cache、Bitmap Pooling等更加多样化的配置。

val imageLoader = ImageLoader(applicationContext) {crossfade(true)placeholder(R.drawable.placeholder)error(R.drawable.error)availableMemoryPercentage(0.1)bitmapPoolPercentage(0.1)
}

如上，我们创建imageLoader实例后，后续可以在load(url)时，通过指定此实例复用上面的配置。

val url = "https://notfound.png"
val imageView = findViewById<ImageView>(R.id.image_view)
val reloadButton = findViewById<Button>(R.id.reload_button)
reloadButton.setOnClickListener {imageView.load(url, imageLoader)
}

当然我们也可以通过Coil#setDefaultImageLoader()，指定全局的默认ImageLoader，避免每次load时单独指定。

  Coil.setDefaultImageLoader(ImageLoader(applicationContext) {crossfade(true)placeholder(R.drawable.placeholder)error(R.drawable.error)availableMemoryPercentage(0.1)bitmapPoolPercentage(0.1)})val url = "https://notfound.png"val imageView = findViewById<ImageView>(R.id.image_view)val reloadButton = findViewById<Button>(R.id.reload_button)reloadButton.setOnClickListener {imageView.load(url)}

结语

Coil配合Kotlin强大的语法特性打造了优秀的使用体验，功能上完全对标竞品毫不逊色。可以预见，随着Kotlin在Andorid开发中比重的日益提升，Coil必将超越竞品成为图片加载库的第一选项。

Pangu-Immortal (Pangu-Immortal) · GitHub