Android画像ライブラリ-Picasso-を試す

今回はPicassoを試してみたいと思います。
画像のダウンロード先はDocker+Rackで画像サーバーを作成(ただやりたいだけ)

Picassoとは?

Androidで画像のダウンロードやキャッシュをいい感じにやってくれるライブラリ

画像サーバー

---

わざわざDocker+Rackで作成しなくてもいいとは思いますが、、💦
試しにやってみました。

• Dockerfile

  FROM ruby:2.3.0
  ENV LANG C.UTF-8
  ENV HOME_DIR /usr/src/app
  WORKDIR $HOME_DIR
  
  RUN apt-get update -qq
  
  COPY Gemfile $HOME_DIR/
  
  RUN bundle install
  ADD . $HOME_DIR
  

• Gemfile

  source 'https://rubygems.org'
  
  gem 'rack'
  

docker-cpmposeも使ってみます。

• docker-cpmpose.yml

  version: '2'
  services:
    web:
      build: .
      command: rackup -p 9292 -o 0.0.0.0
      environment:
        RAILS_ENV: development
      ports:
        - '9292:9292'
      volumes:
        - .:/usr/src/app
  

• config.ru

  # encoding: utf-8
  run Rack::Directory.new(File.dirname(__FILE__) + "/public")
  

  public配下をhttp://localhost:9292/でアクセスできるように公開してます。

画像はDockerfileと同じディレクトリ内に以下パスで画像を置きました
public/images/sample.jpg

早速実行✨

$ docker-cpmpose up -d

ブラウザでhttp://localhost:9292/images/sample.jpgにアクセスし画像が表示されたら成功です。

停止はdocker-compose stop




Androidアプリ作成

---

ようやくのアプリ作成です💧

まずはプロジェクトのbuild.gradleに以下を追加

android {
    ・・・
    dataBinding {
        enabled = true
    }
}

dependencies {
    ・・・
    compile 'com.squareup.picasso:picasso:2.5.2'
}

ついでにdatabindingも有効にしときます。

次にレイアウトファイルの修正

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" >

    <RelativeLayout
      ・・・ >

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:id="@+id/imageView"
            android:layout_above="@+id/button"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true" />
    </RelativeLayout>
</layout>

そしてActivity内でボタンが押されたら「画像をダウンロードしてImageViewに設定する」
という処理を実装して行きます。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    Button button = mBinding.button;

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
          ImageView imageView = mBinding.imageView;
          Picasso.with(MainActivity.this)
                 .load("http://xxxx/images/sample.jpg")
                 .into(imageView);
        }
    });
}

↓実際にPicassoを使っている所ですがメソッドチェーンで分かり易いです✨

Picasso.with(MainActivity.this)
       .load("http://xxxx/images/sample.jpg")
       .into(imageView);

※ 自分の環境ではDocker for Mac + Android Emulatorで動作させようとしたらEmulatorが動作しなかったので
以前使ったngrokを使ってlocalhostを外部公開して使ってます。

• 動作

画像は宮島の鹿ですw

Picassoではその他リサイズや回転等色々できるようです。

Picasso.with(MainActivity.this)
       .load("http://xxxx/images/sample.jpg")
       .resize(50, 50) // リサイズ
       .rotate(90.0f)  // 回転
       .error(R.drawable.hoge) // エラー時の画像
       .into(imageView);