本連載は、Googleケータイ、Android を題材とした、Javaプログラミング入門講座の三回目です。今回は、画面に絵を描画して遊んでみます。自作のアプリを普段持ち歩くケータイで動かすことができるので楽しいです。本連載で楽しくプログラミングを学びましょう。

前回のおさらい

前回は、Android プロジェクトにどんなファイルが含まれているのかを確認しました。また、Java のクラスについても簡単に紹介しました。

• はじめてのアプリ開発
• 画面に好きな文字を表示する

docomo HT-03Aも1.6にアップデート

2009年11月現在、Andorid 2.0 が発表されていますが、この連載でdocomo HT-03Aもファームウェアのバージョンが1.6になっています。ここでは、docomo HT-03A で動くアプリケーションを対象にしていますので、特にSDKのアップデートは必須ではありませんが、必要なら、以下のURLから最新版の Andorid SDK を入手できます。

• http://developer.android.com/sdk/index.html

円を描いてみよう

今回は画面に絵を描くプログラムをいろいろ紹介します。一番はじめに円を描くプログラムを作ってみます。それでは、Eclipse を起動して、Fileメニューから Android プロジェクトを作成してみましょう。

ここでは、以下の設定でプロジェクトを作成しました。

そして、メインプログラムを以下のように書き換えます。

package com.kujirahand.TestDraw;
/* ライブラリのインポート宣言 */
import android.app.Activity;
import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.View;
/* メインクラス */
public class TestDraw extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 描画クラスを設定
        setContentView(new TestDrawView(getApplication()));
    }
}
/* 描画用クラス */
class TestDrawView extends View {
    public TestDrawView(Context c) {
        super(c);
    }
    // このメソッドで描画を行う
    protected void onDraw(Canvas c) { // --------- (*1)Check!!
        c.drawColor(Color.WHITE);
        Paint p = new Paint();
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.FILL);
        c.drawCircle(100, 100, 50, p);
    }
}

これを実行してみると、白い画面に赤い円が表示されます。

実行してみたところ

ライブラリのインポート宣言があったり、クラスの宣言が２つあったりと、ちょっと、ごちゃごちゃとした印象があります。しかし、今回注目したい点は、TestDrawView クラスにある onDraw() メソッド(*1)です。

メソッド(method)とは、Java において、ひとまとまりの処理を実行するためのものです。メンバ関数とも言います。

この onDraw() メソッドは、画面描画のタイミングで呼び出されます。つまり、画面に表示を更新したい場合には、このメソッドの中に何を描画するのかを指定することになります。

改めて抜粋して見てみましょう。

    protected void onDraw(Canvas c) {
        c.drawColor(Color.WHITE);      // 画面を真っ白に塗りつぶす
        Paint p = new Paint();         // 描画設定を行う
        p.setColor(Color.RED);         // 赤色に設定
        p.setStyle(Paint.Style.FILL);  // 塗りつぶすことを設定
        c.drawCircle(100, 100, 50, p); // 実際に円を描画する
    }

一行目は、メソッドの宣言です。protected (保護された)に、続いて void(空白状態)とあり、英語として読むと意味が分かりません。「protected」というのは、このメソッドが他のクラスから保護されていることを表します。（詳しくはまた後日書きます。）

そして次の「void」というのは、このメソッドが何も値を返さないことを表しています。Java の多くのメソッドは、実行結果を返すことができるようになっているのですが、このメソッドは何も返さないという意味で「void」を指定します。

そして、「onDraw」がメソッドが名前で、その後に続く(Canvas c)というのが、メソッドの引数です。「Canvas c」というのは、Canvasというクラスの c というオブジェクトという意味です。

二行目以降では、円を描画するための描画設定を行います。この設定を行うのが、Paint クラスです。以下は、Java でよく見かける書き方ですが、Paint クラスのオブジェクトを作成し、p という変数に代入します。

Paint p = new Paint();

これは、以下のように書いても同じ意味になります。Paint クラスの変数 p を使うことを宣言し、その後、p に生成したオブジェクトを代入しています。

Paint p;          // 変数宣言
p = new Paint();  // オブジェクトを作成して、変数「p」に代入

そして、描画設定を行う Paint オブジェクトの p に対して、色や塗り方を設定し、描画を実行します。円を描画する、drawCircle() メソッドでは、X座標、Y座標、半径、描画情報の順で、引数を設定します。

Paint p = new Paint();         // 描画設定を行う Paint オブジェクトを作成
p.setColor(Color.RED);         // 色を赤色に設定
p.setStyle(Paint.Style.FILL);  // 塗りつぶすことを設定
c.drawCircle(100, 100, 50, p); // 実際に円を描画する

線を描画してみよう

円を描画したら、次に線を描画してみます。先ほどの、onDraw() メソッドを次のように書き換えて実行してみましょう。

    protected void onDraw(Canvas c) {
        c.drawColor(Color.WHITE);
        // 円を描画
        Paint p = new Paint();
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.FILL);
        c.drawCircle(100, 100, 50, p);
        // 線を描画
        p.setColor(Color.BLUE);
        p.setStrokeWidth(4);
        c.drawLine(0, 0, 200, 200, p);
    }

実行すると、以下のように表示されます。

drawCircle() メソッドと同様にして、drawLine() メソッドを使うことで線を描画できます。ただ、描画設定の方法が少し異なり、setStrokeWidth() メソッドで、線の太さを指定することができます。

四角を描画してみよう

次に四角（長方形）を描画してみます。先ほどの、onDraw() メソッドを次のように書き換えて実行してみましょう。

    protected void onDraw(Canvas c) {
        c.drawColor(Color.WHITE);
        // 円を描画
        Paint p = new Paint();
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.FILL);
        c.drawCircle(100, 100, 50, p);
        // 線を描画
        p.setColor(Color.BLUE);
        p.setStrokeWidth(4);
        c.drawLine(0, 0, 200, 200, p);
        // 四角を描画
        p.setColor(Color.GREEN);
        p.setStyle(Paint.Style.STROKE);
        c.drawRect(30, 30,  200, 140, p);
    }

ここで描画した長方形は、塗りつぶすのではなく、枠線だけを描画してみました。枠線だけを描画する場合には、setStyle()メソッドで、Paint.Style.STROKE を指定するんです。そして、長方形を描画する場合には、『drawRect(左上X座標,左上Y座標,右下X座標,右下Y座標,描画設定)』の順で指定します。

まとめ

今回は、円、線、長方形とAndroidの画面に簡単な図形を描画する方法を紹介しました。ソースコードの中に理解できない部分があるとしても、onDraw()メソッドの中に、drawXXX() のようなメソッドを書き加えることで図形を表示できるということが分かれば、今回はばっちりです。できれば、自分なりに好きな図形を描画させて遊んでみてください。