AndroidでURLの画像を表示する

パッケージを使うと簡単に URL から画像を取得して表示することができます.

更に,キャッシュを使ったりプレースホルダーを設定したりするのも楽なので嬉しい限りです.

Introduction

有名なパッケージは二つあります.語弊を恐れずに言うと Picasso はシンプル,Glide は高機能という感じです.

Picasso

Picasso.get()
    .load(url)
    .into(imageView);

これだけで表示できるのが便利.

Glide v3

Glide.with(fragment)
    .load(url)
    .into(imageView);

fragment だけでなく context でもいけそうです.Glide v3 は Picasso と書き方がかなり近いので,移行しやすそうです.

Glide v4

GlideApp.with(fragment)
   .load(url)
   .error(new ColorDrawable(Color.BLACK))
   .into(imageView);

Java ではアノテーションプロセッサを使ってコンパイル時にコードを生成することができるらしいですが,Glide v4 ではこれを利用して v3 よりも簡潔に書けるようです.

また,v3 ではプレースホルダーやエラー時の処理を用意したいときには別に表記する必要がありましたが,v4 では .placeholder().error() のようにして続けて書くことができます.

ちなみに画像を丸く切り取るときは .circleCrop() を使うと一発です.

How To

今回は Glide v4 を使ってみます.公式ドキュメント が充実しているので,ひよこの私には嬉しい限りです.

Gradle 設定

repositories {
  mavenCentral()
  maven { url 'https://maven.google.com' }
}

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.8.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'
}

誤って annotationProcessor 'com.github.bumptech.glide:glide:4.8.0' と記述したために GlideApp が呼び出せずに苦労した深夜3時...

Manifest 設定

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package.name"

    <uses-permission android:name="android.permission.INTERNET"/>
    <!--
    Allows Glide to monitor connectivity status and restart failed requests if users go from a
    a disconnected to a connected network state.
    -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application>
      ...
    </application>
</manifest>

画像を取得するためにインターネットに接続する権限を追加します.

Proguard 設定

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

必要に応じて Proguard の設定を追加します.

新規 Java ファイル作成

package com.example.myapp;

import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

上記の設定と Java ファイルを作成・保存した後に [build] > [Rebuild Project] を実行すると GlideApp が呼び出せるようになります.

後は Introduction の Glide v4 のように記述すれば動きます.