タッチ/フリックのジェスチャーを実装する方法 | Androidアプリ開発

Androidアプリ開発において、タッチ/フリックのジェスチャーを実装する方法を紹介します。

なお、ピンチジェスチャー(二本指を広げたりするジェスチャー)の実装方法やタッチ/フリックジェスチャーとピンチジェスチャーを同時実装する方法は以下の記事を御覧ください。

タッチ/フリックのジェスチャーを実装する方法

タッチ/フリックのジェスチャーを実装するにはActivityにGestureDetector.OnGestureListenerを実装し、各種ジェスチャーに対応したメソッドをoverrideします。

以下、サンプルコードです。

public class GestureTestActivity extends AppCompatActivity implements GestureDetector.OnGestureListener {
    GestureDetectorCompat mGestureDetector;

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

        mGestureDetector = new GestureDetectorCompat(this, this);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }

    @Override
    public boolean onDown(MotionEvent motionEvent) {
        //タップ時(タップした瞬間)
        Log.d("MY_LOG_TAG", "onDown");
        return true;
    }

    @Override
    public void onShowPress(MotionEvent motionEvent) {
        //タップ時(すこしの間タップした場合)
        Log.d("MY_LOG_TAG", "onShowPress");
    }

    @Override
    public boolean onSingleTapUp(MotionEvent motionEvent) {
        //タップしてすぐに離したとき
        Log.d("MY_LOG_TAG", "onSingleTapUp");
        return true;
    }

    @Override
    public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
        //スクロール中
        Log.d("MY_LOG_TAG", "onScroll");
        return true;
    }

    @Override
    public void onLongPress(MotionEvent motionEvent) {
        //ロングタップ時
        Log.d("MY_LOG_TAG", "onLongPress");
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float v, float v1) {
        //フリック後
        Log.d("MY_LOG_TAG", "onFling");

        double DiffX = e2.getX() - e1.getX();
        double DiffY = e2.getY() - e1.getY();
        double theta = Math.atan(DiffY / DiffX) / Math.PI * 180.0;

        if(theta > -45 && theta < 45) {
            if(DiffX < 0) {
                //Right flick
            } else {
                //Left flick
            }
        } else {
            if (DiffY < 0) {
                //Up flick
            } else {
                //Down flick
            }
        }

        return true;
    }
}

サンプルコードの解説

サンプルコードを解説していきます。

ジェスチャーオブジェクトを取得する。

まずはジェスチャーオブジェクトを取得します。

    GestureDetectorCompat mGestureDetector;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gesture_test);
 
        mGestureDetector = new GestureDetectorCompat(this, this);
    }

ジェスチャーオブジェクトへタッチイベントを渡す

さきほど取得したジェスチャーオブジェクトに対してタッチイベントを渡してあげます。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }

各種ジェスチャーの動作を定義する(フリック以外)

この後は各種ジェスチャーの動作を定義するだけです。

たとえば以下はonDownというタップ時のゲスチャー動作のコールバックメソッドです。

    @Override
    public boolean onDown(MotionEvent motionEvent) {
        //タップ時(タップした瞬間)
        Log.d("MY_LOG_TAG", "onDown");
        return true;
    }

フリックジェスチャーの動作を定義する

フリックジェスチャーの動作の定義は以下のように実装します。

    @Override
    public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
        //フリック後
        Log.d("MY_LOG_TAG", "onFling");
 
        double DiffX = e2.getX() - e1.getX();
        double DiffY = e2.getY() - e1.getY();
        double theta = Math.atan(DiffY / DiffX) / Math.PI * 180.0;
 
        if(theta > -45 && theta < 45) {
            if(DiffX < 0) {
                //Right flick
            } else {
                //Left flick
            }
        } else {
            if (DiffY < 0) {
                //Up flick
            } else {
                //Down flick
            }
        }
 
        return true;
    }

コードを見ればわかりますが、DownFlickのような直接的なフリックコールバックメソッドは用意されていません。よって、フリックがどの向きに判定をしてやる必要があります。そのコードが上記です(e1=移動元、e2=移動先で向きを判定しています)。

まとめ

Androidアプリ開発において、タッチ/フリックのジェスチャーを実装する方法を紹介しました。

なお、ピンチジェスチャー(二本指を広げたりするジェスチャー)の実装方法やタッチ/フリックジェスチャーとピンチジェスチャーを同時実装する方法は以下の記事を御覧ください。