ページ

2016年12月4日日曜日

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を外部公開して使ってます。
  • 動作
gif
画像は宮島の鹿ですw
Picassoではその他リサイズ回転等色々できるようです。
Picasso.with(MainActivity.this)
       .load("http://xxxx/images/sample.jpg")
       .resize(50, 50) // リサイズ
       .rotate(90.0f)  // 回転
       .error(R.drawable.hoge) // エラー時の画像
       .into(imageView);

0 件のコメント:

コメントを投稿