［Android］Coil で Gif を表示してみる

はじめに

Coil では Gif 画像をサポートしており、Gif 画像を表示できるようになっています。
今回は実際にどのような感じで使えるのか試してみたいと思います。

準備

Gif 画像を表示するには Gif モジュールを依存関係に追加する必要があります。
次のように build.gradle に追記して Gif モジュールを依存関係として追加します。

dependencies {
      ︙
    implementation "io.coil-kt:coil:1.0.0"
    implementation "io.coil-kt:coil-gif:1.0.0"
      ︙
}

実装

raw フォルダに Gif 画像を格納する

表示する Gif 画像は raw フォルダに格納します。
なので次のように raw フォルダを作成して Gif 画像を格納しておきます。

raw フォルダから動画ファイルを読み込む

Gif 画像を読み込むために raw フォルダに格納したファイルの URI を作成してやります。

    private fun getGifUri(@RawRes rawResId: Int): Uri? {
        return Uri.parse("android.resource://$packageName/$rawResId")
    }

あとは Gif 画像を読み込むための ImageLoader を作成してやります。

    // Coil公式にも記載があるのですが SDK 28 以上であれば ImageDecoderDecoder というデコーダが Android で
    // 提供されているらしくこちらを使うのが早いそうです。なので SDK 28 以上であれば ImageDecoderDecoder を
    // そうでなければ GifDecoder を使うようにしてやります。
    private fun getGifDecoder(): Decoder {
        return if (Build.VERSION.SDK_INT >= 28) ImageDecoderDecoder() else GifDecoder()
    }

あとは生成した URI と ImageDecoder を使って load を呼び出してやれば次のような感じで Gif 画像を表示できます。

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val uri = getGifUri(R.raw.circle)
        val loader = ImageLoader.Builder(applicationContext).componentRegistry { add(getGifDecoder()) }.build()

        val imageView = findViewById<ImageView>(R.id.gif_image_view)
        imageView.load(uri = uri, imageLoader = loader)
    }

おわりに

アニメーション画像は Lottie を使うことも多いかと思いますが Gif 画像でもいいんじゃねというケースもありそうです。なので Coil を使っているときには Gif 画像での機能実現を検討しても良いのではないかなと思いました。

参考文献

• Coil - Gifs