📝

Coil で URL画像を表示

に公開
Android
Coil
tech

はじめに

この記事では、**Jetpack Composeで画像を表示する定番ライブラリ Coil について試してみました。

https://developer.android.com/develop/ui/compose/graphics/images/loading?hl=ja

今回は以下のWeb画像を利用させていただきました。
https://picsum.photos/200/300

なぜCoilを使うのか？

Jetpack Composeでは Composeに最適化された画像ローディング手段 が必要になります。
そこで選ばれるのが Coil です。

Coilの特徴

  • Kotlin製
  • Jetpack Compose公式対応
  • 非同期ロードが簡単
  • キャッシュ管理を自動でやってくれる

Step1. Coilを依存関係に追加する

Version Catalogを使っている場合、以下を追加します。

libs.versions.toml

[versions]
coil = "2.6.0"

[libraries]
coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }

app/build.gradle.kts

dependencies {
    implementation(libs.coil.compose)
}

Step2. AsyncImageで画像を表示する

Coilでは、Compose用に AsyncImage が用意されています。

最小構成

import coil.compose.AsyncImage

AsyncImage(
    model = imageUrl,
    contentDescription = null
)

これだけで、

  • ネットワーク通信
  • 非同期処理
  • キャッシュ

を すべて自動で処理 してくれます。

画面いっぱいに画像全体を表示する例

AsyncImage(
    model = imageUrl,
    contentDescription = null,
    modifier = Modifier.fillMaxSize(),
    contentScale = ContentScale.Fit,
)

サイズ・トリミング

AsyncImage(
    model = imageUrl,
    contentDescription = null,
    modifier = Modifier
        .width(100.dp)
        .height(100.dp),
    contentScale = ContentScale.Crop
)

ContentScale.Cropとは？

  • 画像を枠いっぱいに表示
  • はみ出た部分は自動でトリミング

角丸

Modifier.clip を使います。

AsyncImage(
    model = imageUrl,
    contentDescription = null,
    modifier = Modifier
        .width(100.dp)
        .height(100.dp)
        .clip(RoundedCornerShape(8.dp)),
    contentScale = ContentScale.Crop
)

まとめ

  • AsyncImage を使えば一行で非同期表示
  • サイズ・角丸・null対応も簡単

Coil 便利すぎて...今後使ってみたいと思いました。

Discussion