概要

1. View クラスを継承して MyView クラスを宣言します
2. MyView#onDraw を Override して、グラフィックスを描画をします
3. アクティビティの setContentView で、作成した MyView インスタンスを指定します

　アクティビティの onCreate のタイミングにおいて、今までのようにレイアウトを指定する替りに、独自に実装した MyView を指定します。MyView#onDraw において、渡される Canvas オブジェクトに自由に描画すれば OK。実際のアプリケーションでは、ビットマップなどで描画バッファ(一般的な Off Screen Buffer)を保持しておき、描画バッファを画面に書き出すなどすると思います。

Fig.1 スクリーンショット

ソースコード

　画面に固定グラフィックスを表示するだけでは寂しいので、Viewにタッチで絵を描く[Bitmapに線を書き込む] | アンドロイドアプリ開発TIP★STARを参考に、画面をタッチして絵を描けるようにしてみました。

package com.example.helloworld;

import android.support.v7.app.ActionBarActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.MotionEvent;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

// http://developer.android.com/reference/android/app/Activity.html
public class MainActivity extends ActionBarActivity {

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

        setContentView( new MyView( this ));
    }

    private class MyView extends View {

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

    	private Bitmap mBitmap = null;
    	private Canvas mCanvas = null;
        private Paint mPaint = null;

    	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged( w,h, oldw,oldh );

            mBitmap = Bitmap.createBitmap( w,h, Bitmap.Config.ARGB_8888 );
            mCanvas = new Canvas( mBitmap );
            mPaint = new Paint();
    	}

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

            canvas.drawBitmap( mBitmap, 0, 0, null );
        }

        private float mOldX, mOldY;
 
        public boolean onTouchEvent(MotionEvent e) {

            switch( e.getAction()) {
            case MotionEvent.ACTION_DOWN:
            	mPaint.setColor( Color.argb( 255, rand255(), rand255(), rand255()));
            case MotionEvent.ACTION_UP:
            	mCanvas.drawCircle( mOldX = e.getX(), mOldY = e.getY(), 3, mPaint);
            	break;
            case MotionEvent.ACTION_MOVE:
                mCanvas.drawLine( mOldX,mOldY, e.getX(),e.getY(), mPaint);
                mOldX = e.getX();
                mOldY = e.getY();
                break;
            default:
                return true;
            }
            invalidate();
            return true;
        }

        private int rand255() {
        	return (int) (Math.random() * 256);
        }
    }
}

解説

22～69 行目

　View を継承した MyView クラスを宣言します。

19 行目

　生成した MyView でアクティビティを描画します。

35 行目

　描画内容を記憶するための描画バッファを生成しておきます。

36 行目

　描画バッファに描画するための Canvas を生成しておきます。

37 行目

　描画バッファの Canvas に描画するためのブラシを生成しておきます。

40～44 行目

　描画バッファの内容を画面に書き出します。

50～55 行目

　画面がタッチされたら/画面タッチが終わったら、描画バッファに円を描きます。

56～62 行目

　画面がタッチされている間、描画バッファに直線を描画します。

65 行目

　描画バッファへ描画し終わったら、View 全体を invalidate して、画面を再描画します。すると、描画バッファの内容がいよいよ画面に表示されます。

参考リンク

• Viewにタッチで絵を描く[Bitmapに線を書き込む] | アンドロイドアプリ開発TIP★STAR
• Android Developer references
  • View
  • Canvas
  • Bitmap
  • MotionEvent