Shion のもくログ(旧: Shion の技術メモ)

使った技術のメモや、うまくいかなかった事とかを綴ります

PR

謎とき会(Android 画像ライブラリ調査会) のメモ

2018/02/21 にWeeyble さんで行った勉強会のスライド資料が、コピペやリンククリックしづらいので、まとめてみます。

発表資料

14 ページの補足

Android Studio 3.x 系でハンズオンを進めていきます。
下記の手順で新プロジェクトを作ってください。

  1. Android Studio を立ち上げる
  2. "Start a new Android Studio project" を選択する
  3. "Create Android Project" は初期設定のまま"Next" をクリックする
  4. "Target Android Devices" は初期設定のまま"Next" をクリックする
    → 少なくともAndorid 4.4 以降で動くことは確認しました
  5. "Add an Activity to Mobile" で"Empty Activity" をクリックする
  6. "Configure Activity" で下記の設定をして、"Finish" をクリックする
    • "Activity Name" が"MainActivity"
    • "Generate Layout File" にチェックが入っている
    • "Layout Name" が"activity_main"
    • "Backwards Compatibility (AppCompat)" にチェックが入っている

15 ページの補足

Picasso で取得した画像の表示場所を定義します。
activity_main.xml を下記のように書き換えてください。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

16 ページの補足

Picasso を使えるようにするために、gradle の設定を追加します。
app/build.gradle に下記の依存を追加してください。

dependencies {
    ......

    // Picasso
    compile 'com.squareup.picasso:picasso:2.5.2'
}

17 ページの補足

サーバーにある画像を表示するため、パーミッション設定が必要です。
AndroidManifest.xml に下記を追加してください。

<!-- パーミッション設定 -->
<uses-permission
	android:name="android.permission.INTERNET" />

18 ページの補足

サーバーにある画像を表示するためのコードを書いていきます。
下記をMainActivity に追記してください。
足りない依存関係は適宜追加してください。

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

    // 画像の表示場所の取得
    ImageView imageView = findViewById(R.id.image);
    
    // 画像の読み込み
    Picasso.with(this)
    	.load("http://i.imgur.com/DvpvklR.png")
        .into(imageView);
}

20 ページの補足

画像ライブラリを使うメリットして、いい感じにキャッシュしてくれることが挙げられます。

ただし、キャッシュサイズに限りがあるので、あまりにも大きな画像は避けたほうが無難です。

21 - 22 ページの補足

なぜかmipmap にある画像を表示できないので、mipmap-xxxhdpi/ic_launcher をdrawable フォルダーにコピペします。

次にアプリ内にある画像を表示するためのコードを書いていきます。
下記をMainActivity に追記してください。
足りない依存関係は適宜追加してください。

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

    // 画像の表示場所の取得
    ImageView imageView = findViewById(R.id.image);
    
    // 画像の読み込み
    Picasso.with(this)
    	.load(R.drawable.ic_launcher)
        .into(imageView);
}

※mipmap の件はどこかで調べないと……。

24 ページの補足

画像の読み込み中、読み込みエラー時に表示する画像を下記のように設定できます。

Picasso.with(context)
    .load(url)
    .placeholder(R.drawable.user_placeholder)
    .error(R.drawable.user_placeholder_error)
    .into(imageView);

25 ページの補足

load() に空文字を指定すると落ちるので、気をつけてください。

NG! (IllegalArgumentException)

String path = "";
Picasso.with(context)
       .load(path)
       .into(imageView);

OK!

String path = null;
Picasso.with(context)
       .load(path)
       .into(imageView);

26-27 ページの補足

fit() はあらかじめ表示領域が決まっている必要があります。
なので、相対的に表示領域を決めたい場合は、何か別の手段で対応した方が良さそうです。

// 画像の表示場所の取得
ImageView imageView = findViewById(R.id.image);

// 画像の読み込み
Picasso.with(this)
       .load(R.drawable.ic_launcher)
       .fit()
       .into(imageView);

NG

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true" />

OK

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true" />

スライド資料の参考文献一覧

それ以外に調査したこと

Xamarin.Android でもPicasso が使えそうだ

DroidKaigi2016アプリを Xamarin.Android に移植した話 にPicasso のことが書いてあったので、試しに書いてみました。軽くでしたがAndroid 版と変らずに使えそうでした。

protected override void OnCreate(BundlesavedInstanceState)
{
    base.OnCreate(savedInstanceState);
    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);
    
    // 画像の表示場所の取得
    ImageView image = FindViewById<ImageView>(Resource.Id.image);

    // 画像の読み込み
    Picasso.With(this)
           .Load("http://i.imgur.com/DvpvklR.png")
           .Into(image);
}

ライブラリ情報は下記になります。
Square.Picasso

Glide は試しきれなかった……

ライブラリではなく、アプリ側のgradle のcompile, build のバージョン指定が良くなくて、java.lang.NoSuchMethodError でアプリが落ちました。なので、調査できてないです……。

The 4.4.0 version is conflict with appcompat-v7:26.1.0

参考文献

PR