Android ImageView에서 이미지를 특정 각도로 회전하는 방법

개요

이 튜토리얼에서는 Android의 ImageView에서 이미지를 특정 각도만큼 회전시키는 방법을 단계별로 살펴봅니다. Matrix 클래스의 postRotate() 메서드를 활용하면, 사용자가 화면의 TextView를 클릭할 때마다 이미지가 20도씩 회전하도록 간단하게 구현할 수 있습니다.

1단계 — 새 프로젝트 생성

Android Studio에서 File → New Project를 선택하고, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력하여 새 프로젝트를 만듭니다.

2단계 — 레이아웃 파일 작성 (res/layout/activity_main.xml)

아래 코드를 res/layout/activity_main.xml 파일에 추가합니다.

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

    <ImageView
        android:id="@+id/imageView"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textChanger"
        android:layout_margin="20dp"
        android:textAlignment="center"
        android:text="Initial text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

위 레이아웃에는 ImageView 하나와 TextView 하나가 포함되어 있습니다. 사용자가 TextView(Initial text)를 클릭하면 이미지가 20도 회전하도록 구현할 예정입니다.

3단계 — 메인 액티비티 작성 (src/MainActivity.java)

아래 코드를 src/MainActivity.java 파일에 추가합니다.

package com.example.andy.myapplication;

import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int view = R.layout.activity_main;
    TextView textChanger;
    ImageView imageView;

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);

        textChanger = findViewById(R.id.textChanger);
        imageView = findViewById(R.id.imageView);

        textChanger.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rotateImage(imageView);
            }
        });
    }

    private void rotateImage(ImageView imageView) {
        Matrix matrix = new Matrix();
        imageView.setScaleType(ImageView.ScaleType.MATRIX); // 필수 설정
        matrix.postRotate((float) 20,
                imageView.getDrawable().getBounds().width() / 2,
                imageView.getDrawable().getBounds().height() / 2);
        imageView.setImageMatrix(matrix);
    }
}

위 코드에서는 rotateImage() 메서드를 정의하고, TextView 클릭 시 ImageView를 인자로 전달하여 호출합니다. 핵심 로직은 다음 네 줄입니다.

Matrix matrix = new Matrix();
imageView.setScaleType(ImageView.ScaleType.MATRIX); // 필수 설정
matrix.postRotate((float) 20, imageView.getDrawable().getBounds().width() / 2, imageView.getDrawable().getBounds().height() / 2);
imageView.setImageMatrix(matrix);

핵심 코드 설명

• Matrix 객체 생성 — 이미지 회전, 확대·축소 등 좌표 변환을 담당하는 Matrix 인스턴스를 새로 만듭니다.
• setScaleType(MATRIX) — ImageView가 Matrix 기반으로 이미지를 렌더링하도록 하는 필수 설정입니다. 이 단계를 생략하면 회전이 적용되지 않습니다.
• postRotate() — 첫 번째 인자는 회전 각도(여기서는 20도), 두 번째·세 번째 인자는 회전 중심점의 x, y 좌표입니다. 이미지의 가로·세로 크기를 2로 나눈 값을 전달하므로 이미지 중심을 축으로 회전합니다.
• setImageMatrix() — 완성된 Matrix를 ImageView에 적용해 화면에 반영합니다.

팁: 위 예제는 클릭할 때마다 새로운 Matrix를 생성하기 때문에 이미지가 항상 원본 기준 20도 위치로 돌아갑니다. 클릭할 때마다 누적으로 회전하게 하려면 Matrix를 멤버 변수로 선언하고 매번 postRotate()를 호출하면 됩니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 목록에서 자신의 모바일 기기를 선택하세요.

앱이 실행되면 먼저 위와 같은 기본 화면이 표시됩니다.

이 상태에서 Initial text TextView를 클릭하면, 아래 그림처럼 이미지가 20도 회전합니다.