當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/4/15 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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里添加網絡權限。

使用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 淡入效果加載

通過kotlin的尾lambda語法，load(url) {... }內部啟動crossfade。

crossfade 淡入效果的時間設置

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)時，通過指定此實例復用上面的配置。

當然我們也可以通過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必將超越競品成為圖片加載庫的第一選項。