随着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">
<ImageView
android:id="@+id/image_view"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="#CCCCCC"/>
<Button
android: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必将超越竞品成为图片加载库的第一选项。