Android講座3回のバックアップ差分(No.1)

追加された行はこの色です。
削除された行はこの色です。
ぐへへへぇイトコスキーによるAndroid講座第３回です

今回は画面にお絵かきをするviewについてやって行きましょう！
先にlayoutの方をやってもよかったのですがみんながゲームを作れるようにviewを選択しました。

それではさっそくプロジェクトの作成をします
 
画像では隠れてしまいましたが…
プロジェクト名: ViewTest
ターゲット:Android2.2
アプリケーション名:view test
パッケージ名:aokai.app.viewtest
Create Actvity:Main
と私はとりあえずしました。

次にviewクラスを継承したクラスを作ります。Viewクラスは独自に画面を作りたい時に利用します。さらにキーを押した、画面がタッチされたなども認識できます。
 


import android.content.Context;
import android.view.View;

public class MyView extends View{
	public MyView(Context context) {
		super(context);
		// TODO 自動生成されたコンストラクター・スタブ
	}
}
Viewを継承しただけのコードです
コンストラクタは自動生成されたものをそのままです

これでMainのコードの方で以下のように書けばViewが使えます。
package aokai.app.viewtest;

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

public class Main extends Activity {
	MyView view;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        view = new MyView(this);
        setContentView(view);
    }
}
前回との違いはsetContentView で引数をlayoutのIDではなく
今回はviewを継承したクラスと言うことです

これで一回実行すると以下のような画面になると思います
 
結果はもちろんなにもコードを書いていないので真っ黒ですｗｗ

真っ黒だけで終わるのはつまらないので実際に色々な物を描いてみましょう
今回は画像を使うためres/draw～のフォルダーの３つ以下の画像を入れます
  
Image.jpg		score_num.png

 

そしてMyViewを以下のようなコードにします
色々なものを詰め込んだので長くなってしまいましたがご了承ください


package aokai.app.viewtest;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.view.View;

public class MyView extends View {
	private Context context;

	public MyView(Context context) {
		super(context);
		this.context = context;
	}

	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Paint paint = new Paint();
		paint.setAntiAlias(true); // アンチエイリアス

		// キャンバスを指定した色で塗る
		canvas.drawColor(Color.WHITE);

		//直線！！
		paint.setStrokeWidth(2);
		paint.setColor(Color.rgb(255, 0, 0));
		canvas.drawLine(20, 10, 20, 60, paint);
		
		//ギザギザ直線！！！！
		Path path = new Path();
		paint.setColor(Color.BLUE);
		paint.setStyle(Paint.Style.STROKE);
		paint.setStrokeCap(Paint.Cap.ROUND);
		path.moveTo(40,10); // 始点
		path.lineTo(50,30);
		path.lineTo(40,50);
		path.lineTo(50,70); // 終点
		canvas.drawPath(path, paint);
		
		//四角形（塗りつぶしあり）
		paint.setStyle(Paint.Style.FILL);
		canvas.drawRect(60, 10, 100, 50, paint);
		
		//四角形（塗りつぶしなし）
		paint.setStyle(Paint.Style.STROKE);
		paint.setColor(Color.argb(100,0, 0, 0));
		canvas.drawRect(110, 10, 150, 50, paint);
		
		//円です
		paint.setColor(Color.RED);
		canvas.drawCircle(180, 25, 20, paint);
		
		//文字列の描写
		paint.setColor(Color.BLACK);
		paint.setStrokeWidth(1);
		paint.setTextSize(16);
		paint.setStyle(Paint.Style.FILL);
		String text = "従妹ぐへへへぇ";
		paint.setTextAlign(Paint.Align.LEFT);
		canvas.drawText(text, getWidth()/2, 70, paint);
		paint.setTextAlign(Paint.Align.CENTER);
		canvas.drawText(text, getWidth()/2, 90, paint);
		paint.setTextAlign(Paint.Align.RIGHT);
		canvas.drawText(text, getWidth()/2, 110, paint);
		
		//基本的な画像の描写
		Bitmap bitmap =BitmapFactory.decodeResource(getResources(), R.drawable.image);
		canvas.drawBitmap(bitmap, getWidth()/2 - bitmap.getWidth()/2, 130, paint);
		
		//画像を分解し描写
		Bitmap[] numbar = new Bitmap[11];
		for (int i = 0; i < 11; i++) {
			numbar[i] = Bitmap.createBitmap(BitmapFactory.decodeResource(
					context.getResources(), R.drawable.score_num), i * 8, 0, 8,
					8);
		}
		canvas.drawBitmap(numbar[1], 30, 400, paint);
		canvas.drawBitmap(numbar[1], 40, 400, paint);
		canvas.drawBitmap(numbar[0], 50, 400, paint);
		canvas.drawBitmap(numbar[5], 60, 400, paint);
		
		//いろんな加工をした描写
		gr(bitmap,paint,canvas,200,430,30,40,70);
	}

	private void gr(Bitmap resbitmap, Paint paint, Canvas canvas,
			int x, int y, int rad, int size, int Alpha) {
		int w = resbitmap.getWidth();
		int h = resbitmap.getHeight();
		// 描画元の矩形イメージ
		Rect src = new Rect(0, 0, w, h);
		// 回転させた Bitmap を作成
		Bitmap d_temp;
		Matrix matrix = new Matrix();
		matrix.postRotate(rad); // 回転させる角度を指定
		d_temp = Bitmap.createBitmap(resbitmap, 0, 0, w, h, matrix, true);
		w = d_temp.getWidth();
		h = d_temp.getHeight();
		// 描画元の矩形イメージ
		src = new Rect(0, 0, w, h);
		// 描画先の矩形イメージ
		w = w * size / 100;
		h = h * size / 100;
		Rect dst = new Rect(x - w / 2, y - h / 2, x + w / 2, y + h / 2);
		paint.setAlpha(Alpha);
		canvas.drawBitmap(d_temp, src, dst, paint);
	}
}
書き換えて実行すると実行画面は以下のようになります
 

それではコードを見ていきましょう
22行目
protected void 　onDraw(Canvas canvas) {
画面を描写する内容はonDrawの中で書きます。
この関数はviewで画面を描画されるタイミングごとに呼ばれます。
またinvalidate() 関数で意図的に呼ぶことも可能です。
Android講座3回 のバックアップ差分(No.1)

Android講座3回のバックアップ差分(No.1)
