第 5 章 グラフィックス 77
5.2 キャンバス
と書くことによって、ビューの背景色をオレンジ色に設定することができます。
5.1.6 独自のビューを表示するアプリケーションの例
それでは、独自のビューを表示するアプリケーションを作ってみましょう。
次のようなプロジェクトを作成してください。
Project name view
Application name 独自のビュー Package name org.example.view Create Activity ViewActivity
次に、ViewActivity.javaを次のように書き換えてください。
プログラムの例 ViewActivity.java package org.example.view;
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.view.View;
import android.graphics.Color;
public class ViewActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(new MyView(this));
} }
class MyView extends View { MyView(Context context) {
super(context);
setBackgroundColor(Color.rgb(192, 255, 64));
} }
これで完成です。実行すると、背景色が黄緑色に設定されたビューが表示されるはずです。
5.2 キャンバス
5.2.1 キャンバスの基礎
ビューの上にグラフィックスを描画するためには、「キャンバス」(canvas)と呼ばれるオブジェ クトが必要になります。
キャンバスというのは、android.graphics.Canvasというクラスのオブジェクトのことです。
このオブジェクトは、ビューの上にグラフィックスを描画するために使うことのできるさまざま なメソッドを持っています。
5.2.2 グラフィックスの描画
Viewクラスの中では、
void onDraw(Canvas canvas)
というメソッドが定義されています。これは、ビューの上にグラフィックスを描画する必要が生 じたときに自動的に呼び出されるメソッドです。ということは、Viewを継承するクラスを定義 するときに、このメソッドをオーバーライドして、その中でグラフィックスの描画を記述してお けば、その記述は、ビューの上にグラフィックスを描画する必要が生じるたびに実行される、と いうことになります。
onDrawは、キャンバスを引数として受け取ります。グラフィックスを描画したいときは、onDraw が引数として受け取ったキャンバスが持っているメソッドを使うことになります。
5.2.3 座標系
グラフィックスを描画するときには、点の位置を指定するために、何らかの座標系が使われ ます。
Androidで使われる座標系は、次のようなものです。
• 原点は画面の左上の隅。
• x軸は右向き。
• y軸は下向き。
• 距離の単位はピクセル。
5.2.4 ペイント
キャンバスは、ビューの上にグラフィックスを描画するためのさまざまなメソッドを持ってい ます。たとえば、キャンバスが持っている、
void drawCircle(float cx, float cy, float radius, Paint paint)
というメソッドを呼び出すことによって、ビューの上に円を描画することができます。このメソッ ドが受け取る引数は、1個目が中心のx座標、2個目が中心のy座標、3個目が半径です。そし てこのメソッドは、4個目の引数として、「ペイント」(paint)と呼ばれるオブジェクトを受け取 ります。
ペイントというのは、android.graphics.Paintというクラスのオブジェクトのことです。ペ イントは、グラフィックスを描画するときに使われるスタイルと色を保持することができます。
たとえば、
void setColor(int color)
というメソッドを呼び出すことによって、グラフィックスを描画するときに使う色をペイントに 設定することができます。
5.2.5 グラフィックスを描画するアプリケーションの例
それでは、グラフィックスを描画するアプリケーションを作ってみましょう。
次のようなプロジェクトを作成してください。
Project name canvas Application name キャンバス
Package name org.example.canvas Create Activity CanvasActivity
次に、CanvasActivity.javaを次のように書き換えてください。
プログラムの例 CanvasActivity.java package org.example.canvas;
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.view.View;
import android.graphics.Color;
import android.graphics.Canvas;
import android.graphics.Paint;
public class CanvasActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(new CanvasView(this));
} }
5.2. キャンバス 81
class CanvasView extends View { CanvasView(Context context) {
super(context);
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) { Paint paint = new Paint();
paint.setColor(Color.rgb(255, 0, 0));
canvas.drawCircle(100, 100, 50, paint);
paint.setColor(Color.argb(128, 0, 0, 255));
canvas.drawCircle(140, 100, 50, paint);
} }
これで完成です。実行すると、赤色の円と、青色で半透明の円が描画されるはずです。
5.2.6 ビューの大きさ
ビューの上にグラフィックスを描画する場合に、そのビューの大きさを意識してグラフィック スの位置や大きさを決定したい、ということがしばしばあります。Androidでは、
• int getWidth()
• int getHeight()
というメソッドを呼び出すことによって、ビューの大きさを求めることができます。getWidth は横の長さを返すメソッドで、getHeightは縦の長さを返すメソッドです（単位はどちらもピク セル）。
5.2.7 ビューの大きさを意識して動作するアプリケーションの例
それでは、getWidthとgetHeightを使って、ビューの大きさを意識して動作するアプリケー ションを作ってみましょう。
次のようなプロジェクトを作成してください。
Project name size
Application name ビューの大きさ Package name org.example.size Create Activity SizeActivity
次に、SizeActivity.javaを次のように書き換えてください。
プログラムの例 SizeActivity.java package org.example.size;
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.view.View;
import android.graphics.Color;
import android.graphics.Canvas;
import android.graphics.Paint;
public class SizeActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(new CanvasView(this));
} }
class CanvasView extends View {
private static final int RADIUS = 30;
CanvasView(Context context) { super(context);
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) { int width = getWidth();
int height = getHeight();
Paint paint = new Paint();
paint.setColor(Color.rgb(0, 128, 0));
canvas.drawCircle(0, 0, RADIUS, paint);
canvas.drawCircle(width, 0, RADIUS, paint);
canvas.drawCircle(0, height, RADIUS, paint);
canvas.drawCircle(width, height, RADIUS, paint);
} }
これで完成です。実行すると、ビューの左上、右上、左下、右下のそれぞれを中心とする4個 の円が描画されるはずです。