【Android】Coil：为kotlin而生的图片库

╰半夏微凉° 2023-01-10 11:47 174阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

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

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

# 引入Coil #

--------------------

## build.gradle ##

dependencies { 
        implementation 'io.coil-kt:coil:$latested_version' //目前最新是1.1.1
                      ︙
    }

## 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">
    
        <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，可以终止加载  
    ![在这里插入图片描述][2021012400162118.gif_pic_left]

## 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  
![在这里插入图片描述][2021012400162157.gif_pic_left]

## 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)
        }
    }

![在这里插入图片描述][20210124004902357.gif_pic_left]

## placeholder ##

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

![在这里插入图片描述][20210124005250657.gif_pic_left]

## 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)
        }
    }

![在这里插入图片描述][20210124005706743.gif_pic_left]

# 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))
        }
    }

![在这里插入图片描述][20210124010134974.gif_pic_left]

## CropCircle ##

`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())
            }
        }

![在这里插入图片描述][20210124010623623.gif_pic_left]

## 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())
        }
    }

![在这里插入图片描述][20210124010837171.gif_pic_left]

## Rouded corners ##

`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))
        }

![在这里插入图片描述][20210124011201167.gif_pic_left]

# 使用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必将超越竞品成为图片加载库的第一选项。

更多内容参考：  
https://coil-kt.github.io/coil/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20221119/1aaabbb9bc6e41c98c970130bdf94127.png
[2021012400162118.gif_pic_left]: /images/20221119/e0486098ec404fbd9a0d9397c2097959.png
[2021012400162157.gif_pic_left]: /images/20221119/51a760ea130540ae8c2f0fbee83d16a3.png
[20210124004902357.gif_pic_left]: https://img-blog.csdnimg.cn/20210124004902357.gif#pic_left
[20210124005250657.gif_pic_left]: https://img-blog.csdnimg.cn/20210124005250657.gif#pic_left
[20210124005706743.gif_pic_left]: https://img-blog.csdnimg.cn/20210124005706743.gif#pic_left
[20210124010134974.gif_pic_left]: https://img-blog.csdnimg.cn/20210124010134974.gif#pic_left
[20210124010623623.gif_pic_left]: https://img-blog.csdnimg.cn/20210124010623623.gif#pic_left
[20210124010837171.gif_pic_left]: https://img-blog.csdnimg.cn/20210124010837171.gif#pic_left
[20210124011201167.gif_pic_left]: https://img-blog.csdnimg.cn/20210124011201167.gif#pic_left