JetpackCompose Coil で GIF

使い回しのきく基本的な最小構成で。

implementation "io.coil-kt:coil-compose:2.1.0"
implementation "io.coil-kt:coil-gif:2.1.0"

val url = "https://media.giphy.com/media/DhstvI3zZ598Nb1rFf/giphy-downsized-large.gif"

val imageRequest = ImageRequest.Builder(LocalContext.current)
  .data(url)
  .crossfade(true)
  .build()

val imageLoader = ImageLoader.Builder(LocalContext.current)
  .components {
    add(if (SDK_INT >= 28) ImageDecoderDecoder.Factory() else GifDecoder.Factory())
  }
  .build()

AsyncImage(
  model = imageRequest,
  imageLoader = imageLoader,
  contentDescription = null
)

ProgressIndicator は常にあるほうがいい。

@Composable
fun AsyncImageGif(
  url: String
) {
  val context = LocalContext.current

  val imageRequest = ImageRequest.Builder(context)
    .data(url)
    .crossfade(true)
    .build()

  val imageLoader = ImageLoader.Builder(context)
    .components {
      add(if (SDK_INT >= 28) ImageDecoderDecoder.Factory() else GifDecoder.Factory())
    }
    .build()

  SubcomposeAsyncImage(
    model = imageRequest,
    contentDescription = null,
    imageLoader = imageLoader,
    modifier = Modifier.fillMaxWidth(),
    loading = {
      CircularProgressIndicator(
        modifier = Modifier.requiredSize(48.dp),
      )
    },
    error = {
      Icon(Icons.Filled.Error, null)
    }
  )
}

Any? な引数て使いづらいな。

👉 【最新情報】3つの画像読み込みライブラリ Glide / Picasso / Coil - JetpackCompose 対応の状況