Androidで右から左へのスワイプジェスチャを検出・処理する方法

はじめに

このチュートリアルでは、Androidアプリにおいて右から左へのスワイプジェスチャを検出して処理する方法を解説します。今回紹介する実装は汎用性が高く、上下左右どの方向のスワイプにも対応できる仕組みになっています。GestureDetector を活用したカスタムタッチリスナーを作成し、ステップごとにサンプルコードを見ながら進めていきましょう。

手順1：新しいプロジェクトを作成する

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

手順2：レイアウトファイル（activity_main.xml）を編集する

以下のコードを res/layout/activity_main.xml に記述します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:orientation = "vertical">
    <Button
        android:id = "@+id/swap"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop = "true"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "27dp"
        android:text = "Swap here"/>
</LinearLayout>

このレイアウトでは、スワイプ操作を受け付けるためのButtonビューを1つ画面中央に配置しています。

手順3：MainActivity.java を編集する

次に、以下のコードを src/MainActivity.java に記述します。

package com.example.myapplication;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.content.pm.ResolveInfo;
import android.content.res.Configuration;
import android.graphics.PixelFormat;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {
    private WindowManager windowManager;
    private ImageView chatHead;
    WindowManager.LayoutParams params;
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.swap).setOnTouchListener(new OnSwipeTouchListener(MainActivity.this) {
            public void onSwipeTop() {
                Toast.makeText(MainActivity.this, "top", Toast.LENGTH_SHORT).show();
            }
            public void onSwipeRight() {
                Toast.makeText(MainActivity.this, "right", Toast.LENGTH_SHORT).show();
            }
            public void onSwipeLeft() {
                Toast.makeText(MainActivity.this, "left", Toast.LENGTH_SHORT).show();
            }
            public void onSwipeBottom() {
                Toast.makeText(MainActivity.this, "bottom", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ここでは、setOnTouchListener() を使ってボタンにカスタムの OnSwipeTouchListener を設定しています。各方向のスワイプが検出されると、対応するコールバックメソッドが呼ばれ、Toastメッセージで方向が表示される仕組みです。

手順4：OnSwipeTouchListener.java を作成する

続いて、以下のコードを src/OnSwipeTouchListener.java として新規作成します。

package com.example.myapplication;
import android.content.Context;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class OnSwipeTouchListener implements OnTouchListener {
    private final GestureDetector gestureDetector;
    public OnSwipeTouchListener (Context ctx){
        gestureDetector = new GestureDetector(ctx, new GestureListener());
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
    }
    private final class GestureListener extends SimpleOnGestureListener {
        private static final int SWIPE_THRESHOLD = 100;
        private static final int SWIPE_VELOCITY_THRESHOLD = 100;
        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                        result = true;
                    }
                }
                else if (Math.abs(diffY) > SWIPE_THRESHOLD && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                    if (diffY > 0) {
                        onSwipeBottom();
                    } else {
                        onSwipeTop();
                    }
                    result = true;
                }
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }
    public void onSwipeRight() {
    }
    public void onSwipeLeft() {
    }
    public void onSwipeTop() {
    }
    public void onSwipeBottom() {
    }
}

スワイプ判定の仕組み

このクラスでは、GestureDetector.SimpleOnGestureListener の onFling() メソッドをオーバーライドしてスワイプを判定しています。ポイントは次の2つの閾値です。

• SWIPE_THRESHOLD（100）：スワイプと認識するために必要な最小移動距離
• SWIPE_VELOCITY_THRESHOLD（100）：フリングと認識するために必要な最小指の速さ

X軸方向の移動量がY軸方向より大きければ左右スワイプ、そうでなければ上下スワイプとして処理されます。さらに移動量の正負によって、onSwipeRight()／onSwipeLeft()／onSwipeTop()／onSwipeBottom() のいずれかが呼び出されます。これらの閾値を調整すれば、感度の良い・悪いスワイプ検出に自由にカスタマイズ可能です。

アプリを実行して確認する

それではアプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提に説明します。Android Studioから実行するには、プロジェクト内の任意のアクティビティファイルを開き、ツールバーの実行（Run）アイコンをクリックします。表示された選択肢から接続中のモバイルデバイスを選ぶと、端末にアプリの初期画面が表示されます。

次に、下図のようにボタン上で指をスワイプしてみてください。