Android StudioでPicassoライブラリを追加する方法【初心者向けガイド】

Picassoライブラリとは？

Picasso（ピカソ）は、Square社が開発したAndroid向けの画像読み込み・処理ライブラリです。かつてはサーバーから画像を取得して加工・表示するために長大なコードを書く必要がありましたが、Picassoの登場により、その一連の処理をわずか数行のコードでシンプルに実現できるようになりました。

この記事では、Android StudioでPicassoライブラリをプロジェクトに組み込む具体的な手順を、サンプルコードとともにわかりやすく解説します。

手順1：新規プロジェクトを作成する

まず、Android Studioで新しいプロジェクトを作成します。メニューバーの「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを作成しましょう。

手順2：build.gradleに依存関係を追加する

次に、モジュールレベルのbuild.gradleに以下のコードを記述します。dependenciesブロック内にPicassoの依存関係が含まれている点に注目してください。

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    implementation 'com.squareup.picasso:picasso:2.71828'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

注意：インターネット上の画像を読み込む場合は、AndroidManifest.xmlに<uses-permission android:name="android.permission.INTERNET"/>を追加する必要があります。

手順3：activity_main.xmlを編集する

res/layout/activity_main.xmlに以下のコードを記述し、画像を表示するためのImageViewを画面中央に配置します。

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent"
    android:layout_height = "match_parent">
<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:gravity = "center"
    android:orientation = "vertical">
    <ImageView
        android:id = "@+id/imageView"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

手順4：MainActivity.javaを実装する

src/MainActivity.javaに以下のコードを記述します。この例では、インターネット上の画像URLを読み込み、プレースホルダーの表示・リサイズ・中央クロップ・回転といった処理を適用したうえで、ImageViewに描画しています。

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.Toast;
import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://www.tutorialspoint.com/images/tp-logo-diamond.png")
                .placeholder(R.mipmap.ic_launcher)
                .resize(400, 400)
                .centerCrop()
                .rotate(0)
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        Toast.makeText(getApplicationContext(), "画像の取得に成功しました", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onError() {
                        Toast.makeText(getApplicationContext(), "エラーが発生しました", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

補足：Picasso 2.71828以降では、Picasso.with(this)は非推奨となっており、代わりに引数不要のPicasso.get()を使用することが推奨されています。

Picassoの主なメソッド一覧

上記のコードで使用している、Picassoに関連する主なメソッドは以下のとおりです。

• with() − PicassoライブラリにContext（コンテキスト）を渡します。

• load() − 読み込みたい画像のパスを指定します。ローカルディレクトリでも、インターネット上のURLでも構いません。

• resize() − 指定した幅と高さに画像をリサイズできます。

• centerCrop() − ImageViewの中央部分をクロップ（切り抜き）して表示できます。

• rotate() − 画像を0〜360度の範囲で回転させることができます。

• into() − 画像を表示したいImageViewを指定します。後述する2つのコールバックを登録することも可能です。

• onSuccess() − 画像のダウンロードが成功した場合に呼び出され、任意の処理を実行できます。

• onError() − 画像のダウンロードが失敗した場合に呼び出され、任意の処理を実行できます。

アプリを実行して動作を確認する

それでは、実際にアプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提としています。プロジェクトのアクティビティファイルを開き、ツールバーの実行アイコン  をクリックしてください。表示された候補から接続した端末を選択すると、端末の画面に結果が表示されます。

上の画像を確認すると、resize()で指定したサイズに合わせて画像がクロップされて表示されていることがわかります。一方、centerCrop()とresize()を削除すると、以下のように画像がデフォルトのサイズで表示されます。