[Android] Picasso でネット上の画像をGridViewで表示

ギャラリーやフォトアプリのように作るにはGridViewを使いますが、画像の扱いはうっかりするとOutOfMemoryにはまってしまいます。

そこでそういったところを簡単にしてくれるライブラリーPicassoを使ってGridViewを作ってみます。

Android Studio
2021.2.1

 




Picasso

 
Picassoはネット上の画像をもってくるのも簡単にできています。通常であれば非同期での http接続を考えなければいけないところ、コードがとても簡単になります。
 
1x1.trans - [Android] Picasso でネット上の画像をGridViewで表示

 

PicassoをGridViewに導入

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

 

サンプルコード

 
例えば、下のような10個の画像をサーバーに上げて、それをダウンロードして表示させて見たいと思います。
 
1x1.trans - [Android] Picasso でネット上の画像をGridViewで表示


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

 
Picassoを使うための設定
バージョンは Picasso
を確認して合わせてください。
(2.71828はAndroidXに未対応のようです2019/8)

 
MainActivity.java

 

アダプター
GridAdapter.java

 
レイアウトです。
activity_main.xml

 
grid_items.xml

 
strings.xml

 

サンプル動画

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

1x1.trans - [Android] Picasso でネット上の画像をGridViewで表示


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

1x1.trans - [Android] Picasso でネット上の画像をGridViewで表示

 

placeholderとerror画像をdrawableに入れて実行してみます

 

 

drawable, assets

 
Picassoなので設定はdrawable, assets, アプリ内の内部ストレージでもネットURLと同様になります。
 
.loadでdrawableのR.darowable.XXXを呼び出す

 
assetsでは
“file:///android_asset/yuka1000x1000”
というassets用のパスを指定すると画像を引っ張ってこられます。

また内部ストレージではファイルのパスは
/data/data/(package name)/files/…
となります
 
 
関連記事:

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




シェアする

  • このエントリーをはてなブックマークに追加

フォローする