Canvasクラスを利用して日の丸を描く - Drawing a rising sun flag using a Canvas class -

Androidのグラフィックスに関するクラスを利用して日の丸を描きました．Canvasクラスという図形を描画するためのクラスを利用して白の四角と赤の丸を描画しました．

We drew a rising sun flag using the class that treats graphics in Android. A white rectangle and a red circle was drawn using the Canvas class that is a class to draw figures.



作ったクラスはBetaとBetaViewです．Betaは描画に関するアクティビティで，BetaViewはCanvasに図形を描画するクラスです．


ソースコード

/LayoutTest/src/org/example/layout/Beta.java

package org.example.layout;

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

public class Beta extends Activity{
     @Override
     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(new BetaView(this));
     }
}

/LayoutTest/src/org/example/layout/BetaView.java

package org.example.layout;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class BetaView extends View{

     public BetaView(Context context) {
          super(context);
     }
     
     @Override
     protected void onDraw(Canvas canvas) {
          Paint rect = new Paint();
          rect.setColor(0xffffffff);
          canvas.drawRect(0, 0, getWidth(), getHeight(), rect);

          Paint circle = new Paint();
          circle.setColor(0xffff0000);
          canvas.drawCircle(getWidth() / 2, getHeight() / 2, 90, circle);
     }
}

図形の描画は，ViewのonDrawメソッドをオーバーライドすることで実現できます．onDrawの引数はCanvas型の引数canvasであり，このcanvasに描画のためのメソッドがあります．四角，丸を描画するためのメソッドはそれぞれdrawRect，drawCircleです．

プログラムで利用したdrawRect，drawCircleの引数の意味は次の通りです．描画は，画面の左上を基準点としています．

drawRect
第一引数：左側の位置
第二引数：上側の位置
第三引数：右側の位置
第四引数：下側の位置
第五引数：Paint

drawCircle
第一引数：円の中心点の横軸位置
第二引数：円の中心点の縦軸位置
第三引数：半径
第四引数：Paint


getWidth，getHeightメソッドはそれぞれ画面の横幅，縦幅を取得するViewクラスのメソッドです．また，Paintはグラフィックスに関するスタイル情報や色を管理するクラスです．

Paintに色を設定するにはsetColorメソッドを呼び出します．setColorメソッドには色を表す整数型を引数として与えます．その引数の形式は，データを32ビット整数としてとらえ，上位ビットから8ビット区切りでアルファ，赤，緑，青（ARGB）を意味します．アルファとは透明度のことで，色が完全に不透明なのは16進数でffです．


実行結果
実行してデバイスをCtrl+F11で横長モードにするといい感じになりました．