【Kotlin/Android Studio】Glideの使い方!画像読み込みライブラリ
この記事からわかること
- Android Studio/Kotlinの画像読み込みライブラリGlideの使い方
- プレースホルダーや読み込みエラー時に表示させる画像を指定する
- 丸く切り抜く方法やアニメーションを実装するには?
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
公式リファレンス:画像の読み込み
公式リファレンス:Glide v4
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
Glideとは?
GlideはAndroidアプリ開発のための画像読み込みライブラリです。通常に画像を読み込むよりも高速かつ効率的に読み込めるようになっており、スクロールしてもスムーズに動作してくれます。またサポート範囲が広く静止画、動画、画像、アニメーション、GIFなど様々なメディアをサポートしています。
Glideが大きなメリットとして謳っているのは以下の2つです。
- 画像をデコードできる速度
- 画像のデコード中に発生したジャンクの量
使い方
- 依存関係を追加する
- インターネットの使用許可
- 表示するレイアウトを定義する
- Glideを使用して画像を読み込む
依存関係を追加する
Glideを利用するためにはプロジェクトに依存関係を追加する必要があります。「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" />
を追加する必要があります。
<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)
公式リファレンス:DrawableTransitionOptionsクラス
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。