Androidで指の動きに沿って滑らかな線を描く方法を解説

はじめに

この記事では、Androidアプリで画面をタッチし、指の動きに沿って線を描画する方法を解説します。Bitmap・Canvas・Paintという3つのグラフィックスクラスを組み合わせることで、お絵かきアプリのような機能を比較的簡単に実装できます。

ステップ1：新規プロジェクトを作成する

Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成しましょう。

ステップ2：レイアウトファイルを編集する

res/layout/activity_main.xml に以下のコードを追加します。ここでは、描画結果を表示するためのImageViewを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher_foreground" />
</RelativeLayout>

ステップ3：MainActivity.javaを実装する

src/MainActivity.java に以下のコードを記述します。画面サイズと同じBitmapを作成してCanvasにセットし、タッチの開始地点と終了地点を取得。指を離したタイミングで2点を結ぶ線を描画する仕組みです。

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
    ImageView imageView;
    Bitmap bitmap;
    Canvas canvas;
    Paint paint;
    float downX = 0, downY = 0, upX = 0, upY = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = this.findViewById(R.id.imageView);
        Display currentDisplay = getWindowManager().getDefaultDisplay();
        float dw = currentDisplay.getWidth();
        float dh = currentDisplay.getHeight();
        bitmap = Bitmap.createBitmap((int) dw, (int) dh,
        Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmap);
        paint = new Paint();
        paint.setColor(Color.BLACK);
        imageView.setImageBitmap(bitmap);
        imageView.setOnTouchListener(this);
    }

    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                upX = event.getX();
                upY = event.getY();
                canvas.drawLine(downX, downY, upX, upY, paint);
                imageView.invalidate();
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
            default:
                break;
        }
        return true;
    }
}

ステップ4：AndroidManifest.xmlを確認する

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>
</manifest>

アプリを実行してみよう

それではアプリを実行してみましょう。実機のAndroid端末をPCに接続した状態で、Android Studioでプロジェクトのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。実行デバイスとして自分のスマートフォンを選択すると、端末に以下のような画面が表示されます。

より滑らかな線を描くためのポイント

上記のサンプルコードでは、指を画面から離した瞬間（ACTION_UP）に、押し始めた地点から離した地点までの直線を1本描画する仕組みになっています。

指の動きにリアルタイムで追従させたい場合は、ACTION_MOVE イベントが発生するたびに「前回の座標から現在の座標へ」線を引き続ける方法が有効です。さらに、Pathクラスの quadTo() を使えば、各点を滑らかに結ぶ曲線を描くこともできます。お絵かきアプリや署名入力機能などを実装したい場合は、ぜひ試してみてください。