2013-11-08

移動&ズームができる ImageView を独自に作成してみました。(ダウンロード可)

先日からとりかかっているアプリの中で、画像を移動したり2本の指で拡大・縮小ができるようにしたかったので、いろいろとインターネット上を探してみましたが、あまり数も少なくまたあってもファイル数が多いなど超高機能なものばかりだったので今後のことも考えて独自にシンプルなものを作成しました。
今回の記事は使い方の覚え書きになります。
(ダウンロードは最後にGitHubのURLを記載しています。)

 [実際の見本]


[概要] 2本の指で画像をピンチ・ズームイン、ズームアウト(拡大縮小)、またダブルタップで画像を最小、最大、元の大きさにそれぞれ変更することができます。たったひとつのファイルで340行(2013年11月8日現在)だけのシンプルなプログラムで書かれています。


[サンプル・コード]
使い方は通常の ImageView とほぼ同じです。

// Xml に記述

<com.sukohi.lib.ZoomImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/drawable"
    android:background="@color/black" />
  
// コード上でやる場合は以下のように。(メソッドについては後で書きます)

ZoomImageView zoomImageView = new ZoomImageView(this);
zoomImageView.setImageResourceId(R.drawable.drawable);
// もしくは setImageBitmap(bitmap);
zoomImageView.setMaxScale(5F);    // 省略可(デフォルト:2F)
zoomImageView.setMinScale(0.1F);    // 省略可(デフォルト:0.5F)
zoomImageView.setDoubleTapDuration(5F);    // 省略可(デフォルト:300)


[メソッド]

・setMaxScale(float scale)

表示する画像の最大サイズを設定できます。
つまり、2Fなら初期サイズの2倍が最大でそれ以上は大きくならない、ということになります。
デフォルト: 2F


・setMinScale(float scale)

表示する画像の最小サイズを設定できます。
つまり、0.5Fなら初期サイズの0.5倍(=1/2)が最小でそれ以上は小さくならない、ということになります。
デフォルト: 0.5F


・setDoubleTapDuration(int duration)

ダブルタップを検知する速さです。duration の値が少なければ少ないほど素早くダブルタップしないとイベントが起動しません。
デフォルト: 300


以上です。
今後もアプリ開発に関連して拡張をしていこうと思っています。
次は画像の回転もいいかな、なんておもっています。
では、最後にダウンロードURLを。


<追記>
メソッドを3つ追加しました。
どれも画像の状態がどうなっているか?を取得するためのものです。

・getImageRect();

表示されている画像のRect を取得します。


・getImageScale();

 表示されている画像のスケールを取得します。


・getImagePoint();

 表示されている画像のXY座標を取得します。


[ダウンロードURL(次のページの右下からDLできます。)]
https://github.com/SUKOHI/ZoomImageView

Have a good day!

10 件のコメント :

  1. このZoomImageViewをどうしても使いたいのですが、プロジェクトのどこにどうやって取り込めばいいのかわかりません。まったくの初心者で現在も調べながらやってますが、さっぱりです。教えてくださいよろしくお願いします。ヒントだけでもいいです。

    返信削除
  2. すいません↓の記事参考にしたら動かせました。
    http://sukohi.blogspot.jp/2014/05/android-bootstrap.html
    すごく便利に使えそうです。
    ありがとうございました。

    返信削除
  3. digixyzさんへ
    返信が遅れてすみません。
    でも、うまくいったようで安心しました。
    どんどん使ってください。^-^

    返信削除
  4. はじめまして。笠原と申します。
    現在ScrollViewを用いて縦長の画像を表示しておりまして、
    そこにZoomImageViewを使わせて頂きたいと思っています。
    実際使わせて頂くと、画像の縦方向が圧縮されて表示されてしまいます。
    私の使い方がよろしくないのでしょうか?
    何かヒントを頂ければ幸いです。
    よろしくお願いいたします。

    返信削除
    返信
    1. Kenichiro Kasaharaさんへ

      こんにちは。
      コメントをいただきましてありがとうございます。^^

      > 画像の縦方向が圧縮されて表示されてしまいます。

      このパッケージはScrollViewの中で使ったことがなかったため、おそらくScrollView の影響を考慮できていないのだと思います。
      修正したいのですが現在多忙なもので残念ながら今すぐメンテナンスができないんです。TT
      せっかくコメントいただいたのに本当にすみません。

      削除
    2. リプライありがとうございます。
      とんでもありません!
      また、よろしくお願いいたします。

      削除
  5. こんにちは。はじめまして。
    情報系大学に通う大学生のSatakeと申します。

    現在、画像のピンチイン・ピンチアウトの部分の
    アプリ開発にとりかかっていたところで
    大変参考にさせていただいています。

    そこで一つ質問があるのですが、
    動かす画像(見本動画でいううさぎ)を
    全画面で表示させたいのですが
    どこで操作しているかが分かりません。
    また、背景の色(見本でいう黒の部分)の表示は
    見本動画では、画面の3/4ほどを占めている状態ですが、
    全画面で表示させたい、つまり
    見本動画でいう黄土色の部分を全て黒にする方法を
    ご教授いただきたい次第です。

    actiity_main.xmlの"wrap_content"を
    "fill_parent"や"match_parent"に
    変えてみたりしたのですが、変化ありませんでした。

    プログラミング初級者ですので、
    トンチンカンなことを言っているかもしれませんが
    ヒントだけでも教えていただけると幸いです。
    お忙しい中恐縮ですが、よろしくお願いします!

    返信削除
    返信
    1. Satakeさんへ

      返信が遅くなってしまいましてすみません。
      学生さんということで力になりたいのですが、現在多忙な日々を送っておりまして、コードをチェックする時間がございません。
      また、このコード自体作成したのが相当昔になりますので現在のAndroidコンパイラではうまくいかない可能性もあります。
      せっかくご連絡いただいたのにすみません。
      (ちなみにこのコードはどこかのウェブページを見ながらほぼ同じような構成で作成した記憶があります。Googeなどでいいページが見つかればいいのですが。。) m_ _m

      削除
    2. お返事ありがとうございます!

      とんでもありません。
      コンパイル自体はうまくいって、
      見本動画のように動くのですが、
      上記の問題を解決するためにもう少し
      Googleなどで調べたりチャレンジしてみます!

      また何かありましたら、よろしくお願いします。
      お忙しい中、ご回答ありがとうございました^^

      削除
  6. これ、いいですね。使わせて頂いています。

    返信削除