[Android] MatrixでImageView画像を回転、フリップ、拡大縮小させる

画像を拡大縮小、回転させたりするときは、Matrixを使うことができます。ただし基本的に画像処理はパフォーマンス、メモリを使いますので注意しましょう。

Android Studio
2021.3.1

Matrix

　
画像を拡大縮小させて表示する方法としてはImageViewのレイアウトを使うことで可能です。

https://akira-watson.com/android/imageview2.html

Matrixを使って画像そのものを拡大縮小、あるいは回転、フリップさせてしまう方法もあります。
　

目次
1. ImageView
　　リソース画像をBitmapで取り出します
2. Rotation
　　setRotateで画像を回転させる
3. Resize
　　preScaleで画像の拡大縮小
4. Flip
　　preScaleの符合を変えてフリップ
5. サンプルコード

ImgeView

最初に画像をdrawableに置きます。これを回転、リサイズ、フリップさせていきます。
　

1x1.trans - [Android] MatrixでImageView画像を回転、フリップ、拡大縮小させる

kurumi.jpg

あるいは \res\mipmap 以下にあるDroid君のアイコン画像をコピーして代用もできます。

　
画像をImageViewにセットするためには

ImageView imageView = findViewById(R.id.image_view);
// resourceからの画像を設定
imageVie.setImageResource(R.drawable.kurumi);

ImageView imageView = findViewById(R.id.image_view);

// resourceからの画像を設定

imageVie.setImageResource(R.drawable.kurumi);

とすればできますが、画像をこの後 Mtrix に渡していくためにBitmapとして取り出します。

// resource画像ををbitmapとして取り出す
Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.kurumi);
// bitmap画像をImgeViewに設定
imageView.setImageBitmap(bitmap1);

// resource画像ををbitmapとして取り出す

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.kurumi);

// bitmap画像をImgeViewに設定

imageView.setImageBitmap(bitmap1);

まとめてみると

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), 
                                                   R.drawable.kurumi);

        imageView.setImageBitmap(bitmap1);
    }
}

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),

R.drawable.kurumi);

imageView.setImageBitmap(bitmap1);

}

Rotation (setRotate)

　
画像を90度回転させます。
　

// degrees:回転角度
setRotate(float degrees, float px, float py)

1 2	// degrees:回転角度 setRotate(float degrees, float px, float py)

　
px, pyを基点として回転させます。
　
Mtrixを使ってBitmapを再構築します。

createBitmap(Bitmap source, 
                int x, 
                int y, 
                int width, 
                int height,
                Matrix m, 
                boolean filter)

createBitmap(Bitmap source,

int x,

int y,

int width,

int height,

Matrix m,

boolean filter)

　
MainActivity.java

...
public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), 
                                                   R.drawable.kurumi);

        // 画像の横、縦サイズを取得
        int imageWidth = bitmap1.getWidth();
        int imageHeight = bitmap1.getHeight();

        // Matrix インスタンス生成
        Matrix matrix = new Matrix();

        // 画像中心を基点に90度回転
        matrix.setRotate(90, imageWidth/2, imageHeight/2);

        // 90度回転したBitmap画像を生成
        Bitmap bitmap2 = Bitmap.createBitmap(bitmap1, 0, 0, 
                                imageWidth, imageHeight, matrix, true);

        imageView.setImageBitmap(bitmap2);
    }
}

...

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),

R.drawable.kurumi);

// 画像の横、縦サイズを取得

int imageWidth = bitmap1.getWidth();

int imageHeight = bitmap1.getHeight();

// Matrix インスタンス生成

Matrix matrix = new Matrix();

// 画像中心を基点に90度回転

matrix.setRotate(90, imageWidth/2, imageHeight/2);

// 90度回転したBitmap画像を生成

Bitmap bitmap2 = Bitmap.createBitmap(bitmap1, 0, 0,

imageWidth, imageHeight, matrix, true);

imageView.setImageBitmap(bitmap2);

}

　
　
90°回転しました
　

Resize (preScale)

　
画像を縮小させてみます。ここでは prescale を使います

preScale(float sx, float sy)

1	preScale(float sx, float sy)

MainActivity.java

...
public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), 
                                                    R.drawable.kurumi);
        int imageWidth = bitmap1.getWidth();
        int imageHeight = bitmap1.getHeight();

        // Matrix インスタンス生成
        Matrix matrix = new Matrix();

        // 1/2の縮小率
        float ratio = 0.5f;

        // resize
        matrix.preScale(ratio, ratio);

        Bitmap bitmap3 = Bitmap.createBitmap(bitmap1, 0, 0, 
                          imageWidth, imageHeight, matrix, true);

        // drawableに変換
        Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

        imageView.setImageDrawable(drawable);
    }
}

...

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),

R.drawable.kurumi);

int imageWidth = bitmap1.getWidth();

int imageHeight = bitmap1.getHeight();

// Matrix インスタンス生成

Matrix matrix = new Matrix();

// 1/2の縮小率

float ratio = 0.5f;

// resize

matrix.preScale(ratio, ratio);

Bitmap bitmap3 = Bitmap.createBitmap(bitmap1, 0, 0,

imageWidth, imageHeight, matrix, true);

// drawableに変換

Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

imageView.setImageDrawable(drawable);

}

　
画像が縮小されました。
　

Flip (preScale)

　
ボタンの背景として画像を水平方向にフリップさせてみます。
Buttonの背景とする場合は、表示サイズを適正にしないといけませんので、縦横比率と実際の幅、それにスクリーン幅を求めて計算していきます。
　
フリップは拡大縮小と同じですが符号を変えます
preScale(-1.0f, 1.0f)
と設定すると水平方向でのフリップです。
垂直方向は
preScale(1.0f, -1.0f)
　
MainActivity.java

...
public class MainActivity extends AppCompatActivity {

    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);

        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　R.drawable.kurumi);
        int imageWidth = bitmap1.getWidth();
        int imageHeight = bitmap1.getHeight();

        // Matrix インスタンス生成
        Matrix matrix = new Matrix();

        float ratio = (float)getScreenWidth()/(float)imageWidth;

        matrix.preScale(ratio, ratio);

        // flip horizontal
        matrix.preScale(-1.0f, 1.0f);

        Bitmap bitmap3  = Bitmap.createBitmap(bitmap1, 0, 0, 
                             imageWidth, imageHeight, matrix, true);

        Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

        button.setBackground(drawable);
    }

    // スクリーンの横幅を取得する
    private int getScreenWidth(){
        WindowManager windowManager = (WindowManager)getSystemService(WINDOW_SERVICE);
        Display display = windowManager.getDefaultDisplay();
        Point pointSize = new Point();
        display.getSize(pointSize);

        return pointSize.x;
    }
}

...

public class MainActivity extends AppCompatActivity {

private Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

button = findViewById(R.id.button);

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　R.drawable.kurumi);

int imageWidth = bitmap1.getWidth();

int imageHeight = bitmap1.getHeight();

// Matrix インスタンス生成

Matrix matrix = new Matrix();

float ratio = (float)getScreenWidth()/(float)imageWidth;

matrix.preScale(ratio, ratio);

// flip horizontal

matrix.preScale(-1.0f, 1.0f);

Bitmap bitmap3 = Bitmap.createBitmap(bitmap1, 0, 0,

imageWidth, imageHeight, matrix, true);

Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

button.setBackground(drawable);

}

// スクリーンの横幅を取得する

private int getScreenWidth(){

WindowManager windowManager = (WindowManager)getSystemService(WINDOW_SERVICE);

Display display = windowManager.getDefaultDisplay();

Point pointSize = new Point();

display.getSize(pointSize);

return pointSize.x;

}

　
水平方向にフリップしました
　

サンプルコード

　
以上をまとめてボタンで機能を確認してみます。

MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private Bitmap bitmap;
    private int imageWidth, imageHeight;
    private Matrix matrix;
    private int degree = 0;
    private int counter = 1;
    private float ratio = 1.0f;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.image_view);

        bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.kurumi);

        // 画像の横、縦サイズを取得
        imageWidth = bitmap.getWidth();
        imageHeight = bitmap.getHeight();

        // Matrix インスタンス生成
        matrix = new Matrix();

        Button button1 = findViewById(R.id.button1);
        // expression lambda
        button1.setOnClickListener( v -> imageRotation());

        Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener( v -> imageResize());

        Button button3 = findViewById(R.id.button3);
        button3.setOnClickListener( v -> imageFlip());
    }

    private void imageRotation(){
        // 回転角度
        degree += 90;
        if(degree > 360) degree = 90;

        // 画像中心を基点に回転
        matrix.setRotate(degree, (float)imageWidth/2, (float)imageHeight/2);

        // 回転したBitmap画像を生成
        Bitmap bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                imageWidth, imageHeight, matrix, true);

        imageView.setImageBitmap(bitmap2);
    }

    private void imageResize(){
        // 縮小率
        if(counter < 4){
            ratio -= 0.1f;
        }
        else if(counter<8){
            ratio += 0.2f;
        }
        else{
            counter = 0;
            ratio = 1.0f;
        }

        Log.d("debug","counter="+counter);
        Log.d("debug","ratio="+ratio);
        // resize
        matrix.preScale(ratio, ratio);

        Bitmap bitmap3 = Bitmap.createBitmap(bitmap, 0, 0,
                imageWidth, imageHeight, matrix, true);

        // drawableに変換
        Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

        imageView.setImageDrawable(drawable);

        counter++;

    }
    private void imageFlip(){

        matrix.preScale(1.0f, 1.0f);

        // flip horizontal
        matrix.preScale(-1.0f, 1.0f);

        Bitmap bitmap4  = Bitmap.createBitmap(bitmap, 0, 0,
                imageWidth, imageHeight, matrix, true);

        Drawable drawable = new BitmapDrawable(getResources(), bitmap4);
        imageView.setImageDrawable(drawable);

    }
}

100

101

102

103

104

105

106

107

108

109

110

111

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.util.Log;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private Bitmap bitmap;

private int imageWidth, imageHeight;

private Matrix matrix;

private int degree = 0;

private int counter = 1;

private float ratio = 1.0f;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

bitmap = BitmapFactory.decodeResource(getResources(),

R.drawable.kurumi);

// 画像の横、縦サイズを取得

imageWidth = bitmap.getWidth();

imageHeight = bitmap.getHeight();

// Matrix インスタンス生成

matrix = new Matrix();

Button button1 = findViewById(R.id.button1);

// expression lambda

button1.setOnClickListener( v -> imageRotation());

Button button2 = findViewById(R.id.button2);

button2.setOnClickListener( v -> imageResize());

Button button3 = findViewById(R.id.button3);

button3.setOnClickListener( v -> imageFlip());

}

private void imageRotation(){

// 回転角度

degree += 90;

if(degree > 360) degree = 90;

// 画像中心を基点に回転

matrix.setRotate(degree, (float)imageWidth/2, (float)imageHeight/2);

// 回転したBitmap画像を生成

Bitmap bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,

imageWidth, imageHeight, matrix, true);

imageView.setImageBitmap(bitmap2);

}

private void imageResize(){

// 縮小率

if(counter < 4){

ratio -= 0.1f;

}

else if(counter<8){

ratio += 0.2f;

}

else{

counter = 0;

ratio = 1.0f;

}

Log.d("debug","counter="+counter);

Log.d("debug","ratio="+ratio);

// resize

matrix.preScale(ratio, ratio);

Bitmap bitmap3 = Bitmap.createBitmap(bitmap, 0, 0,

imageWidth, imageHeight, matrix, true);

// drawableに変換

Drawable drawable = new BitmapDrawable(getResources(), bitmap3);

imageView.setImageDrawable(drawable);

counter++;

}

private void imageFlip(){

matrix.preScale(1.0f, 1.0f);

// flip horizontal

matrix.preScale(-1.0f, 1.0f);

Bitmap bitmap4 = Bitmap.createBitmap(bitmap, 0, 0,

imageWidth, imageHeight, matrix, true);

Drawable drawable = new BitmapDrawable(getResources(), bitmap4);

imageView.setImageDrawable(drawable);

}

その他ファイル

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#aaf"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/kurumi"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:contentDescription="@string/description"/>
    
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="280dp"
        android:layout_marginBottom="16dp"
        android:text="@string/rotation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toRightOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="160dp"
        android:layout_marginBottom="16dp"
        android:text="@string/resize"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toRightOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="40dp"
        android:layout_marginBottom="16dp"
        android:text="@string/flip"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#aaf"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:src="@drawable/kurumi"

android:layout_margin="10dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="280dp"

android:layout_marginBottom="16dp"

android:text="@string/rotation"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintLeft_toRightOf="parent" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="160dp"

android:layout_marginBottom="16dp"

android:text="@string/resize"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintLeft_toRightOf="parent" />

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="40dp"

android:layout_marginBottom="16dp"

android:text="@string/flip"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintLeft_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="description">Kurumi</string>
    <string name="rotation">rotation</string>
    <string name="resize">resize</string>
    <string name="flip">flip</string>
</resources>

<string name="description">Kurumi</string>

<string name="rotation">rotation</string>

<string name="resize">resize</string>

</resources>

　
これで実行させてみましょう。
　

　
　
関連：

Reference:
Matrix