Jetpack Composeでネットワーク上の画像をUIに表示する

Android

こんにちは。エキサイト株式会社 Androidエンジニアの克です。

今回はJetpack ComposeのUIで、URLから画像を表示する方法についてお話します。

現在、画像の読み込みに関しての機能はComposeには実装されていませんが、こういった「必要とされているがまだ利用することはできない機能」をサポートするライブラリ群としてAccompanistというものがあります。

こちらに画像表示のためのライブラリも存在しているので、今回はこれを利用していこうと思います。

※ 今回紹介する機能はいずれJetpack Compose本体に実装されることが想定されます。サポート状況については公式のドキュメントを参照してください。

使用するライブラリ

Composeで画像を表示するためのAccompanistライブラリとして、下記の2種類が存在します。

  • Coil
  • Glide

Glide

GlideのCompose用のライブラリです。 ただし、特に理由がない場合には後述するCoilを利用することが推奨されています。

Unless you have a specific requirement to use Glide, consider using Coil instead.

https://google.github.io/accompanist/glide/

Coil

CoilのCompose用のライブラリです。 Glideと比較すると、Coroutineのサポートが強くComposeと相性が良いという理由でこちらの利用が推奨されています。

https://google.github.io/accompanist/coil/

実装

URLから画像を読み込んでImageに表示するだけであれば、実装はとても簡単です。

// Coin
Image(
    painter = rememberCoilPainter("画像のURL"),
    contentDescription = null
)

// Glide
Image(
    painter = rememberGlidePainter("画像のURL"),
    contentDescription = null
)

他にも画像の加工やアニメーションなど、様々な機能がサポートされています。

公式のドキュメントを参考にしていろいろと試してみるとよいでしょう。

最後に

既存のView実装でできていたことはComposeでもできるようになっていくでしょう。

Composeはまだベータ版であり足りていない機能も多いですが、7月に安定版がリリースされる予定ですし徐々に機能も拡充されていくと思います。

扱いやすい面も多いため、Composeのこれからの発展が楽しみです。