🐻‍❄️

Jetpack Compose で Coil を利用して画像を表示する方法まとめ

10 min read

はじめに

Jetpack Compose でアプリを作成している際に Coil を利用して画像を表示する方法をまとめます。

Coil

セットアップ

build.gradle(app) に以下の内容を記述してcoil-compose をインストールする。

dependencies {implementation("io.coil-kt:coil-compose:1.4.0")}

また今回のサンプルではネットワーク経由で画像を取得するのであればパーミッションを追加しておきます。(また暗号化されていないHTTP 通信経由で画像を取得するのであれば cleartextTrafficPermittedtrueにしておく必要があります。)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="jp.kaleidot725.sample">
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Sample"
        android:usesCleartextTraffic="true"
        tools:targetApi="31"></application>

</manifest>

Coil で画像を読み込む

rememberImagePainterImagePainter を生成し、Image の painter にセットするだけで画像を読み込める。

@Composable
fun SimpleImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(imageUrl),
        contentDescription = null
    )
}

Device-2022_01_08_01_35_45.png

ちなみに生成した ImagePainterには State というプロパティが定義されており、State を確認することで画像の取得の成否が確認できるようになっている。なので画像が取得できないなど不具合に遭遇した場合には State を確認すれば原因を突き止められる。

@Composable
fun StateCheckImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"
    val painter = rememberImagePainter(imageUrl)
    Image(
        painter = painter,
        contentDescription = null,
        modifier = Modifier.size(128.dp)
    )

    Log.v("TEST", "${painter.state}")
}

State とは ImagePainter クラスに定義される enum class のことで以下のように Empty Loading Success Error の4種類の状態が定義されている。

@ExperimentalCoilApi
    sealed class State {

        /** The current painter being drawn by [ImagePainter]. */
        abstract val painter: Painter?

        /** The request has not been started. */
        object Empty : State() {
            override val painter: Painter? get() = null
        }

        /** The request is in-progress. */
        data class Loading(
            override val painter: Painter?,
        ) : State()

        /** The request was successful. */
        data class Success(
            override val painter: Painter,
            val result: SuccessResult,
        ) : State() {

            @Deprecated(
                message = "Migrate to `result.metadata`.",
                replaceWith = ReplaceWith("result.metadata")
            )
            val metadata: ImageResult.Metadata get() = result.metadata
        }

        /** The request failed due to [ErrorResult.throwable]. */
        data class Error(
            override val painter: Painter?,
            val result: ErrorResult,
        ) : State() {

            @Deprecated(
                message = "Migrate to `result.throwable`.",
                replaceWith = ReplaceWith("result.throwable")
            )
            val throwable: Throwable get() = result.throwable
        }
    }

画像を読み込むときにクロスフェードする

crossfadetrue にするとクロスフェードするようにできる。

@Composable
fun CrossFadeImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                crossfade(true)
            }
        ),
        contentDescription = null
    )
}

2022-01-08 01-41-11.2022-01-08 01_41_58.gif

画像を読み込むときにクロスフェードの秒数(ms)を指定する

crossfade には Int でどれぐらいの間隔でクロスフェードするか指定できる。

@Composable
fun CrossFadeMsImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                crossfade(3000)
            }
        ),
        contentDescription = null
    )
}

2022-01-08 01-43-42.2022-01-08 01_44_30.gif

プレースホルダー画像を設定する

placeholder にて指定した URL の画像の読み込みが完了する前のプレースホルダー画像を drawable リソースから指定できる。

@Composable
fun ImageWithPlaceHolder() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                placeholder(R.drawable.placeholder)
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_09_43_43.2022-01-08 09_44_38.gif

エラー画像を設定する

error にて指定した URL の画像の読み込みに失敗したときのエラー画像を drawable リソースから指定できる。

@Composable
fun ImageWithError() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                error(R.drawable.error)
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_09_40_52.2022-01-08 09_41_46.gif

読み込む画像を加工する

Coiil では Blur CircleCrop Grayscale RoundedCorner の4種類の加工ができる

Blur

ガウシアンフィルターをかけてぼかしが効いた画像に加工できる。

@Composable
fun BlurImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                transformations(BlurTransformation(LocalContext.current))
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_09_54_07.png

CircleCrop

円形にクロッピングした画像に加工できる。

@Composable
fun CircleImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                transformations(CircleCropTransformation())
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_09_50_19.png

GrayScale

グレースケールに画像を加工できる。

@Composable
fun GrayScaleImage() {
    val imageUrl = "https://developer.android.com/images/brand/Android_Robot.png"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                transformations(GrayscaleTransformation())
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_09_55_25.png

Rounded Corner

角を丸めた画像に加工できる。

@Composable
fun RoundedCornerImage() {
    // Photo by <a href="https://unsplash.com/@gcoppa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Guido Coppa</a> on <a href="https://unsplash.com/s/photos/android?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
    val imageUrl = "https://images.unsplash.com/photo-1580860749755-f49eb5509d55?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2874&q=80"

    Image(
        painter = rememberImagePainter(
            data = imageUrl,
            builder = {
                transformations(RoundedCornersTransformation(topLeft = 128f, topRight = 128f, bottomLeft = 128f, bottomRight = 128f))
            }
        ),
        contentDescription = null
    )
}

TEST-2022_01_08_10_01_13.png

Discussion

ログインするとコメントできます