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

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

Android Studio 3.1
Android 8.1.0

Picasso

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

目次
1.PicassoをGridViewに導入
2.サンプルコード
3.サンプル動画
4.drawable, assets

PicassoをGridViewに導入

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

     public View getView(int position, View convertView, ViewGroup parent) {
        View view;

        if (convertView == null) {
            view = inflater.inflate(layoutId, parent, false);
        } else {
            view =  convertView;
        }

        ImageView img = view.findViewById(R.id.image_view);
        img.setScaleType(ImageView.ScaleType.CENTER_CROP);

        Picasso.with(context)
                .load("https://hoge.hage.com/image.jpg")
                .resize(500, 500)
                .into(img);

        return view;
    }

public View getView(int position, View convertView, ViewGroup parent) {

View view;

if (convertView == null) {

view = inflater.inflate(layoutId, parent, false);

} else {

view = convertView;

}

ImageView img = view.findViewById(R.id.image_view);

img.setScaleType(ImageView.ScaleType.CENTER_CROP);

Picasso.with(context)

.load("https://hoge.hage.com/image.jpg")

.resize(500, 500)

.into(img);

return view;

}

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

サンプルコード

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

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<uses-permission android:name="android.permission.INTERNET" />

...

</manifest>

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

...
dependencies {
    ...
    implementation 'com.squareup.picasso:picasso:2.5.2'
}

...

dependencies {

...

implementation 'com.squareup.picasso:picasso:2.5.2'

}

　
MainActivity.java

/*
Copyright 2013 Square, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity{

    private static final String[] photos = {
            "yuka1000x1000", "miki900x900",
            "mai290x290","yumiko790x790",
            "nagi380x380","saya808x808",
            "toko644x644", "yuyu410x410",
            "katakuriko495x508", "kurumi400x400",
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // GridViewのインスタンスを生成
        GridView gridview = findViewById(R.id.gridview);

        // BaseAdapter を継承したGridAdapterのインスタンスを生成
        GridAdapter adapter = new GridAdapter(
                this.getApplicationContext(),
                R.layout.grid_items,
                photos);

        // gridViewにadapterをセット
        gridview.setAdapter(adapter);

    }
}

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.GridView;

public class MainActivity extends AppCompatActivity{

private static final String[] photos = {

"yuka1000x1000", "miki900x900",

"mai290x290","yumiko790x790",

"nagi380x380","saya808x808",

"toko644x644", "yuyu410x410",

"katakuriko495x508", "kurumi400x400",

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// GridViewのインスタンスを生成

GridView gridview = findViewById(R.id.gridview);

// BaseAdapter を継承したGridAdapterのインスタンスを生成

GridAdapter adapter = new GridAdapter(

this.getApplicationContext(),

R.layout.grid_items,

photos);

// gridViewにadapterをセット

gridview.setAdapter(adapter);

}

　
GridAdapter.java

import android.content.Context;
import android.graphics.Point;
import android.util.Log;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Locale;

import static android.content.Context.WINDOW_SERVICE;


public class GridAdapter extends BaseAdapter {

    private Context context;
    private LayoutInflater inflater;
    private int layoutId;
    private List<String> imageList = new ArrayList<>();

    private int ScreenWidthHalf = 0;

    GridAdapter(Context context, int layoutId, String[] iList) {
        super();
        this.context = context;
        this.inflater = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.layoutId = layoutId;

        Collections.addAll(imageList, iList);

        // 画面の横幅の半分を計算
        WindowManager wm = (WindowManager)
                context.getSystemService(WINDOW_SERVICE);
        if(wm != null){
            Display disp = wm.getDefaultDisplay();
            Point size = new Point();
            disp.getSize(size);

            int screenWidth = size.x;
            ScreenWidthHalf = screenWidth/2;
            Log.d("debug","ScreenWidthHalf="+ScreenWidthHalf);
        }

    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View view;

        if (convertView == null) {
            view = inflater.inflate(layoutId, parent, false);
        } else {
            view =  convertView;
        }

        ImageView img = view.findViewById(R.id.image_view);
        img.setScaleType(ImageView.ScaleType.CENTER_CROP);

        Picasso.with(context)
                .load(addUrl(position))
                .resize(ScreenWidthHalf, ScreenWidthHalf)
                .into(img);

        return view;
    }

    // ネットワークアクセスするURLを設定する
    private String addUrl(int number){

        return String.format(Locale.US,
                "https://hoge.hage.com/images/%s.png",// 自分のサーバーに上げて見ましょう
                imageList.get(number));
    }

    @Override
    public int getCount() {
        // 全要素数を返す
        return imageList.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }
}

import android.content.Context;

import android.graphics.Point;

import android.util.Log;

import android.view.Display;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.WindowManager;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

import java.util.Locale;

import static android.content.Context.WINDOW_SERVICE;

public class GridAdapter extends BaseAdapter {

private Context context;

private LayoutInflater inflater;

private int layoutId;

private List<String> imageList = new ArrayList<>();

private int ScreenWidthHalf = 0;

GridAdapter(Context context, int layoutId, String[] iList) {

super();

this.context = context;

this.inflater = (LayoutInflater)

context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.layoutId = layoutId;

Collections.addAll(imageList, iList);

// 画面の横幅の半分を計算

WindowManager wm = (WindowManager)

context.getSystemService(WINDOW_SERVICE);

if(wm != null){

Display disp = wm.getDefaultDisplay();

Point size = new Point();

disp.getSize(size);

int screenWidth = size.x;

ScreenWidthHalf = screenWidth/2;

Log.d("debug","ScreenWidthHalf="+ScreenWidthHalf);

}

public View getView(int position, View convertView, ViewGroup parent) {

View view;

if (convertView == null) {

view = inflater.inflate(layoutId, parent, false);

} else {

view = convertView;

}

ImageView img = view.findViewById(R.id.image_view);

img.setScaleType(ImageView.ScaleType.CENTER_CROP);

Picasso.with(context)

.load(addUrl(position))

.resize(ScreenWidthHalf, ScreenWidthHalf)

.into(img);

return view;

}

// ネットワークアクセスするURLを設定する

private String addUrl(int number){

return String.format(Locale.US,

"https://hoge.hage.com/images/%s.png",// 自分のサーバーに上げて見ましょう

imageList.get(number));

}

@Override

public int getCount() {

// 全要素数を返す

return imageList.size();

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

　
レイアウトです。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#888"
    android:padding="4dp"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#888"
        android:horizontalSpacing="2dp"
        android:verticalSpacing="2dp"
        android:numColumns="2"
        android:stretchMode="columnWidth" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#888"

android:padding="4dp"

tools:context=".MainActivity">

<GridView

android:id="@+id/gridview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:background="#888"

android:horizontalSpacing="2dp"

android:verticalSpacing="2dp"

android:numColumns="2"

android:stretchMode="columnWidth" />

</LinearLayout>

　
grid_items.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#afc"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="3dp" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/description"
        android:scaleType="fitCenter" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="200dp"

android:layout_height="200dp"

android:background="#afc"

android:orientation="vertical"

android:gravity="center"

android:padding="3dp" >

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@string/description"

android:scaleType="fitCenter" />

</LinearLayout>

　
strings.xml

<resources>
    ...
    <string name="description">picture</string>
</resources>

...

<string name="description">picture</string>

</resources>

サンプル動画

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

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

        Picasso.with(context)
                .load(addUrl(position))
                .resize(ScreenWidthHalf, ScreenWidthHalf)
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.error)
                .into(img);

Picasso.with(context)

.load(addUrl(position))

.resize(ScreenWidthHalf, ScreenWidthHalf)

.placeholder(R.drawable.placeholder)

.error(R.drawable.error)

.into(img);

drawable, assets

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

Picasso.with(context)
       .load(drawableImage(position))
...

private int drawableImage(int number){
    return context.getResources().getIdentifier(
        imageList.get(number),
        "drawable",
        context.getPackageName());
}

Picasso.with(context)

.load(drawableImage(position))

...

private int drawableImage(int number){

return context.getResources().getIdentifier(

imageList.get(number),

"drawable",

context.getPackageName());

}

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

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

GridView 作り方使い方
標準アイコンをGridViewで表示
Picasso を使ってネット上の画像をGridViewで表示してみた

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