This is the sixth day for me to participate in the Georwin Challenge, and the event details check out: Georwin CHALLENGES from the official download-Coil

There is currently a Chinese manual project for Jetpack Compose, which aims to help developers better understand and master the Compose framework.

This article is translated and written by @Yidong. It has been published in the handbook. Please refer to it.

Please follow the wechat official account Jetpack Compose Museum for more information about Compose technology.

An overview of the

The library provides an easy-to-use Painter that uses the Coil image-loading library to fetch and display external images (such as network images).

rememberCoilPainter()

The simplest use of the main API rememberCoilPainter() is as follows:

import androidx.compose.foundation.Image
import com.google.accompanist.coil.rememberCoilPainter

Image(
    painter = rememberCoilPainter("https://picsum.photos/300/300"),
    contentDescription = stringResource(R.string.image_content_desc),
)
Copy the code

Painter uses the Coil to load the incoming data and then draws the resulting image.

Developers can also customize Coil’s ImageRequest using the requestBuilder parameter. In this way, developers can implement such as CircleCropTransformation, BlurTransformation, GrayscaleTransformation, RoundedCornersTransformation, etc Blah, blah, blah, blah, blah…

import androidx.compose.foundation.Image
import com.google.accompanist.coil.rememberCoilPainter

Image(
    painter = rememberCoilPainter(
        request = "https://picsum.photos/300/300",
        requestBuilder = {
            transformations(CircleCropTransformation())
        },
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)
Copy the code

Fade in animation

The library has built-in support for fade-in animations during image loading.

rememberCoilPainterFunction parameter offadeIn:BooleanThe default isfalsewhenfadeIn = trueA default fade animation will appear when the image is successfully loaded.

import androidx.compose.foundation.Image
import com.google.accompanist.coil.rememberCoilPainter

Image(
    painter = rememberCoilPainter(
        "https://picsum.photos/300/300",
        fadeIn = true
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)
Copy the code

Custom content

Sometimes developers may want to display placeholder images when images load or failure prompt images when images fail to load. RememberCoilPainter () returns a LoadPainter instance, ImageLoadState has four states: Empty, Loading, Success and Error correspond to initial state, Loading state, Loading Success and Loading failure respectively. Developers can display different content as needed:

val painter = rememberCoilPainter("https://picsum.photos/300/300")

Box {
    Image(
        painter = painter,
        contentDescription = stringResource(R.string.image_content_desc),
    )

    when (painter.loadState) {
        is ImageLoadState.Loading -> {
            // Display a circular progress indicator whilst loading
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }
        is ImageLoadState.Error -> {
            // If you wish to display some content if the request fails}}}Copy the code

preview

In order to support Android Studio’s Composable Previews feature, developers can pass in an image resource ID via the previewPlaceholder parameter so that the image will be displayed when Android Studio Previews the layout:

Image(
    painter = rememberCoilPainter(
        request = "https://picsum.photos/300/300",
        previewPlaceholder = R.drawable.placeholder,
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)
Copy the code

If the drawable referenced is only for the previewPlaceholder, it can be placed in the debug build variant’s resource, for example: App /debug/res/drawable/, which binds drawable to the debug version and excludes it from the release version.

GIF

First-chair IST Coil Supports GIF picture loading through the built-in GIF. For details, see the configuration description of the Coil library.

Observe the change of loading state

Developers can use snapshotFlow() to observe painter. LoadState changes to monitor the loading state of the image, and then adjust the code logic as needed:

val painter = rememberCoilPainter("https://image.url")

LaunchedEffect(painter) {
    snapshotFlow { painter.loadState }
        .filter { it.isFinalState() }
        .collect { result ->
            // TODO do something with result
        }
}

Image(painter = painter)
Copy the code

Custom ImageLoader

Use LocalImageLoader if the developer wishes to use the same default ImageLoader in all rememberCoilPainter() calls.

The following is an example:

val imageLoader = ImageLoader.Builder(context)
    // customize the ImageLoader as needed
    .build()

CompositionLocalProvider(LocalImageLoader provides imageLoader) {
    // This will automatically use the value of LocalImageLoaderImage( painter = rememberCoilPainter(...) )}Copy the code

For more information about CompositionLocal, see here.

download

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-coil:<version>"
}
Copy the code

Sonatype’s snapshots Repository provides snapshots of development versions. The snapshot is updated with each commit.