はじめに
業務でAndroidアプリ上でjpegやgifなどを表示させることになって、いろいろ調べて実際に使用した方法を振り返りとしてまとめてみました。
今回は自前コードを減らして作成したかったので、Glideというライブラリを紹介しながら進めていきます。
Glide
今回は画像をネットワーク上から簡単に取得できるライブラリであるGlideを使用してみました。
同様なライブラリとしてPiccasoなどがありますが、こちらはgif未対応でした。
Glideの使用方法
まず、bulde.gradleに依存関係を記述します。
dependencies {
implementation 'com.github.bumptech.glide:glide:4.4.0'
}
また、ネットワーク上の画像を読み込んで来るため、忘れないようにAndroidManifest.xmlの記述も行っておきます。
これ忘れてしまうと、ネットワークから画像を取得できなかったです。
<uses-permission android:name="android.permission.INTERNET"/>
レイアウトファイルの準備を行います。
Glideで読み込む画像のレイアウトとして、レイアウトファイルにImageViewを作成します。
<ImageView
android:id="@+id/test_glide_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
あとは、ActivityなどでGlideを利用して画像取得先の指定などを実装します。
自前でやろうとすると、専用のクラス作ったりしますが、Glideを使用すると非常に簡単に実装できます。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(findViewById(R.id.toolbar))
// 画像取得先URL
val testUrl: String = mPng8
// ImageViewを取得
val testImage: ImageView = view.findViewById(R.id.test_glide_image)
// Glideで画像取得
Glide.with(this)
.load(testUrl)
.into(testImage)
}
GlideApp
Glideはv4からGlideではなくGlideAppを使用するようになります。
Glideと比べてオプションの指定方法が変わり、画像を表示させる方法も拡充され、以下のようなことが可能となります。
- アイコン（画像）を丸くする
- 横幅の最大まで中央寄せ表示
以下の例ではアイコンを丸くする方法を記載します。
GlideAppを使用したい場合、以下の設定が必要でした。
dependencies {
classpath "com.android.tools.build:gradle:4.0.1"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
次に、GlideModuleアノテーションを付けたAppGlideModuleを継承するクラスを実装します。
この際、メンバー、中の実装などは不要でした。
package com.example.glidetest
import com.bumptech.glide.annotation.GlideModule
import com.bumptech.glide.module.AppGlideModule
@GlideModule
class MyAppGlideModule: AppGlideModule() {
}
読み込みの処理も、Glideと同様Activityに実装します。
// GlideAppでの画像取得
GlideApp.with(this)
.load(testUrl)
.into(testImage)
アイコンを丸くしたい場合は、上記の読み込み処理にcircleCrop()を追加することで画像を丸くすることができます。
// GlideAppでの画像取得
GlideApp.with(this)
.load(testUrl).circleCrop()
.into(testImage)
今回ハマったところ
Glideを利用するにあたり、すごくハマった点はImageViewの領域に画像が入りきらなかったことです。
ImageViewの縦横指定と画像の縦横比があっていない場合にうまく画像が表示されないことがありました。
縦横比を無視して表示したい場合は、Glideのオプションを指定するのではなく、単純にImageViewのscaleTypeの指定をfitXYにしてやることで、画像全体を縦横比無視して出せました。
おわりに
今回、初めてライブラリを使用した画像取得の処理を実装してみましたが、自前のソースを実装するのに比べてかなり実装量が減らすことができて楽でした。
他にもまだまだ機能があるようなので今後も実装を進めつつ理解を深めていきたいと思います。
また、今回はまだ一部の機能だけを利用しましたが、Glideだけでなく他のライブラリなどで便利なものなどは積極的に理解して使用できるようにしていきたいです。