[Android][AppInventor] PaintPot の Java 版

[Android][AppInventor] PaintPot の Java 版
================================================================================

AppInventor のチュートリアルのサンプル「PaintPot」を Java を使って実装してみる。

PaintPot は以下のようなアプリ。
---
PaintPot で画面をタッチしてさまざまなカラーのドットや線を描いてらくがきができま
す。
これが PaintPot アプリでできることです。
    描きたい色の仮想ペンキ入れに、指を浸します。
    画面にドラッグした指にそって線が描かれます。
    画面を突いてドットを描きます。
    下のボタンを使って画面をきれいに拭き取ります。
    描画する背景としてイメージが含まれています
---
（ソフトウェア技術ドキュメントを勝手に翻訳 - AppInventor チュートリアル、
http://www.techdoctranslator.com/appinventor/learn/tutorials より）

ただし、オリジナルは、画面の縦横が変わっても線が保持されているが、これは保持して
いない。


今回作ったクラスはつぎの 4 つ。

PaintPotActivity    アクティビティ
CanvasView          カスタム・ビュー（このクラスで描画）
PointWithPaint      Paint オブジェクト付きの点
PathWithPaint       Paint オブジェクト付きの折れ線


今回作ってみて、GUI 系のことは、AppInventor のようなものがあると便利。Java で作
るとなると、わりと面倒、という感じだ。


■ アクティビティ

線の色や太さを変えるボタンとその処理。
今回は、レイアウトの属性 android:onClick 属性にハンドラーを設定したので、このク
ラスの中でハンドラーを定義している。

□ PaintPotActivity
---
package jp.marunomaruno.android.paintpot;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

/**
 * AppInventor のサンプル PaintPot の Java 版。
 * アクティビティ
 * @author marunomaruno
 * @version 1.0, 2011-12-25
 */
public class PaintPotActivity extends Activity {

    private CanvasView canvasView;    // (1)

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        Log.d("TEST", "PaintPotActivity.onCreate()");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    protected void onResume() {
        Log.d("TEST", "PaintPotActivity.onResume()");
        super.onResume();

        canvasView = (CanvasView) findViewById(R.id.canvasView);
    }

    /**
     * 「赤」ボタン・クリック
     * @param v
     */
    public void onRedButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onRedButtonClick() - [%s]", v.toString()));
        canvasView.setPaintColor(Color.RED);    // (2)
    }

    /**
     * 「緑」ボタン・クリック
     * @param v
     */
    public void onGreenButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onGreenButtonClick() - [%s]", v.toString()));
        canvasView.setPaintColor(Color.GREEN);    // (3)
    }

    /**
     * 「青」ボタン・クリック
     * @param v
     */
    public void onBlueButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onBlueButtonClick() - [%s]", v.toString()));
        canvasView.setPaintColor(Color.BLUE);    // (4)
    }

    /**
     * 「クリア」ボタン・クリック
     * @param v
     */
    public void onWipeButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onWipeButtonClick() - [%s]", v.toString()));
        canvasView.wipe();    // (5)
    }

    /**
     * 「太線」ボタン・クリック
     * @param v
     */
    public void onHeavyButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onHeavyButtonClick() - [%s]", v.toString()));
        canvasView.setStrokeWidth(CanvasView.HEAVY);    // (6)
    }

    /**
     * 「細線」ボタン・クリック
     * @param v
     */
    public void onThinButtonClick(View v) {
        Log.d("TEST", String.format(
                "PaintPotActivity.onThinButtonClick() - [%s]", v.toString()));
        canvasView.setStrokeWidth(CanvasView.THIN);    // (7)
    }
}
---

(1) カスタムビューのオブジェクト

ボタンをクリックしたときに、色を変えたり、線の太さを変えたりするために持っている。

    private CanvasView canvasView;    // (1)


(2)-(7) カスタムビューの属性設定 

それぞれ、ボタンをクリックしたときに行う処理。

    canvasView.setPaintColor(Color.RED);    // (2)
    canvasView.setPaintColor(Color.GREEN);    // (3)
    canvasView.setPaintColor(Color.BLUE);    // (4)
    canvasView.wipe();    // (5)
    canvasView.setStrokeWidth(CanvasView.HEAVY);    // (6)
    canvasView.setStrokeWidth(CanvasView.THIN);    // (7)


■ カスタム・ビュー

描画のキャンパスになっているカスタム・ビューのクラス。
丸や線のデータをリストで保持している。

□ CanvasView.java
---
package jp.marunomaruno.android.paintpot;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.ImageView;

/**
 * AppInventor のサンプル PaintPot の Java 版。 
 * 丸を打つ、線を引くキャンバス。
 * @author marunomaruno
 * @version 1.0, 2011-12-25
 */
public class CanvasView extends ImageView {
    public static final float HEAVY = 15F;    // 太い    // (1)
    public static final float THIN = 5F;    // 細い    // (2)

    private Paint paint;

    private List<PointWithPaint> dots; // ドット用    // (3)
    private List<PathWithPaint> lines; // 軌跡用    // (4)

    public CanvasView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    public CanvasView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public CanvasView(Context context) {
        super(context);
        init(context);
    }

    /**
     * 初期化する。
     * @param context
     */
    private void init(Context context) {
        paint = new Paint();
        paint.setStrokeWidth(THIN);
        paint.setAntiAlias(true);

        wipe();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 丸を描画する
        for (PointWithPaint point : dots) {
            Log.v("TEST", "dot = " + point.toString());
            canvas.drawCircle(point.x, point.y, point.paint.getStrokeWidth(),
                    point.paint);
        }

        // 線を描画する
        for (PathWithPaint line : lines) {
            Log.v("TEST", "line = " + line.toString());
            canvas.drawPath(line.path, line.paint);
        }

    }

    // onTouchEvent() だけで使用
    private int prevAction = -1; // 直前のアクション    // (5)
    private Path path = null; // パス    // (6)

    /*
     * (non-Javadoc)
     * @see android.view.View.OnTouchListener#onTouch(android.view.View,
     * android.view.MotionEvent)
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.d("TEST", String.format(
                "CanvasTouchlistener.onTouch() - action = [%d]", event
                        .getAction()));

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:    // (7)
            path = new Path();
            path.moveTo(event.getX(), event.getY());
            break;

        case MotionEvent.ACTION_UP:    // (8)
            if (prevAction == MotionEvent.ACTION_DOWN) {    // (9)
                dots.add(new PointWithPaint(event.getX(), event.getY(), paint));
            }

            lines.add(new PathWithPaint(path, paint));
            invalidate();

            break;

        case MotionEvent.ACTION_MOVE:    // (10)
            path.lineTo(event.getX(), event.getY());

            break;

        default:
            assert true; // 何もしない
            break;

        }

        prevAction = event.getAction();    // (11)

        return true;    // (12)
    }

    /**
     * 指定された色に設定する。
     * @param color 色
     */
    public void setPaintColor(int color) {
        paint.setColor(color);
    }

    /**
     * 指定された線の幅にする。
     * @param width 幅
     */
    public void setStrokeWidth(float width) {
        paint.setStrokeWidth(width);
    }

    /**
     * 描画したものをきれいにする。
     */
    public void wipe() {
        dots = new ArrayList<PointWithPaint>();
        lines = new ArrayList<PathWithPaint>();
        invalidate();
    }
}
---

(1)(2) 線の太さをあらわす定数

    public static final float HEAVY = 15F;    // 太い    // (1)
    public static final float THIN = 5F;    // 細い    // (2)


(3)(4) 軌跡の保持


    private List<PointWithPaint> dots; // ドット用    // (3)
    private List<PathWithPaint> lines; // 折れ線用    // (4)


(5)(6) onTouchEvent() だけで使用するインスタンス変数

ACTION_UP したときにサークルを描くと、ドラッグしているときに描いた折れ線の最後に
サークルが描かれるので、前回のアクションを保持しておくための変数。

    private int prevAction = -1; // 直前のアクション    // (5)


1回の移動で描かれる折れ線を保持する。

    private Path path = null; // パス    // (6)


(7) タッチしたとき

タッチしたときは、新しい折れ線のオブジェクトを生成して、そこをスタート地点にする。

    case MotionEvent.ACTION_DOWN:    // (7)
        path = new Path();
        path.moveTo(event.getX(), event.getY());
        break;


(8)(9) 指が離れたとき

指が離れたときは、その座標を折れ線の最後にする。
また、タッチして、その座標で指を離せば、そこにサークルを描く。

    case MotionEvent.ACTION_UP:    // (8)
        if (prevAction == MotionEvent.ACTION_DOWN) {    // (9)
            dots.add(new PointWithPaint(event.getX(), event.getY(), paint));
        }

        lines.add(new PathWithPaint(path, paint));
        invalidate();


(10) 指を動かしているとき

指を動かしているときは、その座標を折れ線の点とする。

    case MotionEvent.ACTION_MOVE:    // (10)
        path.lineTo(event.getX(), event.getY());


(11) 前回のアクションを保持

    prevAction = event.getAction();    // (11)


(12) アクションは処理済とする

    return true;    // (12)

この返り値が false のままだと、未処理となるので、つぎのイベントを拾えない。
今回は、MotionEvent を拾うハンドラーは、このメソッドなので、true にしておく。


■ データ

描画するデータを保持するクラス。
今回は、色と線の太さも保持しないといけないので、
タッチされた座標と Paint オブジェクトのペアを持つクラス PointWithPaint 
と、
移動した座標群と Paint オブジェクトのペアを持つクラス PathWithPaint 
の 2 つのクラスを作る。


□ PointWithPaint.java
---
package jp.marunomaruno.android.paintpot;

import android.graphics.Paint;
import android.graphics.PointF;

/**
 * AppInventor のサンプル PaintPot の Java 版。 
 * Paintオブジェクトつきの点
 * @author marunomaruno
 * @version 1.0, 2011-12-25
 */
public class PointWithPaint {
    float x;
    float y;
    Paint paint;

    public PointWithPaint(float x, float y, Paint paint) {
        this.x = x;
        this.y = y;
        this.paint = new Paint(paint); // (1)
        this.paint.setStyle(Paint.Style.FILL); // 塗りつぶす // (2)
    }

    public PointWithPaint(PointF point, Paint paint) {
        this(point.x, point.y, paint);
    }

    @Override
    public String toString() {
        return String.format("[%.1f, %.1f, %.1f, %x]", x, y, paint
                .getStrokeWidth(), paint.getColor());
    }
}
---

(1)(2) あたらしいペイント・オブジェクトを生成

あたらしいペイント・オブジェクトとして保持する必要がある。そうでないと、最後に設
定したペイント・オブジェクトの値が描画時に採用されることになる。

    this.paint = new Paint(paint); // (1)

また、円を描くので、ここでは、塗りつぶしのスタイルにする。

    this.paint.setStyle(Paint.Style.FILL); // 塗りつぶす // (2)


□PathWithPaint.java
---
package jp.marunomaruno.android.paintpot;

import android.graphics.Paint;
import android.graphics.Path;

/**
 * AppInventor のサンプル PaintPot の Java 版。 
 * Paintオブジェクトつきの折れ線。
 * @author marunomaruno
 * @version 1.0, 2011-12-25
 */
public class PathWithPaint {
    Path path;
    Paint paint;

    public PathWithPaint(Path path, Paint paint) {
        super();
        this.path = path;
        this.paint = new Paint(paint);    // (1)
        this.paint.setStyle(Paint.Style.STROKE); // 輪郭のみ    // (2)
    }

    @Override
    public String toString() {
        return String.format("[%s, %.1f, %x]", getPathString(), paint
                .getStrokeWidth(), paint.getColor());
    }

    private String getPathString() {
        return path.toString();
    }

}
---

(1)(2) あたらしいペイント・オブジェクトを生成

あたらしいペイント・オブジェクトとして保持する必要がある。そうでないと、最後に設
定したペイント・オブジェクトの値が描画時に採用されることになる。

    this.paint = new Paint(paint); // (1)

また、折れ線を描くので、ここでは、輪郭のみのスタイルにする。

    this.paint.setStyle(Paint.Style.STROKE); // 輪郭のみ    // (2)


■ レイアウト

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/redButton"
            android:onClick="onRedButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/redButton" />

        <Button
            android:id="@+id/greenButton"
            android:onClick="onGreenButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/greenButton" />

        <Button
            android:id="@+id/blueButton"
            android:onClick="onBlueButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/blueButton" />

    </LinearLayout>

    <jp.marunomaruno.android.paintpot.CanvasView
        android:id="@+id/canvasView"
        android:layout_width="fill_parent"
        android:layout_height="300px"
        android:scaleType="fitXY"
        android:src="@drawable/kitty" />    <!-- (1) -->

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/wipeButton"
            android:onClick="onWipeButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/wipeButton" />

        <Button
            android:id="@+id/heavyButton"
            android:onClick="onHeavyButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heavyButton" />

        <Button
            android:id="@+id/thinButton"
            android:onClick="onThinButtonClick"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/thinButton" />

    </LinearLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />


</LinearLayout>
---

(1) カスタムビュー

要素名に、カスタム・ビューの完全修飾名をしていするだけでよい。

    <jp.marunomaruno.android.paintpot.CanvasView
        android:id="@+id/canvasView"
        android:layout_width="fill_parent"
        android:layout_height="300px"
        android:scaleType="fitXY"
        android:src="@drawable/kitty" />    <!-- (1) -->

ここで、指定された大きさ (layout_width と layout_height) に対して、画像を自動的
にその大きさに拡大・縮小して表示する属性を指定しておきます。
        android:scaleType="fitXY"

値は以下のものが指定できる。

------------- ----------------------- -------- ----------
値            説明                    リサイズ 縦横比維持
------------- ----------------------- -------- ----------
matrix        描画時に Matrix を使用     O         X
fitXY         表示領域の大きさにする     O         X
fitStart      左上端寄せ                 O         O
fitCenter     中央寄せ                   O         O
fitEnd        右下端寄せ                 O         O
center        中央寄せ(リサイズなし)     X         -
centerCrop    中央寄せ(余白含める)       O         O
centerInside  中央寄せ(余白含めない)     O         O
------------- ----------------------- -------- ----------


■ 文字列

□ res/values/strings.xml
---
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, PaintPotActivity!</string>
    <string name="app_name">PaintPot</string>
    <string name="redButton">赤</string>
    <string name="greenButton">緑</string>
    <string name="blueButton">青</string>
    <string name="wipeButton">クリア</string>
    <string name="heavyButton">太線</string>
    <string name="thinButton">細線</string>
</resources>
---