Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Androidでお絵かきアプリ

More than 5 years have passed since last update.

単純なお絵かきアプリを作りました。
Screenshot_2014-09-05-23-42-44.png

ソースは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();
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away