テクパー２０２０
テクニカルヘルパー


　android アンドロイド入門 アプリ開発　
◆ グラフィックの描画
・ グラフィック（ライン，パス，オフセット，キュービック，カドリール，四角形，円）を描画します

１．新規プロジェクトで　「 Ｄｅｓｉｇｎ 」　を新規に作成します

１）ファイル(F)　→　新規(N)　→　プロジェクト(P)

２）Ａｎｄｒｏｉｄ　の　Ａｎｄｒｏｉｄ プロジェクト　を選択し、［次へ(N)］ボタン　をクリック
・プロジェクト名に　「 Design 」　を入力
・ビルド・ターゲットの　□ Ａｎｄｒｏｉｄ ２．２　を　チェック　（最新のバージョン）
・アプリケーション名に　「 Design 」　を入力
・パッケージ名に　「 任意のドメイン名 」　を入力　（ドメイン名をパッケージ名に利用）
・□ Ｃｒｅａｔｅ Ａｃｔｉｖｉｔｙがチェック状態で、名称に　「 Design 」　を入力
・［完了］ボタン　をクリック


３）Ｖｉｅｗクラス　「 ＤｅｓｉｇｎＶｉｅｗ 」　を新規に作成します
・ｓｒｃのパッケージ上で右クリック　→　新規(W)　→　クラス
・名前(M)に　「 DesignView 」　を入力
・スーパークラス(S)に　「 android.view.View 」　を入力
・［完了］ボタン　をクリック

４）生成された　「 DesignView 」　を書き換え
package com.proto.design;

import android.view.View;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Paint.Align;

public class DesignView extends View {

    // コンストラクタ
    public DesignView(Context context) {
        super(context);
        
        // 背景色の指定　（android.graphics.Colorの定義）
        setBackgroundColor(Color.WHITE);

    }

    // 描画
    @Override 
    protected void onDraw(Canvas canvas) {
    
        // 描画オブジェクトの生成
        Paint paint=new Paint();
        paint.setAntiAlias(true);                    // 文字の縁を滑らかに描く
        paint.setColor(Color.parseColor("blue"));    // 色指定
        paint.setTextSize(22);                       // 文字サイズ
        paint.setTextAlign(Align.CENTER);            // 文字位置
        canvas.drawText("グラフィックの描画",getWidth()/2,22,paint);
        
        // ラインの描画
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
        paint.setColor(Color.parseColor("yellow"));
        canvas.drawLine(0,26,getWidth(),26,paint);        // 水平線

        paint.setStrokeWidth(2);
        paint.setColor(Color.parseColor("red"));
        canvas.drawLine(0,30,getWidth()/2-10,30,paint);   // 水平線

        paint.setStrokeWidth(3);
        paint.setColor(Color.parseColor("green"));
        canvas.drawLine(getWidth()/2-10,30,getWidth()/2-10,30+40,paint); // 垂直線

        paint.setStrokeWidth(5);
        paint.setColor(Color.parseColor("magenta"));
        canvas.drawLine(getWidth()/2,30,getWidth()/2-10,30+40,paint);    // 斜線

        paint.setStrokeWidth(7);
        paint.setColor(Color.parseColor("blue"));
        canvas.drawLine(getWidth()/2,30,getWidth()/2+20,30+40,paint);    // 斜線

        // パス描画のガイド線
        paint.setStrokeWidth(1);
        paint.setColor(Color.parseColor("gray"));
        for(int i=0; i<20; i++){
        canvas.drawLine(40,80+i*10,getWidth()-30,80+i*10,paint);
        canvas.drawLine(40+i*10,80,40+i*10,270,paint);
        }
        
        // パスの描画
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);
        paint.setColor(Color.argb(255,255,0,0));
        Path path=new Path();
        path.moveTo(50,80);
        path.lineTo(70,100);
        path.lineTo(40,120);
        path.lineTo(110,130);
        path.lineTo(90,150);
        canvas.drawPath(path,paint);
        // オフセット描画
        path.offset(100,0);
        canvas.drawPath(path,paint);
        path.reset();                               // 位置情報のリセット
        // キュービックの描画
        path.moveTo(60,180);
        path.cubicTo(30,260, 120,280, 80,200);
        canvas.drawPath(path,paint);
        path.reset();                               // 位置情報のリセット
        // カドリールの描画
        path.moveTo(160,180);
        path.quadTo(170,220, 280,260);
        canvas.drawPath(path,paint);

        // 四角形の描画
        paint.setStrokeWidth(2);
        paint.setColor(Color.argb(255,0,0,255));
        paint.setStyle(Paint.Style.STROKE);                      // 塗り潰しなし
        canvas.drawRect(new Rect(20,300,20+30,300+40),paint);        
        paint.setStyle(Paint.Style.FILL);                        // 塗り潰し
        canvas.drawRect(new Rect(60,300,60+30,300+40),paint);

        // 角丸矩形の描画
        paint.setStrokeWidth(2);
        paint.setColor(Color.argb(255,255,0,255));
        paint.setStyle(Paint.Style.STROKE);                      // 塗り潰しなし
        canvas.drawRoundRect(new RectF(110,300,110+40,300+40),10,10,paint);
        paint.setStyle(Paint.Style.FILL);                        // 塗り潰し
        canvas.drawRoundRect(new RectF(160,300,160+40,300+40),10,10,paint);
        
        // 円の描画
        paint.setStrokeWidth(2);
        paint.setColor(Color.argb(255,0,255,0));
        paint.setStyle(Paint.Style.STROKE);                       // 塗り潰しなし
        canvas.drawCircle(240,320,20,paint);
        paint.setStyle(Paint.Style.FILL);                         // 塗り潰し
        canvas.drawCircle(290,320,20,paint);

    }

}


５）「 Design」　を書き換え
package com.proto.design;

import android.app.Activity;
import android.os.Bundle;
//import android.view.Window;

public class Design extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // ウィンドウタイトルの非表示
        // requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        // setContentView(R.layout.main);書き換え
        setContentView(new DesignView(this));
    
    }
}


・機能の説明
android.graphics.Paint　 のPaintクラスで指定

public void setStyle (Paint.Style style) 
_　スタイル（FILL, FILL_AND_STROKE, STROKE）

public void setStrokeWidth (float width) 
_　幅の指定（0 〜ピクセルで指定）

public void setColor (int color) 
_　色の指定
 
android.graphics.Canvas　 のCanvasクラスでグラフィックスの描画

// ライン（線）の描画　（始点X位置，始点Y位置，終点X位置，終点Y位置，描画インスタント）
public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint) 
android.graphics.Path　 のPathクラスでグラフィックスの描画

// 連結線の描画　（始点X位置，始点Y位置）
public void moveTo (float x, float y) 

// 連結線の描画　（連結点X位置，連結点Y位置）
public void lineTo (float x, float y) 

// キュービックの描画
public void cubicTo (float x1, float y1, float x2, float y2, float x3, float y3) 

// カドリールの描画
public void quadTo (float x1, float y1, float x2, float y2) 

// オフセット描画
public void offset (float dx, float dy) 

// 位置情報のリセット
public void reset () 
android.view.View　 のViewクラスで描画の処理

// 描画の処理（オーバーライド）
protected void onDraw (Canvas canvas) 
android.graphics.Canvas　 のCanvasクラスでグラフィックスの描画

// 四角形の描画　（左位置，上位置，右位置，下位置，描画インスタント）
public void drawRect (Rect r, Paint paint) 
public void drawRect (float left, float top, float right, float bottom, Paint paint) 

// 角丸矩形の描画　（左位置，上位置，右位置，下位置，楕円X径，楕円Y径，描画インスタント）
public void drawRoundRect (RectF rect, float rx, float ry, Paint paint) 

// 円の描画　（X座標，Y座標，半径，描画インスタント）
public void drawCircle (float cx, float cy, float radius, Paint paint) 
android.graphics.Rect　 のRectクラスでグラフィックスの位置指定（ｉｎｔ）

// 位置の指定　（左位置，上位置，右位置，下位置）
public Rect (int left, int top, int right, int bottom) 
android.graphics.RectF　 のRectFクラスでグラフィックスの位置指定（ｆｌｏａｔ）

// 位置の指定　（左位置，上位置，右位置，下位置）
public RectF (float left, float top, float right, float bottom)


６）プロジェクトの実行（実行構成の作成は、「プロジェクトの新規作成」を参照）
・実行(R)　→　実行(R)
（グラフィックを描画する）


Copyright (C) 2010 プログラミングのテクニックをあなたに！！（リトル・ヘルパー） All Rights Reserved.