Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธาจัดการเจสเจอร์สไวปซ้าย-ขวา ใน Android

การจัดการเจสเจอร์สไวปซ้าย-ขวา (Left/Right Swipe Gesture) ใน Android

ตัวอย่างนี้สาธิตการสร้างคลาส OnSwipeTouchListener แบบ Reusable เพื่อตรวจจับการสไวปซ้ายและขวา (รวมถึงบน/ล่าง) โดยใช้ GestureDetector

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

ไปที่ File → New Project ใน Android Studio

ขั้นตอนที่ 2: 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"
    android:id="@+id/relativeLayout"
    tools:context=".MainActivity">
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:textAlignment="center" android:layout_centerInParent="true"
        android:textSize="16sp" android:textStyle="bold"
        android:text="Swipe Left to right and Right to Left to detect Swipe Gesture" />
</RelativeLayout>

ขั้นตอนที่ 3: โค้ดหลัก (MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    RelativeLayout layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layout = findViewById(R.id.relativeLayout);
        layout.setOnTouchListener(new OnSwipeTouchListener(MainActivity.this) {
            @Override
            public void onSwipeLeft() {
                super.onSwipeLeft();
                Toast.makeText(MainActivity.this, "Swipe Left gesture detected", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onSwipeRight() {
                super.onSwipeRight();
                Toast.makeText(MainActivity.this, "Swipe Right gesture detected", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ขั้นตอนที่ 4: คลาส OnSwipeTouchListener.java (Reusable)

import android.content.Context;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

class OnSwipeTouchListener implements View.OnTouchListener {
    private GestureDetector gestureDetector;

    OnSwipeTouchListener(Context c) {
        gestureDetector = new GestureDetector(c, new GestureListener());
    }

    public boolean onTouch(final View view, final MotionEvent motionEvent) {
        return gestureDetector.onTouchEvent(motionEvent);
    }

    private final class GestureListener extends GestureDetector.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 onSingleTapUp(MotionEvent e) {
            onClick();
            return super.onSingleTapUp(e);
        }

        @Override
        public boolean onDoubleTap(MotionEvent e) {
            onDoubleClick();
            return super.onDoubleTap(e);
        }

        @Override
        public void onLongPress(MotionEvent e) {
            onLongClick();
            super.onLongPress(e);
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            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(); }
                    }
                } else {
                    if (Math.abs(diffY) > SWIPE_THRESHOLD && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffY > 0) { onSwipeDown(); }
                        else { onSwipeUp(); }
                    }
                }
            } catch (Exception exception) { exception.printStackTrace(); }
            return false;
        }
    }

    // Override เมธอดเหล่านี้ใน Activity ที่ใช้
    public void onSwipeRight() {}
    public void onSwipeLeft() {}
    private void onSwipeUp() {}
    private void onSwipeDown() {}
    private void onClick() {}
    private void onDoubleClick() {}
    private void onLongClick() {}
}

ขั้นตอนที่ 5: 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>

💡 การนำไปใช้กับ RecyclerView (Item Swipe)

สำหรับการสไวปรายการใน RecyclerView ควรใช้ ItemTouchHelper แทน:

ItemTouchHelper.SimpleCallback callback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {
    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull ViewHolder viewHolder, @NonNull ViewHolder target) {
        return false;
    }

    @Override
    public void onSwiped(@NonNull ViewHolder viewHolder, int direction) {
        int position = viewHolder.getAdapterPosition();
        if (direction == ItemTouchHelper.LEFT) {
            // สไวปซ้าย - ลบ/เก็บถาวร
        } else {
            // สไวปขวา - ยกเลิก/ดูรายละเอียด
        }
        adapter.notifyItemRemoved(position);
    }
};
new ItemTouchHelper(callback).attachToRecyclerView(recyclerView);

การทดสอบ

รันแอป สไวปซ้าย/ขวาบนหน้าจอ จะแสดง Toast แจ้งทิศทางที่สไวป