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

picasso gridview 01 - [Android] Picasso でネット上の画像をGridViewで表示
ギャラリーやフォトアプリのように作るにはGridViewを使いますが、画像の扱いはうっかりするとOutOfMemoryにはまってしまいます。

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

Android Studio 3.4.2
API 29
AndroidX

 



Picasso

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

 

PicassoをGridViewに導入

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

 

サンプルコード

 
例えば、下のような10個の画像をサーバーに上げて、それをダウンロードして表示させて見たいと思います。
 
gridview picasso 01 - [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を表示させて

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フォーム

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




アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Google Pixel 4 / 4 XL
Android 10 搭載


シェアする

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

フォローする