【Android】ImageViewで拡大縮小・ピンチ操作できる良ライブラリを使ってみた

Androidアプリ開発をしているとき。

ImageViewでこういうことが必要になりました。

表示画像を拡大縮小に対応させたい
ピンチ操作などで画像を移動したい
でも普通のImageViewにはそんな機能ない…

いろいろ探してたら便利なのがありました。

それは TouchImageView というライブラリ

実際に動くことも確認したし便利なので、
Android TouchImageViewの実装方法を紹介します。

僕が試したのは次のような手順です。

このページの目次

１．プロジェクトレベルのbuild.gradleを設定編集
２．モジュールレベルのbuild.gradleにライブラリ追加
３．レイアウトXMLにTouchImageViewを設置する
４．DrawableなどをTouhcImageViewで表示するコード
５．TouchImageViewでの拡大縮小・ピンチ操作の動画

１．プロジェクトレベルのbuild.gradleを設定編集

このライブラリはgithubで公開されてます。

GitHub

GitHub - MikeOrtiz/TouchImageView: Adds touch functionality to Android ImageV...

https://github.com/MikeOrtiz/TouchImageView

Adds touch functionality to Android ImageView. Contribute to MikeOrtiz/TouchImageView development by creating an account on GitHub.

ライセンスはMIT Licenceなので安心

導入方法も手順を踏んでいけばとても簡単です。

まずプロジェクトレベルのbuild.gradleを開きます。

▼ Project:...の方のbuild.gradleを開く

▼ そこのrepositoriesを以下のように編集

allprojects {
    repositories {
        google()
        mavenCentral()
        jcenter() 

        /// 以下を追加！！
        maven { url 'https://jitpack.io' }
    }
}

allprojects {

repositories {

google()

mavenCentral()

jcenter()

/// 以下を追加！！

maven { url 'https://jitpack.io' }

}

追加したら Async now を押して同期

リポジトリとしてJitPackを使ってるみたいです。

２．モジュールレベルのbuild.gradleにライブラリ追加

次にモジュールレベルのbuild.gradleを開きます。

▼ Modile:... の方のbuild.gradleを開く

▼ dependenciesブロック以下にライブラリ追加

/// TouchImageView
implementation 'com.github.MikeOrtiz:TouchImageView:3.2.1'

1 2	/// TouchImageView implementation 'com.github.MikeOrtiz:TouchImageView:3.2.1'

最新バージョンは 3.2.1 の模様

もし最新verでエラーなどが出る場合、バージョンを下げて試してみてください。僕の環境の場合、3.2.1ではエラーが出たので、1,4,1に変更すると正常に動きました。

そこは各自の環境次第です。

３．レイアウトXMLにTouchImageViewを設置する

このライブラリでは次のウィジェットが利用できます。

com.ortiz.touchview.TouchImageView

名前が TouchImageView というくらいなので ImageView を拡張したクラスですね。だから ImageView が持っているメソッドは全て利用可能です。

そしてレイアウト上に設置したい場合…

▼ TouchImageViewのレイアウト上の配置例

<com.ortiz.touchview.TouchImageView
    android:id="@+id/touch_image_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@drawable/hoge" />

<com.ortiz.touchview.TouchImageView

android:id="@+id/touch_image_view"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

tools:srcCompat="@drawable/hoge" />

この配置については特筆すべきことなし。

ここでは全体を覆う感じで配置してみました。

４．DrawableなどをTouhcImageViewで表示するコード

そしたら画像を表示してみたいと思います。

▼ 実際にこのようなコードを書いてみた(kotlin)

class MainActivity : AppCompatActivity() {
    private lateinit var touchImageView: TouchImageView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        touchImageView = findViewById(R.id.touch_image_view)
        val drawable = Drawable.createFromPath(
            "path/to/images/hogehoge.png" 
        )
        drawable?.isFilterBitmap = false
        touchImageView.setImageDrawable(drawable)
    }