2023/9/20

【Kotlin/Android Studio】Glideの使い方！画像読み込みライブラリ

この記事からわかること

Android Studio/Kotlinの画像読み込みライブラリGlideの使い方
プレースホルダーや読み込みエラー時に表示させる画像を指定する
丸く切り抜く方法やアニメーションを実装するには？

index

[open]

Glideとは？
使い方
依存関係を追加する
インターネットの使用許可
表示するレイアウトを定義する
Glideを使用して画像を読み込む
画像のロードを明示的に中止する
プレースホルダーを設置する
読み込みエラー時に表示する画像を指定する
画像を丸く切り抜く
画像のサイズを指定する
アニメーション

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

公式リファレンス：画像の読み込み
公式リファレンス：Glide v4

環境

Android Studio：Flamingo
Kotlin：1.8.20

Glideとは？

GlideはAndroidアプリ開発のための画像読み込みライブラリです。通常に画像を読み込むよりも高速かつ効率的に読み込めるようになっており、スクロールしてもスムーズに動作してくれます。またサポート範囲が広く静止画、動画、画像、アニメーション、GIFなど様々なメディアをサポートしています。

Glideが大きなメリットとして謳っているのは以下の2つです。

画像をデコードできる速度
画像のデコード中に発生したジャンクの量

使い方

依存関係を追加する
インターネットの使用許可
表示するレイアウトを定義する
Glideを使用して画像を読み込む

依存関係を追加する

Glideを利用するためにはプロジェクトに依存関係を追加する必要があります。「build.gradle(Module)」内に以下のように追加します。

build.gradle(Module)
def glide_version = "4.14.2"
implementation "com.github.bumptech.glide:glide:$glide_version"
kapt "com.github.bumptech.glide:compiler:$glide_version"

インターネットの使用許可

AndroidアプリからWebへアクセスするためには「AndroidManifest.xml」に<uses-permission android:name="android.permission.INTERNET" />を追加する必要があります。

AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
+   <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"

この追加を忘れると表示されなくなってしまう可能性があるので注意してください。

表示するレイアウトを定義する

画像を表示するレイアウトを準備しておきます。

<ImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Glideを使用して画像を読み込む

Glideを使用して画像を読み込みViewと紐付けていきます。GlideのwithメソッドにActivityを渡し、loadに読み込み対象のURLをintoに表示させたいViewを渡します。

val imageView:ImageView = findViewById(R.id.image)
val imgUrl = "https://appdev-room.com/image/android.png"
Glide.with(this)
    .load(imgUrl)
    .into(imageView)

これで画像が表示されるようになります。Glideには他にも様々な機能が用意されています。その一部を紹介していきます。

画像のロードを明示的に中止する

画像のロードを明示的に中止するにはclearメソッドを使用します。ですが実際には渡されたアクティビティまたはフラグメントが破棄されると自動的にロードをクリアし、使用されたリソースをリサイクルしてくれるようです。

Glide.with(this)
  .clear(imageView)

プレースホルダーを設置する

画像が表示されるまでの間に表示するプレースホルダーを設置するにはplaceholderに表示させたいリソースを渡します。

Glide.with(this)
  .load(imgUrl)
  .placeholder(R.drawable.ic_launcher_foreground)
  .into(imageView)

読み込みエラー時に表示する画像を指定する

読み込みエラー時に表示する画像を指定するにはerrorに表示させたいリソースを渡します。

Glide.with(this)
  .load(imgUrl)
  .error(R.drawable.ic_launcher_foreground)
  .into(imageView)

画像を丸く切り抜く

画像を丸く切り抜くにはcircleCropを使用します。

Glide.with(this)
  .load(imgUrl)
  .circleCrop()
  .into(imageView)

画像のサイズを指定する

表示する画像のサイズはレイアウト側で指定したサイズになりますが、overrideを使用することでサイズをオーバーライドすることも可能です。

Glide.with(this)
  .load(imgUrl)
  .circleCrop()
  .override(150, 150)
  .into(imageView)

アニメーション

画像を読み込む際にアニメーションを実装するにはtransitionにDrawableTransitionOptions型の値を渡します。そのためには使用するアニメーションのimport文を使用する必要があります。

import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade

Glide.with(this)
  .load(imgUrl)
  .circleCrop()
  .transition(withCrossFade())
  .into(imageView)