【Android】ImageViewのズームイン・ズームアウトを実装する方法

この記事では、AndroidアプリのImageViewに対して、ピンチイン（指をつまむ）・ピンチアウト（指を広げる）ジェスチャーで画像を拡大・縮小できる「ズームイン・ズームアウト」機能を実装する方法を解説します。

実装のポイント

ズーム機能の実装には、Android SDKに標準で用意されているScaleGestureDetectorクラスを使用します。このクラスは2本指のスケールジェスチャーを検出し、拡大率（スケールファクター）を取得できるため、独自に複雑なタッチ処理を書く必要がありません。

実装手順

ステップ1：新規プロジェクトの作成

Android Studioで新しいプロジェクトを作成します。メニューから「File ⇒ New Project」を選択し、必要な情報を入力してプロジェクトを作成してください。

ステップ2：レイアウトファイルの編集

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image" />
</LinearLayout>

ここでは画面いっぱいに表示されるImageViewを配置し、表示する画像として @drawable/image を指定しています。任意の画像リソースを drawable フォルダに配置しておきましょう。

ステップ3：MainActivity.javaの編集

src/MainActivity.java に以下のコードを追加します。

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
    private ScaleGestureDetector scaleGestureDetector;
    private float mScaleFactor = 1.0f;
    private ImageView imageView;  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView=findViewById(R.id.imageView);
        scaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());
    }
    @Override
    public boolean onTouchEvent(MotionEvent motionEvent) {
        scaleGestureDetector.onTouchEvent(motionEvent);
        return true;
    }
    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
            mScaleFactor *= scaleGestureDetector.getScaleFactor();
            mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 10.0f));
            imageView.setScaleX(mScaleFactor);
            imageView.setScaleY(mScaleFactor);
            return true;
        }
    }
}

このコードの動作は以下の通りです。

• onTouchEvent() ですべてのタッチイベントをScaleGestureDetectorに渡します。
• SimpleOnScaleGestureListener の onScale() が呼ばれるたびに、getScaleFactor() で取得した倍率を現在のスケールに掛け合わせます。
• Math.max() と Math.min() を使うことで、拡大率を0.1倍〜10倍の範囲に制限しています。これにより、極端な縮小や拡大を防ぎます。
• 最後に setScaleX() / setScaleY() でImageViewの拡大率を更新します。

ステップ4：AndroidManifest.xmlの確認

androidManifest.xml は以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行

それではアプリを実行してみましょう。実際のAndroid端末をパソコンに接続しているものとします。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。実行デバイスとして自分のスマートフォンを選択すると、端末にアプリの初期画面が表示されます。

画面上で2本指を使ってピンチイン・ピンチアウト操作を行うと、画像が滑らかに拡大・縮小されることが確認できます。ScaleGestureDetectorを活用すれば、少ないコード量で直感的なズーム操作を実現できますので、ギャラリーアプリや地図表示など、さまざまな場面で応用してみてください。