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

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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

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

環境

Glideとは?

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

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

使い方

  1. 依存関係を追加する
  2. インターネットの使用許可
  3. 表示するレイアウトを定義する
  4. 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読み込み対象のURLinto表示させたい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)
【Kotlin/Android Studio】Glideの使い方!画像読み込みライブラリ

画像のサイズを指定する

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

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

アニメーション

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

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

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

公式リファレンス:DrawableTransitionOptionsクラス

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index