[Android] Picasso を使ってネット上の画像をGridViewで表示してみた

ギャラリーやフォトアプリのように作るにはGridViewを使いますが、画像の扱いはうっかりするとOutOfMemoryにはまってしまいます。そこでそういったところを簡単にしてくれるライブラリーPicassoを使ってGridViewを作ってみます。
 

Android Studio 3.0.1
Android 8.1.0

 



Picasso

 
Picassoはネット上の画像をもってくるのも簡単にできています。非同期で http接続は考えなくてもできますのでコードがシンプルになりますね。
 

 

PicassoをGridViewに導入

 
Picassoにサンプルコードがあります。ただ膨大な量なので美味しいところだけつまんでみたいということです。Picasso 大きい画像を扱ってみるで基本的な使い方がわかります。ほぼ1行です。
 
GirdViewの基本的なところは GridViewの作り方使い方 を参照してください。
 
ざっくりした差分としてはViewHolderをやめて、Picassoの画像ダウンロードを記述するところです。
 

 

サンプルコード

 
例えば、下のような10個の画像をサーバーに上げて、それをダウンロードして表示させて見たいと思います。
 

 
画像サイズはバラバラですが、端末の画面が高解像度で横幅が1000ピクセルを超えているものに綺麗に表示させることを考えて、画面サイズの半分程度1000pix〜290pixあたりの大きさのものにしてみました。
 
ネットワークを使うのでマニフェストにpermissionを設定
AndroidManifest.xml

 
Picassoを使うための設定
バージョンは Picasso を確認して合わせてください。

 
MainActivity.java

 
GridAdapter.java

 
レイアウトです。
activity_main.xml

 
grid_items.xml

 
strings.xml

 

サンプル動画

 
画像をダウンロードするのですが、通信状況が悪くダウンロードに時間がかかる、あるいは接続先の画像がなかったりすることも考えられます。
ダウンロードに時間がかかって画像が表示されるまで、placeholderを表示させて


接続先の画像に問題があってダウンロードが失敗した場合に、エラー画像を表示させてみましょう。

 

 

 

drawable, assets

 
Picassoなので設定はdrawable, assetsもネットURLと同様になります。
 
.loadでdrawableのR.darowable.XXXを呼び出す

 
assetsでは
“file:///android_asset/yuka1000x1000”
というassets用のパスをしていすると画像を引張てこられます。
 
 
関連記事:

 
References:
Grid View | Android Developers
GridView | Android Developers
Picasso