Androidで画像のズーム機能を実装する方法｜ScaleGestureDetectorの使い方

この記事では、Androidアプリで画像にズーム（拡大・縮小）機能を実装する方法を、サンプルコードとともに解説します。スマートフォンでおなじみの「ピンチイン・ピンチアウト」操作によるズームは、ScaleGestureDetectorクラスを利用することで比較的簡単に実装できます。

実装のポイント：ScaleGestureDetectorとは

ScaleGestureDetectorは、2本の指を使った拡大・縮小ジェスチャー（ピンチ操作）を検出するためのクラスです。検出されたスケール係数をもとにImageViewのscaleX・scaleYを変更することで、画像の拡大表示を実現します。

手順1：新規プロジェクトの作成

Android Studioを起動し、「File」→「New Project」から新しいプロジェクトを作成します。プロジェクト名や保存先などの必要事項を入力しましょう。ここでは「Empty Activity」テンプレートを使用する前提で進めます。

手順2：レイアウトファイル（activity_main.xml）の編集

res/layout/activity_main.xmlに、ズーム対象となるImageViewを配置します。記述例は以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/sample_image" />

</RelativeLayout>

android:srcには、表示したい画像リソースを指定してください。

手順3：MainActivity.javaへのコード追加

続いて、srcフォルダ内のMainActivity.javaに以下のコードを追加します。onTouchEvent()で受け取ったタッチイベントをScaleGestureDetectorに渡すのがポイントです。

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 scaleFactor = 1f;
    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 detector) {
            scaleFactor *= detector.getScaleFactor();
            // 拡大率を1倍〜10倍の範囲に制限
            scaleFactor = Math.max(1f, Math.min(scaleFactor, 10.0f));
            imageView.setScaleX(scaleFactor);
            imageView.setScaleY(scaleFactor);
            return true;
        }
    }
}

コードの解説

• onTouchEvent()：画面へのタッチイベントを検知し、ScaleGestureDetectorに処理を委譲します。
• onScale()：ピンチ操作が検出されるたびに呼び出され、getScaleFactor()で取得した倍率を累積していきます。
• Math.max／Math.min：拡大率が1倍未満や10倍を超えないよう制御しています。

手順4：AndroidManifest.xmlの確認

最後に、AndroidManifest.xmlの設定を確認します。ズーム機能自体に特別なパーミッションは不要ですが、MainActivityがランチャーアクティビティとして登録されている必要があります。

<?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>

アプリの実行と動作確認

それでは、実際にアプリを起動して動作を確認しましょう。実機をPCに接続している場合は、Android Studioのツールバーにある「Run」アイコン（緑色の三角）をクリックし、接続したデバイスを選択して実行します。エミュレーターでも同様の手順で確認できます。

アプリが起動したら、画面上の画像を2本の指でピンチアウトすると拡大され、ピンチインすると縮小されます。拡大率は1倍〜10倍の範囲に制限されているため、極端な拡大・縮小が行われることはありません。

まとめ

本記事では、ScaleGestureDetectorを使ったAndroidの画像ズーム機能の実装方法を紹介しました。ポイントは次の3つです。

• ScaleGestureDetectorでピンチジェスチャーを検出する
• onTouchEvent()でタッチイベントをScaleGestureDetectorに委譲する
• scaleFactorを1倍〜10倍に制限しつつ、setScaleX()／setScaleY()に反映する

より滑らかなズームやドラッグによる移動（パン）を実装したい場合は、Matrixクラスを組み合わせる方法もあります。ぜひ応用してみてください。