【Android ImageView】Web上画像はpicassoを使って表示しよう!

Androidアプリエンジニアのゆーちゃまさんです＾＾

Webアプリ開発3年ほど、Androidアプリ開発を10年ほどやっています。

Android開発ではなくてはならないImageViewですが、picassoを利用してWeb上の画像を表示するとすごい楽です。

Picassoってなに？
Picassoの使い方がよくわからない？

という方

この記事を読むことで

Picassoを利用する前準備
Picassoの実際の使い方

これが、分かるようになります！！

オンラインレッスン始めました！

zoomでのオンラインレッスンをはじめました＾＾
マンツーマンで対応しますので、自由に質問していただけます。
javaの基礎から、転職に関する相談、Androidアプリ開発・そのた幅広く対応します。

> Androidアプリの開発・プログラミング基礎を丁寧に教えます！

マンツーマンでjava基礎、わからない部分を丁寧に解説！
Androidアプリ開発の方法・技術的な解説
ITエンジニア転職の相談
ITスクール選びで悩んでいる
実際に現場で習得しておきたいことを教えます＾＾

など内容は幅広くたいおういたします＾＾
お気軽に相談してください！

ImageViewにWeb上の画像を表示する
1. Picassoを利用できるようにする
実行結果
まとめ

ImageViewにWeb上の画像を表示する

web上の画像はurlを使用します。

http://yuchamasan-blog.com/wp-content/uploads/2021/03/mini_zip_purse_1-e1616926144198.jpg

ゆーちゃま

僕のホワイトハウスコックスのミニジップパースの画像です＾＾

この画像urlをImageViewに表示すると言う事になりますね。

Picassoを利用できるようにする

まずは、build.gradleのdependencies配下に以下を追記します

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

dependencies{

implementation'com.squareup.picasso:picasso:2.71828'

}

ゆーちゃま

この1行追加するだけです＾＾

implementation ‘com.squareup.picasso:picasso:2.71828′

次に画像ロードメソッドを作成します。

    private void loadImage(final ImageView imageView, final String loadUrl) {
        try {
            Picasso.get()
                    .load(loadUrl)
                    .placeholder(ViewUtil.getDrawable(this, R.drawable.bookmark_noimage))
                    .error(ViewUtil.getDrawable(this, R.drawable.bg_no_image))
                    .into(imageView);
        } catch (final Exception e) {
            LogUtil.e(e);
        }
    }

privatevoidloadImage(finalImageViewimageView,finalStringloadUrl){

try{

Picasso.get()

.load(loadUrl)

.placeholder(ViewUtil.getDrawable(this,R.drawable.bookmark_noimage))

.error(ViewUtil.getDrawable(this,R.drawable.bg_no_image))

.into(imageView);

}catch(finalExceptione){

LogUtil.e(e);

}

引数に対象のImageView、ロードするurlを渡すようなメソッドを作成しましょう。

load(loadUrl)

ロードする画像url。

placeholder(ViewUtil.getDrawable(this, R.drawable.bookmark_noimage))

読み込み中に表示させたい画像を設定。なくてもOKです。

error(ViewUtil.getDrawable(this, R.drawable.bg_no_image))

読み込みエラー時に表示させたい画像を設定。なくてもOKです。

画像urlに画像が無い場合などに表示されます。

into(imageView)

対象のImageView

実行結果

ゆーちゃま

では実際に実行してみましょう＾＾

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/testImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/content_description"
        />
</RelativeLayout>

<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/testImageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:contentDescription="@string/content_description"

</RelativeLayout>

レイアウトXml

画面中央にImageViewがある、シンプルな画面です。

13 分前
    private void loadImage(final ImageView imageView, final String loadUrl) {
        try {
            Picasso.get().load(loadUrl)
                    .placeholder(ViewUtil.getDrawable(this, R.drawable.bookmark_noimage))
                    .error(ViewUtil.getDrawable(this, R.drawable.bg_no_image))
                    .into(imageView);
        } catch (final Exception e) {
            LogUtil.e(e);
        }
    }

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

        final ImageView testImageView = findViewById(R.id.testImageView);
        loadImage(testImageView, "http://yuchamasan-blog.com/wp-content/uploads/2021/03/mini_zip_purse_1-e1616926144198.jpg");