[Android 開発] グラフィックスの描画 ~ View 編

Posted by
ぴろり
Posted at
2015/02/09 16:10
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ
カバーイメージ

 Android アプリで、View を用いて画面上にグラフィックス描画する方法の覚書き。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

スクラップ帳 » Android アプリ開発 Tips ~ グラフィックスの描画

 Android アプリを開発する際の小技まとめ。画面へのグラフィックス描画などの覚書きを網羅して、必要な機能をコピー&ペーストで再利用できるようにします。

  1. グラフィックスの描画 ~ View 編 2015/02/09 今ココ
  2. グラフィックスの描画 ~ SurfaceView 編 2015/02/10
  3. View でアニメーション描画 2015/02/14

概要

  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 して、画面を再描画します。すると、描画バッファの内容がいよいよ画面に表示されます。

参考リンク

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:[Android 開発] グラフィックスの描画 ~ SurfaceView 編

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。