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

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

Android Studio 3.1
Android 8.1.0

 



Picasso

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

 

PicassoをGridViewに導入

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

 

320x480 0107ddd2cbf3fe9b2650df47e5e47ebd d740e - [Android] Picasso を使ってネット上の画像をGridViewで表示してみた

サンプルコード

 
例えば、下のような10個の画像をサーバーに上げて、それをダウンロードして表示させて見たいと思います。
 
gridview picasso 01 - [Android] Picasso を使ってネット上の画像をGridViewで表示してみた
 
画像サイズはバラバラですが、端末の画面が高解像度で横幅が1000ピクセルを超えているものに綺麗に表示させることを考えて、画面サイズの半分程度1000pix〜290pixあたりの大きさのものにしてみました。
 
ネットワークを使うのでマニフェストにpermissionを設定
AndroidManifest.xml

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

 
MainActivity.java

 
GridAdapter.java

 
レイアウトです。
activity_main.xml

 
grid_items.xml

 
strings.xml

 

サンプル動画

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

placeholder 01 - [Android] Picasso を使ってネット上の画像をGridViewで表示してみた
接続先の画像に問題があってダウンロードが失敗した場合に、エラー画像を表示させてみましょう。

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

 

 

 

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

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

ページのトップへ戻る




 

シェアする

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

フォローする