Androidでお絵かきアプリ

単純なお絵かきアプリを作りました。

ソースはGitHubに置いてあります。

このアプリは、画面全体をお絵かきできるViewにするのではなく、一部をViewにし、下部にボタンを配置しています。
そのため、DrawingViewクラスのインスタンスをActivityのsetContentView()に渡すのではなく、DrawingViewクラスをLayoutで設定し、それをsetContentView()に渡しています。

ActivityからDrawingViewクラスのメソッドにアクセスしたい場合は、findViewByIdでLayoutからオブジェクトを引っ張り、それをインスタンスに代入し、そのインスタンスに対してメソッドを実行します。

これにより、Layoutに配置したボタンからDrawingViewを操作し、お絵かきの消去をしています。

以下はActivityです。
deleteボタンがクリックされたら、deleteDrawingが呼ばれるようにしています。

MainActivity.java

package com.general5.drawingapp;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;


public class MainActivity extends ActionBarActivity {
    private DrawingView drawingView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        this.drawingView = (DrawingView)findViewById(R.id.drawing_view);

        findViewById(R.id.delete_button).setOnClickListener(deleteDrawing);
    }

    View.OnClickListener deleteDrawing = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            drawingView.delete();
        }
    };
}

以下はLayoutのxmlです。
viewを配置し、classでDrawingViewを設定しています。
deleteボタンを最下部に配置し、それより上部をViewにしています。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <view
        android:id="@+id/drawing_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.general5.drawingapp.DrawingView"
        android:layout_above="@+id/delete_button"/>

    <Button
        android:id="@+id/delete_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="delete" />

</RelativeLayout>

以下はDrawingViewクラスです。
Viewクラスを継承しています。
Layoutから呼び出すので、コンストラクタはDrawingView(Context context, AttributeSet attrs)が実行されます。

View部分がタップされたらonTouchEvent()が呼ばれます。
そこでタップされた位置よりpathを設定しています。
その後、invalidate()で再描画します。

deleteボタンが押されたら、delete() が呼ばれ、pathをリセットします。

DrawingView.java

package com.general5.drawingapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;


public class DrawingView extends View {
    private Paint paint;
    private Path path;

    public DrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);

        this.path = new Path();

        this.paint = new Paint();
        paint.setColor(Color.RED);
        this.paint.setStyle(Paint.Style.STROKE);
        this.paint.setAntiAlias(true);
        this.paint.setStrokeWidth(10);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            this.path.moveTo(x, y);
            break;
        case MotionEvent.ACTION_MOVE:
            this.path.lineTo(x, y);
            break;
        case MotionEvent.ACTION_UP:
            this.path.lineTo(x, y);
            break;
        }
        invalidate();
        return true;
    }

    public void delete() {
        this.path.reset();
        invalidate();
    }
}