Android アプリ開発 「MATRIX」

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



Matrix の基本「Translate」の使い方を知ろう(その1)

Matrix の Translate を知る

Matrix 関数の中に 「Translate」 というメソッドがあります。Translate を利用すると画像を任意の場所に移動することができますが、その使い方や使い道がよくわかりませんので、今回からその「Translate」について少しずつ調べてみることにします。

Translate は3種類ある

Translate には「setTranslate」「preTranslate」「postTranslate」の3種類があり、「移動する」という基本動作は同じですが、それぞれ微妙に動きが違います。

  • setTranslate・・・指定場所に移動する
  • preTranslate・・・あらかじめ移動する
  • postTranslate・・・現状に続けて移動する

と、簡単に説明するとこんな感じになるかとは思います。 

サンプルコード(MyView)

今回使うサンプルコード(オリジナルのView)です。動きは「画像を読み込んで表示する」だけの単純なものです。このコードを MainActivity で読み込んで表示させますので、レイアウトXMLは使いません。※Matrix の命令を記述するのはコード中の赤文字の部分になります。

public class MyView extends View {

//各オブジェクト・変数を準備
private Bitmap bitmap;
private BitmapFactory.Options options;
private Matrix matrix;
private Resources resources;

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

//リソース(drawable にある画像)にアクセスするための準備
resources = context.getResources();

//ビットマップを読み込む際のオプションを準備
options = new BitmapFactory.Options();
//スケーリングを無効にセット(原寸大表示にする)
options.inScaled = false;

//リソース(drawable)から画像を読み込んで、同時にオプションを適用
bitmap = BitmapFactory.decodeResource(resources, R.drawable.image, options);

//背景色をライトグレーにする
setBackgroundColor(Color.LTGRAY);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//matrix に新規のマトリックスを準備
matrix = new Matrix();

//ここに Matrix の命令を記述する
matrix.setTranslate(100,100);

//matrix を適用し画像を表示
canvas.drawBitmap(bitmap, matrix, null);
}
}

サンプルコード(MainActivity)

セットする View をレイアウトXML(activity_main)からオリジナルの「MyView」に書き換えますが、この時必ず頭に new を付けなければなりません。 

public class MainActivity extends AppCompatActivity {

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

//オリジナルの ViewMyView.class)をセットして使用
setContentView(new MyView(getBaseContext()));
}
}

調査① 単独での動き

まず、「setTranslate」を単独で使ってみます。

matrix.setTranslate(100,100);

<結果>

単純に、画像が左上の角から X方向に100px、Y方向に100px 移動しました。これは、「preTranslate」「postTranslate」についても同じでしたのでこの2つの結果は省略します。

f:id:vw-dsg:20171218102509p:plain

調査② 複数回続けた場合の動き

まず、「setTranslate」を数値を変えつつ複数回続けて使ってみます。

matrix.setTranslate(100,100);
matrix.setTranslate(200,200);
matrix.setTranslate(300,300);

<結果>

最終的に最後に命令した座標に移動しました。どうやら一番目と二番目の命令は次々と置き換えられてしまうようです。

f:id:vw-dsg:20171218103513p:plain

次に、「preTranslate」で同様に複数回続けて命令してみます。

matrix.preTranslate(100,100);
matrix.preTranslate(200,200);
matrix.preTranslate(300,300);

<結果>

今度は、XとYそれぞれの数値を合計した X方向に600px、Y方向に600px 移動しました。「preTranslate」は命令が重複しても上書きされることはなく、継続的に移動するようです。

f:id:vw-dsg:20171218105715p:plain

最後に、「postTranslate」を同様に使ってみます。

matrix.postTranslate(100,100);
matrix.postTranslate(200,200);
matrix.postTranslate(300,300); 

<結果>

結果は 「preTranslate」と同じでした。

f:id:vw-dsg:20171218105715p:plain

今回のまとめ

単独ではどれも同じ結果になりましたが、複数回重ねた場合は「setTranslate」は次の「setTranslate」によって置き換えられ、「preTranslate」と「postTranslate」は継続的に移動するという違いがあることがわかりました。

今回の調査で同じ結果を出した「preTranslate」「postTranslate」の動き違いについては次回の「その2」でいろいろと調べてみたいと思います。

END