이 튜토리얼에서는 안드로이드 앱에서 ImageView의 이미지를 손가락 제스처로 확대(Zoom In)하고 축소(Zoom Out)하는 방법을 단계별로 알아봅니다.
핵심은 ScaleGestureDetector 클래스입니다. 이 클래스는 두 손가락으로 화면을 벌리거나 오므리는 '핀치 제스처'를 감지해주며, 감지된 배율 값을 ImageView의 scale 속성에 적용하는 방식으로 확대·축소 기능을 구현할 수 있습니다.
1단계 — 새 프로젝트 생성
Android Studio에서 File → New Project를 선택한 뒤, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.
2단계 — 레이아웃 파일 작성 (res/layout/activity_main.xml)
아래 코드를 activity_main.xml에 추가합니다. 세로 방향 LinearLayout 안에 이미지를 표시할 ImageView를 배치합니다.
<?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>3단계 — 메인 액티비티 작성 (src/MainActivity.java)
다음으로 MainActivity.java에 아래 코드를 추가합니다. onTouchEvent()에서 발생하는 터치 이벤트를 ScaleGestureDetector에 전달하고, 내부 클래스인 ScaleListener에서 배율을 계산해 ImageView에 적용합니다.
여기서 주목할 부분은 Math.max(0.1f, Math.min(mScaleFactor, 10.0f))입니다. 이 코드는 배율이 최소 0.1배, 최대 10배를 벗어나지 않도록 상한과 하한을 설정하는 역할을 하며, 이를 통해 이미지가 사라지거나 과도하게 커지는 것을 방지할 수 있습니다.
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;
}
}
}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 Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 버튼을 클릭하세요. 실행 옵션에서 연결된 모바일 기기를 선택하면, 해당 기본 화면이 기기에 표시됩니다.
앱이 실행되면 화면에 표시된 이미지 위에서 두 손가락을 벌리면 이미지가 확대되고, 오므리면 축소되는 것을 확인할 수 있습니다.
