The framework is introduced

Coil is a new image loading framework for Android. Its full name is Coroutine Image Loader. Compare that to traditional image loading libraries such as Glide, Picasso or Fresco. This has the advantages of being lightweight (only about 1500 methods), fast, easy to use, and a more modern API. It supports GIF and SVG, and can perform four default conversions: Blur, circle cropping, grayscale, and rounded corners. Written entirely in Kotlin, this library should be your first choice if you are a pure Kotlin project.

This is a very new image loading library, written entirely in Kotlin, using Kotlin’s coroutine. The image web request mode defaults to Okhttp. Compared to Picasso, Glide or Fresco, it has the following features:

  1. Fast enough, it is optimized for details such as memory, image storage, image sampling, Bitmap reuse, pause/undownload, etc. (compared to the above three frameworks);
  2. Light enough, only about 1500 core methods, also relative to PGF;
  3. New enough, modern enough! Written with the latest Koltin coroutines, LifeCycle takes full advantage of CPU performance, as well as newer Android libraries such as OKHttp, Okio and LifeCycle.

use

The Github address is Coil

First you need to configure your AS environment to include the Kotlin development environment, and then add dependencies:

//Coil image loading library
implementation("IO. Coil - kt: coil: 1.1.1")
Copy the code

To load an image into ImageView, use the Load extension:

// URL
imageView.load("https://www.example.com/image.jpg")
 
// Resource
imageView.load(R.drawable.image)
 
// File
imageView.load(File("/path/to/image.jpg"))
 
// And more...
Copy the code

Optional configuration requests can be made using:

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(R.drawable.image)
    transformations(CircleCropTransformation())
}
Copy the code

Basic changes:

The Coil offers four conversions by default: Fuzzy transform (BlurTransformation), round transform (CircleCropTransformation), gray level transformation (GrayscaleTransformation) and rounded transform (RoundedCornersTransformation) :

Basic usage:

imageView.load(IMAGE_URL){
     transformations(GrayscaleTransformation())
}
Copy the code

Directly add the transformation can, at the same time can support a variety of transformation:

 imageView.load(IMAGE_URL) {
            transformations(GrayscaleTransformation(),
                            RoundedCornersTransformation(topLeft = 2f, topRight = 
            2f,bottomLeft = 40f, bottomRight = 40f))}Copy the code

Gif load

The Coil base package does not support Gif loading, so extend package needs to be added:

//Coil image loading library
implementation("IO. Coil - kt: coil - GIF: 0.9.5")
Copy the code

Now you need to change the way your code works by registering the Gif component in imageLoader:

val gifImageLoader = ImageLoader(this) {
            componentRegistry {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
                    add(ImageDecoderDecoder())
                } else {
                    add(GifDecoder())
                }
            }
}
Copy the code

After using this component, ImageView can directly use:

id_image_gif.load(GIF_IMAGE_URL, gifImageLoader)
Copy the code

SVG is loaded

Coil can also be SVG loaded and, like GIF, extends:

//Coil image loading library
implementation("IO. Coil - kt: coil - SVG: 0.9.5")
Copy the code

The code is as follows:

val svgImageLoader = ImageLoader(this){
            componentRegistry {
                add(SvgDecoder(this@MainActivity))
            }
        }
 
id_image_svg.load(R.drawable.ic_directions_bus_black_24dp, svgImageLoader)
Copy the code

Glide Picasso moved to Coil

An extension of the basic usage is:

// Glide
     Glide.with(context)
    .load(url)
    .into(imageView)
 
// Picasso
     Picasso.get()
    .load(url)
    .into(imageView)
 
// Coil
   imageView.load(url)
Copy the code

Image setting ScaleType:

imageView.scaleType = ImageView.ScaleType.FIT_CENTER
 
    // Glide
    Glide.with(context)
     .load(url)
     .placeholder(placeholder)
     .fitCenter()
     .into(imageView)
 
    // Picasso
    Picasso.get()
        .load(url)
        .placeholder(placeholder)
        .fit()
        .into(imageView)
 
    // Coil (autodetects the scale type)
    imageView.load(url) {
     placeholder(placeholder)
}
Copy the code