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

タイトルとURLをコピーしました