一祟偷、什么是Coil
Coil是一個Android開源的圖片加載庫，使用Kotlin協(xié)程來加載圖片，Coil在 2020 年 10 月 22 日才發(fā)布了 1.0.0 版本岂膳，但卻受到了 Android官方的推廣，Coil有以下幾個特點(diǎn)：
- 更快：Coil在性能上做了很多優(yōu)化磅网，包括內(nèi)存緩存和磁盤緩存谈截、對內(nèi)存中的圖片進(jìn)行采樣、復(fù)用Bitmap涧偷、支持根據(jù)生命周期變化自動暫停和取消圖片請求等
- 更輕量級： Coil大約會給你的App增加兩千個方法（前提是你的 App 已經(jīng)集成了OkHttp和Coroutines）簸喂，Coil的方法數(shù)和Picasso相當(dāng)，相比Glide和Fresco要輕量級很多
- 更容易使用：Coil’s API 充分利用了Kotlin語言的新特性燎潮，簡化并減少了很多重復(fù)代碼
- 更流行：Coil首選Kotlin語言開發(fā)喻鳄，并且使用包含 Coroutines、OkHttp确封、Okio 和 AndroidX Lifecycles 在內(nèi)的更現(xiàn)代化的開源庫
Coil的首字母由來：Coroutine除呵，Image 和Loader 得到 Coil
Coil開源庫github地址：https://github.com/coil-kt/coil
Coil官方文檔：https://coil-kt.github.io/coil
二、引入Coil
Coil要求AndroidX與Java 8+環(huán)境
在 app/build.gradle 中添加Coil依賴包
implementation("io.coil-kt:coil:1.2.1")
AndroidManifest.xml 中加上網(wǎng)絡(luò)權(quán)限
<uses-permission android:name="android.permission.INTERNET" />
1爪喘、ImageView加載圖片
在activity_main.xml中聲明ImageView颜曾，并使用Coil為ImageView加載圖片：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="點(diǎn)擊" />
</LinearLayout>
1.1、普通加載
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url)
}
- 通過擴(kuò)展方法load加載url
- 除了String以外秉剑，還支持HttpUrl 泛豪、Url、 File秃症、 DrawableRes Int 候址、Drawable、 Bitmap等各種類型的加載
舉例子：
// Resource
imageView.load(R.drawable.image)
// File
imageView.load(File("/path/to/image.jpg"))
1.2种柑、crossfade(淡入淡出)加載
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
reloadButton.setOnClickListener {
imageView.load(url) {
crossfade(true)
}
}
1.3岗仑、crossfade的動畫時間
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
reloadButton.setOnClickListener {
imageView.load(url) {
crossfade(3000)
}
}
1.4、placeholder
placeholder預(yù)置展位圖
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url) {
placeholder(R.drawable.placeholder)
crossfade(3000)
}
}
1.5聚请、error
加載失敗時的錯誤占位圖片
val url = "https://notfound.png"
......
button.setOnClickListener {
imageView.load(url) {
error(R.drawable.error)
}
}
1.6荠雕、高斯模糊
BlurTransformation：高斯模糊變換
activity_main.xml代碼中把ImageView的高度設(shè)置成300dp
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url) {
transformations(BlurTransformation(context = applicationContext, radius = 5f, sampling = 5f))
}
}
1.7、灰度變換
GrayscaleTransformation：灰度變換
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url) {
transformations(GrayscaleTransformation())
}
}
1.8驶赏、圓形
CircleCropTransformation：圓形變換
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url) {
transformations(CircleCropTransformation())
}
}
1.9炸卑、圓角
RoundedCornersTransformation：圓角矩形變換
val url = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(url) {
transformations(
RoundedCornersTransformation(
topLeft = 10f,
topRight = 10f,
bottomLeft = 10f,
bottomRight = 10f
)
)
}
}
上面左右可以設(shè)置圓角：topLeft = 10f,topRight = 10f,bottomLeft = 0f,bottomRight = 0f
下面左右可以設(shè)置圓角：topLeft = 0f,topRight = 0f,bottomLeft = 10f,bottomRight = 10f
2、Gif加載
添加依賴包：
implementation("io.coil-kt:coil-gif:1.4.0")
官方文檔：https://coil-kt.github.io/coil/gifs/
創(chuàng)建 gif ImageLoader 實(shí)例
private val gifUrl = "https://img.zcool.cn/community/01ca905aebe350a801219b7f53a0e4.gif"
......
button.setOnClickListener {
val imageLoader = ImageLoader.Builder(this)
.componentRegistry {
if (SDK_INT >= 28) {
add(ImageDecoderDecoder())
} else {
add(GifDecoder())
}
}
.build()
//設(shè)置全局唯一實(shí)例
Coil.setImageLoader(imageLoader)
imageView.load(gifUrl) //加載gif圖片
}
}
3煤傍、視頻幀加載
implementation("io.coil-kt:coil-video:1.2.2")//支持Video
private val videoUrl = "https://vd4.bdstatic.com/mda-jbppbefbbztvws50/sc/mda-jbppbefbbztvws50.mp4"
......
button.setOnClickListener {
//創(chuàng)建 gif ImageLoader 實(shí)例
val imageLoader = ImageLoader.Builder(applicationContext)
.componentRegistry {
add(VideoFrameDecoder(this@MainActivity))
}.build()
//設(shè)置全局唯一實(shí)例
Coil.setImageLoader(imageLoader)
imageView.load(videoUrl)
}
}
5盖文、監(jiān)聽下載過程
private val imageUrl = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
imageView.load(imageUrl) {
listener(
onStart = { request ->
Log.d("coil-", "onStart")
},
onError = { request, throwable ->
Log.d("coil-", "onError")
},
onCancel = { request ->
Log.d("coil-", "onCancel")
},
onSuccess = { request, metadata ->
Log.d("coil-", "onSuccess")
}
)
}
}
6、取消下載
private val imageUrl = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
val disposable = imageView.load(imageUrl)
//取消加載
disposable.dispose()
}
f3d98b1c429f4968bffd8f9dc6d22ef2.png
7蚯姆、替換 okhttp 實(shí)例
coil底層是使用okhttp作為網(wǎng)絡(luò)請求工具五续，可以設(shè)置okHttpClient實(shí)例
private val imageUrl = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
val okHttpClient = OkHttpClient.Builder()
.cache(CoilUtils.createDefaultCache(this))
.build()
val imageLoader = ImageLoader.Builder(this).okHttpClient {
okHttpClient
}.build()
Coil.setImageLoader(imageLoader)
imageView.load(imageUrl)
}
8洒敏、自定義
private val imageUrl = "https://img-blog.csdnimg.cn/20210124002108308.png"
......
button.setOnClickListener {
val okHttpClient = OkHttpClient.Builder()
.cache(CoilUtils.createDefaultCache(this))
.build()
val imageLoader = ImageLoader.Builder(this)
.availableMemoryPercentage(0.2)
.diskCachePolicy(CachePolicy.ENABLED) //磁盤緩策略 ENABLED、READ_ONLY疙驾、WRITE_ONLY凶伙、DISABLED
.crossfade(true) //淡入淡出
.crossfade(1000) //淡入淡出時間
.okHttpClient { //設(shè)置okhttpClient實(shí)例
okHttpClient
}.build()
Coil.setImageLoader(imageLoader)
imageView.load(imageUrl)
}
轉(zhuǎn)載：https://blog.csdn.net/qq_35091074/article/details/134089606
