MADOCHAN BLOG

強いプログラマーを目指す30代のブログ



【Android Studio】描いて消すだけのお絵かきアプリの作成

Android Studioでお絵かきアプリを作成しました。

  1. 黒ペンでお絵かき
  2. 画面をリセット

というシンプルな機能だけついているものです。
保存機能もつけたかったんですが、こちらはおいおいという感じでとりあえずコードをまとめます。

参考サイト:Androidで簡単お絵かきアプリ開発 - Qiita

必要なアクティビティとxml

MainActivity.java:メインアクティビティ
PaintView.java:ペイント機能についてのアクティビティ
activity_main.xml:お絵かきする画面のxml

これらのファイルを用意したらまず、PaintViewをactivity_main.xmlへ配置しておきます。 set_content_view以外のviewをセットするとき、Paletteのviewを使用します。

ここでviewと検索し、

viewをドロップアンドドロップ。
キャンバスのサイズはとりあえずこれぐらいにしました(下記にxml有)
viewを選択してAttributesを見るとclassを指定できるところがあるので、そこにPaintViewを指定すればセット完了です。

MainActivity.java

MainActivityには画面をリセットするボタンのイベント内容を書きます。

package com.example.oekakiapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button resetButton;

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

        //リセットボタンで画面をリセットさせる
        resetButton = (Button) findViewById(R.id.resetButton);
        resetButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.resetButton:
                PaintView paintView = (PaintView) findViewById(R.id.view);
                paintView.clear(); //画面をクリアに
                break;
        }
    }
}

PaintView.java

お絵かきアプリのもととなるお絵かき・画面を白いキャンバスへ戻すを書いていきます。

package com.example.oekakiapp;

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

import java.util.ArrayList;

public class PaintView extends View {

    private Paint paint;
    private Path path;

    public PaintView(Context context) {
        super(context);
    }

    public PaintView(Context context, AttributeSet attrs) { //AttributeSetでAttributeにsetできるようにする
        super(context, attrs);

        //画面に線を書くためのPaintとPathを用意する
        paint = new Paint();
        path = new Path();

        //線の色や開始終了の形を決める
        paint.setColor(0xFF000000); //線の色を黒に
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND); //線のつなぎ目を丸く
        paint.setStrokeCap(Paint.Cap.ROUND); //線の端面を丸く
        paint.setStrokeWidth(10);
    }

    //線描画メソッド
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画面を描画するときに用意したpathとpaintを使用するようにする
        canvas.drawPath(path, paint);
    }

    //画面をTouchしたら描くようにする
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //Touchしたx座標とy座標を取得
        float x = event.getX();
        float y = event.getY();

        //各Touchイベントの種類ごとに動きを決める
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: //Touchしたとき
                path.moveTo(x, y);
                invalidate(); //OnDrawメソッドを呼び出している。OnDrawメソッドを呼び出すのはなぜかinvalidate()
                break;
            case MotionEvent.ACTION_MOVE: //Touchしたまま動かしたとき
            case MotionEvent.ACTION_UP: //Touchを離したとき
                path.lineTo(x, y);
                invalidate();
                break;
        }

        return true;

    }

    //描いた絵を削除するメソッド。resetButtonクリック時に呼ばれる
    public void clear() {
        path.reset();
        invalidate();
    }
}

activity_main.xml

ざっくりレイアウトです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_light"
    tools:context=".MainActivity">

    <view
        android:id="@+id/view"
        class="com.example.oekakiapp.PaintView"
        id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="#FFFFFF"
        app:layout_constraintBottom_toTopOf="@+id/resetButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/resetButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="16dp"
        android:text="@string/reset_button_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

プレビュー