AndroidでImageViewの画像を指定した角度で回転させる方法

この記事では、AndroidのImageViewに表示している画像を、指定した角度で回転させる方法をサンプルコード付きで解説します。

実装の流れ

1. Android Studioで新規プロジェクトを作成する
2. レイアウトXMLにImageViewとTextViewを配置する
3. Matrixクラスを使った回転処理をMainActivityに実装する

ステップ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"
    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>

上記のコードでは、中央寄せの縦並びLinearLayoutの中に、ImageViewとTextViewを1つずつ配置しています。ユーザーがTextViewをタップすると、ImageViewの画像が20度回転する仕組みです。

ステップ3：MainActivity.javaの実装

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

package com.example.andy.myapplication;
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()メソッドに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クラスのインスタンスを作成します。
• ScaleType.MATRIXの設定：Matrixによる変換を有効にするために必須です。この設定がないと回転が画面に反映されません。
• postRotate()での回転：第1引数に回転角度（ここでは20度）、第2・第3引数に回転軸となる中心座標（画像の幅・高さの半分）を指定することで、画像の中心を基準に回転させます。
• setImageMatrix()で適用：作成したMatrixをImageViewにセットすることで、変換結果が実際に描画されます。

アプリの実行と動作確認

それではアプリを実行してみましょう。実機のAndroid端末がパソコンに接続されていることを前提とします。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。候補が表示されたら、接続中のモバイル端末を選択します。

起動直後のデフォルト画面は次のようになります。

この状態で「Initial text」と表示されたTextViewをクリックすると、下の画像のようにImageViewの内容が20度回転します。

補足：もっと簡単な回転の方法

APIレベル11以降では、View#setRotation()メソッドやレイアウトXMLのandroid:rotation属性を使えば、よりシンプルにViewを回転させることができます。Matrixを使う方法は、回転と拡大縮小・移動などを組み合わせた複雑な変換を行いたい場合に特に有効です。