タップ時に Canvas に矩形を描画する単純なサンプル

View の派生クラスの onDraw メソッドにて、キャンバスに描画するということ自体については、「View 派生クラスで Canvas に描画する基礎」を参考にしてください。

ここでは Canvas にグラフィックスを描画する単純な例として、矩形を描画します。

描画するのは、画面をタップしたとき、とします。

ここで作るサンプルは次のようになります。

起動直後は何も表示されないまっさらな画面が現れます。

タップ時に Canvas に矩形を描画する単純なサンプル

画面 (View) のどこかをタップすると、画面左上に緑色の矩形が現れます。

タップ時に Canvas に矩形を描画する単純なサンプル

タップする度に、矩形の幅と高さが少しずつ大きくなっていきます。

タップ時に Canvas に矩形を描画する単純なサンプル

それでは、このコードを示します。

まずベースとなるアクティビティ (MainActivity.java) は次の通り。

package com.example.canvastest1;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new CanvasTest1View(this));
  }
}

setContentView で次に作る CanvasTest1View という View をセットしています。

package com.example.canvastest1;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.MotionEvent;
import android.view.View;


public class CanvasTest1View extends View {
  
  private int   rectW = 70;
  private int   rectH = 100;
  private Rect  rect;
  private Paint paint;
    
  public CanvasTest1View(Context context) {
    super(context);
    rect = new Rect();
    
    paint = new Paint();
    paint.setColor(0xFF008800);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeCap(Paint.Cap.ROUND);
    paint.setStrokeWidth(10);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawRect(rect, paint);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
        
    switch(event.getAction()){
    case MotionEvent.ACTION_DOWN:
      
      rect.set(10, 10, rectW, rectH);
      rectW += 10;
      rectH += 10;
      
      invalidate();
      break;
    }
    
    return true;
  }  
    
}

View のコンストラクタで、Rect オブジェクトと Paint オブジェクトを作ります。

スクリーンモーションイベントを処理するのは onTouchEvent メソッドです。

onTouchEvent メソッドに渡される MotionEvent オブジェクトの getAction メソッドでどのような種類のアクションが起きたのか確認できます。ここでは、プレスジェスチャーが開始したことを示す、ACTION_DOWN が起きたときのイベントを処理しています。

ACTION_DOWN にて、矩形オブジェクトのサイズをリサイズしてから、invalidate メソッドを呼び出し、onDraw にてキャンバスに描画するという流れになります。