Androidアプリ作成講座 8-円を描画する

2018年8月11日2022年10月18日

講座のプログラムも終わりが近づきました。今回は、円を描画してみます。円は、画面の縦横で短い方の幅の半分になるような円を描画します。デバイスによって解像度が違うため、縦横サイズを測ってから円を描画します。

円は画面の上端に接して、左右は中央になるように描画します。

Contents

1. 1.SurfaceViewソース
2. 2.画面サイズの取得
3. 3.円の大きさと座標の計算
4. 4.円の描画
5. 5.基本的なビューへの描画は今回で終了です
6. (LIST)Androidアプリ作成講座

1.SurfaceViewソース

package kunimiyasoft.circletest;
import android.content.Context;
import android.view.SurfaceView;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
    private SurfaceHolder holder;
    // 画面サイズ
    private int screenWidth ;
    private int screenHeight ;
    public MySurfaceView(Context context) {
        super(context);
        holder = getHolder();
        holder.addCallback(this);
    }
    // 変化があった時
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        screenWidth = width ;
        screenHeight = height ;
        myDraw() ;
    }
    // 作成された時
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
    }
    // 破棄される時
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }
    public void myDraw() {
        int radius ;
        int circle_x ;
        int circle_y ;
        // 円の半径と座標の位置を計算する
        if (screenWidth &lt; screenHeight) {
            radius = screenWidth / 4 ;
        } else {
            radius = screenHeight / 4 ;
        }
circle_x = screenWidth / 2 ;</span>
circle_y = radius ;</span>
        Canvas canvas = holder.lockCanvas();
        Paint paint = new Paint();
        // 円の描画
        paint.setStyle(Paint.Style.STROKE); // 塗りつぶし無し
        paint.setColor(Color.argb(255, 0, 0, 0)); // 色は黒で不透明
        paint.setStrokeWidth(5) ; // ペンの太さ
        canvas.drawCircle(circle_x, circle_y, radius, paint);
        // 元に戻す
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.FILL); // 塗りつぶし
        holder.unlockCanvasAndPost(canvas);
    }
}

2.画面サイズの取得

// 画面サイズ
private int screenWidth ;
private int screenHeight ;

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
screenWidth = width ;
screenHeight = height ;

画面のサイズを保持するメンバ変数を用意しておいて、surfaceChanged関数でサイズを受け取ります。

3.円の大きさと座標の計算

int radius ;
int circle_x ;
int circle_y ;

// 円の半径と座標の位置を計算する
if (screenWidth < screenHeight) {
radius = screenWidth / 4 ;
} else {
radius = screenHeight / 4 ;
}
circle_x = screenWidth / 2 ;
circle_y = radius ;

myDraw関数で、円のサイズと位置を計算します。縦と横の幅が狭い方を基準にして、その幅の半分の円の半径を計算しています。

また、円の座標は、上端に接するように、左右は中央になるように計算しています。

これはAndroidの仕様ではなく、今回の仕様ですので、自由に変えても構いません。

4.円の描画

// 円の描画
paint.setStyle(Paint.Style.STROKE); // 塗りつぶし無し
paint.setColor(Color.argb(255, 0, 0, 0)); // 色は黒で不透明
paint.setStrokeWidth(5) ; // ペンの太さ
canvas.drawCircle(circle_x, circle_y, radius, paint);

// 元に戻す
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL); // 塗りつぶし

前の投稿で描画した文字の行は削除してください。

ブラシの定義を行います。まず、円は塗りつぶさない設定にします。そして、円のカラーを定義しています。argb関数を使うことで、自由な色を設定することができます。また、透明度の指定も可能です。

次に、ペンの太さを設定します。例では5ドットにしています。

そして、drawCircle関数で円を描画します。

描画が終わったら、ブラシを元に戻しています。