Android アプリ開発「MATRIX」

Androidアプリの開発に役立つサンプル集


Matrix(マトリクス)でビットマップ画像を連続回転させながら移動する方法

ビットマップ画像を連続回転させながら移動する

今回は、オリジナルの View(MyNewViewView.class)に配置した画像を、マトリックス(Matrix)を使い連続回転させながら移動するサンプルです。View に配置したビットマップ画像の回転や移動の方法がよくわからないという方はぜひ参考にしてください。

サンプルコード①(MainActivity.java

このサンプルは、画面を描画するオリジナルの View(MyNewViewView.class) を別ファイルにせず MainActivity の中に含めた「一体型」になっています。なお、サンプルコードの詳しい説明はコード内のコメントを参照してください。

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

//オリジナルの ViewMyNewViewView.class)をセットして使用
setContentView(new MyNewViewView(this));
}

//オリジナルのViewMyNewViewView
public class MyNewViewView extends View {

//各オブジェクト・変数を準備
private Bitmap bitmap;
private BitmapFactory.Options options;
private Resources resources;
private float scale_x, scale_y;
private float ichi_x, ichi_y;
private float kakudo;

public MyNewViewView(Context context) {
super(context);

//タイマーの生成とインスタンス
Timer timer1 = new Timer();
//表示位置用の変数を初期化
ichi_x = 0f;
ichi_y = 150f;
//角度用の変数を初期化
kakudo = 0f;
//大きさ用の変数を初期化
scale_x = 0.1f;
scale_y = 0.1f;

//プロジェクトのリソースにアクセスするための準備
resources = context.getResources();
//ビットマップを読み込む際のオプションを準備
options = new BitmapFactory.Options();
//スケーリングを無効にセット(原寸大表示にする)
options.inScaled = false;
//リソース(drawable)から画像を読み込んで、同時にオプションを適用
bitmap = BitmapFactory.decodeResource(resources, R.drawable.pslogo, options);
//ビットマップの背景色に合わせてViewの背景色を黒色にする
setBackgroundColor(Color.BLACK);

//タイマーにスケジュールを登録してスタート
timer1.schedule(new TimerTask() {
@Override
public void run() {

//表示位置を計算
ichi_x += 2f;
ichi_y += 2f;
//角度の計算(5度ずつ回転)
kakudo += 5f;
//表示の更新(描画用メソッドを呼び出している)
postInvalidate();

//画像が5回転したらタイマー処理をキャンセルして終了させる
if(kakudo >= 1800f){
//自分(timer1)をキャンセル
this.cancel();
}
}
},100,100); //100ms後に100ms間隔で実行
}

//描画用メソッド
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//マトリックスを生成してインスタンス
Matrix matrix = new Matrix();
//マトリクスに座標をセット
matrix.setTranslate(ichi_x,ichi_y);
//続いて、ビットマップ画像の中心を軸にした回転角度を設定
matrix.postRotate(kakudo,ichi_x + bitmap.getWidth() / 2,ichi_y + bitmap.getHeight() / 2);
//文字を表示するためのPaintの準備
Paint paint = new Paint(); //ペイントの生成とインスタンス
paint.setAntiAlias(true); //アンチエイリアスを有効
paint.setColor(Color.WHITE); //文字を白色に設定
paint.setTextSize(50); //文字サイズを50

//matrix を適用したビットマップ画像を表示
canvas.drawBitmap(bitmap, matrix,null);
//テキスト文字の表示
canvas.drawText("現在の角度:" + kakudo + "",10,50, paint);
canvas.drawText("現在の位置:X座標" + ichi_x,10,100, paint);
canvas.drawText("現在の位置:Y座標" + ichi_y,10,150, paint);
}
}
}

サンプルコード②(AndroidManifest.xml

マニフェストファイルの記述はありません。

サンプルコード③(activity_main.xml

画面にはオリジナルの View(MyNewViewView.class)をセットするので、レイアウトファイルは使用しません。

実行結果

① 起動すると X座標0px、Y座標150px の位置にビットマップ画像が表示され 100ms 間隔で5度ずつ回転しながら斜め右方向(X方向に2px、Y方向に2px)に移動を始めます。

アンドロイド開発「Matrix」回転と移動①

② しばらくして 5回転(1800度回転)したところで回転と移動が停止します。

アンドロイド開発「Matrix」回転と移動②

備考・その他

マトリックス(Matrix)の使い方がわかってくると、実際にあるいろいろな動きを再現できるようになります。今回のサンプルのコードを変更していろいろなテストをしてみてください。

END