วิธีตรวจจับทิศทางการสไวป ซ้าย/ขวา และ บน/ล่าง ใน Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการตรวจจับทิศทางการสไวป (Swipe) 4 ทิศทาง: ซ้าย, ขวา, บน, ล่าง ใน Android โดยใช้ GestureDetector และ Kotlin

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Swipe to Detect swipe Event"
        android:textAlignment="center"
        android:textColor="@android:color/holo_purple"
        android:textSize="24sp"
        android:textStyle="bold" />
</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.kt

ใช้ GestureDetector.SimpleOnGestureListener เพื่อจัดการเหตุการณ์สไวป:

import android.content.Context
import android.os.Bundle
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlin.math.abs

class MainActivity : AppCompatActivity() {
    private var onSwipeTouchListener: OnSwipeTouchListener? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        onSwipeTouchListener = OnSwipeTouchListener(this, findViewById(R.id.relativeLayout))
    }

    inner class OnSwipeTouchListener internal constructor(
        ctx: Context, mainView: View
    ) : View.OnTouchListener {

        private val gestureDetector: GestureDetector
        private var context: Context
        private lateinit var onSwipe: OnSwipeListener

        companion object {
            private const val SWIPE_THRESHOLD = 100
            private const val SWIPE_VELOCITY_THRESHOLD = 100
        }

        init {
            gestureDetector = GestureDetector(ctx, GestureListener())
            mainView.setOnTouchListener(this)
            context = ctx
        }

        override fun onTouch(v: View, event: MotionEvent): Boolean {
            return gestureDetector.onTouchEvent(event)
        }

        inner class GestureListener : GestureDetector.SimpleOnGestureListener() {
            override fun onDown(e: MotionEvent): Boolean = true

            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                var result = false
                try {
                    val diffY = e2.y - e1.y
                    val diffX = e2.x - e1.x

                    if (abs(diffX) > abs(diffY)) {
                        // สไวปแนวนอน
                        if (abs(diffX) > SWIPE_THRESHOLD && abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                            if (diffX > 0) onSwipeRight() else onSwipeLeft()
                            result = true
                        }
                    } else {
                        // สไวปแนวตั้ง
                        if (abs(diffY) > SWIPE_THRESHOLD && abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                            if (diffY > 0) onSwipeBottom() else onSwipeTop()
                            result = true
                        }
                    }
                } catch (e: Exception) {
                    e.printStackTrace()
                }
                return result
            }
        }

        internal fun onSwipeRight() {
            Toast.makeText(context, "Swiped Right", Toast.LENGTH_SHORT).show()
            onSwipe.swipeRight()
        }

        internal fun onSwipeLeft() {
            Toast.makeText(context, "Swiped Left", Toast.LENGTH_SHORT).show()
            onSwipe.swipeLeft()
        }

        internal fun onSwipeTop() {
            Toast.makeText(context, "Swiped Up", Toast.LENGTH_SHORT).show()
            onSwipe.swipeTop()
        }

        internal fun onSwipeBottom() {
            Toast.makeText(context, "Swiped Down", Toast.LENGTH_SHORT).show()
            onSwipe.swipeBottom()
        }

        internal interface OnSwipeListener {
            fun swipeRight()
            fun swipeTop()
            fun swipeBottom()
            fun swipeLeft()
        }
    }
}

ขั้นตอนที่ 4: ตั้งค่า AndroidManifest.xml

ใช้การตั้งค่ามาตรฐาน (ไม่ต้องเพิ่มสิทธิ์พิเศษ)

ทดสอบการทำงาน

รันแอปบนอุปกรณ์จริง ลองสไวปหน้าจอทิศทางต่างๆ จะเห็นข้อความ Toast แสดงทิศทางที่สไวป