KotlinでAndroidアプリにフリングジェスチャ検出を実装する方法

KotlinでAndroidアプリにフリングジェスチャ検出を実装する方法

このチュートリアルでは、Kotlinを使用してAndroidアプリでフリング(fling)ジェスチャの検出を機能させる方法を、ステップごとにわかりやすく解説します。フリングジェスチャとは、指を画面上で素早く弾くように動かす操作のことで、リストの高速スクロールやページの切り替えなど、さまざまな場面で活用されています。

ステップ1: 新しいプロジェクトを作成する

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

ステップ2: レイアウトファイル(activity_main.xml)を編集する

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

<?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"
    android:padding="4dp"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Fling Gesture"
        android:textColor="@color/colorAccent"
        android:textSize="24sp"
        android:textStyle="bold" />
</RelativeLayout>

ステップ3: MainActivity.ktにコードを追加する

src/MainActivity.ktに以下のコードを追加します。ポイントは、ActivityにGestureDetector.OnGestureListenerインターフェースを実装し、onTouchEvent()でタッチイベントをGestureDetectorに委譲することです。そして、onFling()メソッド内でフリングジェスチャを検出した際にToastを表示します。

import android.os.Bundle
import android.view.GestureDetector
import android.view.MotionEvent
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity(), GestureDetector.OnGestureListener {
    lateinit var gestureDetector: GestureDetector
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        gestureDetector = GestureDetector(this)
    }
    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (gestureDetector.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }
    override fun onDown(p0: MotionEvent?): Boolean {
        return false
    }
    override fun onShowPress(p0: MotionEvent?) {
        return
    }
    override fun onSingleTapUp(p0: MotionEvent?): Boolean {
        return false
    }
    override fun onScroll(p0: MotionEvent?, p1: MotionEvent?, p2: Float, p3: Float): Boolean {
        return false
    }
    override fun onLongPress(p0: MotionEvent?) {
        return
    }
    override fun onFling(p0: MotionEvent?, p1: MotionEvent?, p2: Float, p3: Float): Boolean {
        Toast.makeText(applicationContext, "Fling Gesture", Toast.LENGTH_SHORT).show()
        return true
    }
}

onFling()メソッドは、フリング操作が検出されたときに呼び出されます。引数には操作の開始地点・終了地点のMotionEventと、X方向・Y方向の速度(velocityX / velocityY)が渡されるため、スワイプの速さに応じた処理を実装することも可能です。

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

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
    <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端末がパソコンに接続されているものとします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーにある実行(Run)アイコンをクリックします。表示された候補から接続済みのモバイルデバイスを選択すると、端末の画面にアプリが起動します。

画面上で指を素早く弾くようにスワイプすると、「Fling Gesture」というToastメッセージが表示され、フリングジェスチャが正しく検出されていることを確認できます。