AndroidでURLの画像を表示する

2018-11-26

パッケージを使うと簡単に 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 が呼び出せずに苦労した深夜３時...

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 のように記述すれば動きます．

mktia's note