Swipe: यह क्या है, मोबाइल डेवलपमेंट में स्वाइप हैंडलिंग

स्वाइप क्या है?

स्वाइप स्क्रीन की सतह पर उंगली की तेज़ स्लाइडिंग गति है जो उठाने पर समाप्त होती है। स्वाइप छोटा (किसी तत्व को फ़्लिप करना) या लंबा (पर्दा खोलना) हो सकता है, लेकिन मुख्य विशेषता डिस्क्रीटनेस है: सिस्टम इसे एकल घटना के रूप में पहचानता है, न कि निरंतर निर्देशांक अनुक्रम के रूप में।

मोबाइल OS तीन मापदंडों के आधार पर स्वाइप का पता लगाते हैं: न्यूनतम दूरी (सीमा), न्यूनतम गति (velocity), और दिशा। यदि उंगली धीमी गति से चलती है या दूरी अपर्याप्त है, तो सिस्टम जेस्चर को पैनिंग या टैप के रूप में व्याख्यायित करता है। प्लेटफ़ॉर्म के बीच सीमा मान भिन्न होते हैं: iOS निश्चित सीमा के साथ UISwipeGestureRecognizer में एक स्थिरांक का उपयोग करता है, Android ViewConfiguration.getScaledTouchSlop() का उपयोग करता है, जो स्क्रीन घनत्व के आधार पर ~8–16 dp लौटाता है।

Android Developers Documentation के अनुसार, GestureDetector में onFling (स्वाइप) 100 px/s से अधिक गति और 50px से दूरी पर सक्रिय होता है। IT Sectr में, हम नेविगेशन (गैलरी, कार्ड इंटरफ़ेस, ऑनबोर्डिंग) के लिए स्वाइप का उपयोग करते हैं — यह जेस्चर सभी उम्र के उपयोगकर्ताओं के लिए सहज है।

स्वाइप बनाम पैनिंग: क्या अंतर है?

स्वाइप और पैनिंग (pan/drag) अलग-अलग प्रकार के जेस्चर हैं, हालाँकि दोनों में स्क्रीन पर उंगली घुमाना शामिल है। स्वाइप डिस्क्रीट है और इसका अर्थ है "एक क्रिया करना," जबकि पैनिंग निरंतर है और इसका अर्थ है "किसी वस्तु को तब तक घुमाना जब तक उंगली स्क्रीन पर है।"

स्वाइप और पैनिंग के बीच चुनाव कार्य पर निर्भर करता है। किसी तत्व पर क्रियाओं (हटाना, संग्रहित करना, मेनू खोलना) के लिए स्वाइप का उपयोग करें। प्रत्यक्ष हेरफेर (घुमाना, स्केल करना) के लिए पैनिंग का उपयोग करें। एक ही तत्व पर जेस्चर मिलाने के लिए require(toFail:) या कस्टम लॉजिक की आवश्यकता होती है।

iOS में स्वाइप: UISwipeGestureRecognizer

UISwipeGestureRecognizer UIGestureRecognizer का एक उपवर्ग है जो चार दिशाओं में से एक में डिस्क्रीट स्वाइप को पहचानता है। UIPanGestureRecognizer के विपरीत, यह मध्यवर्ती .changed घटनाएँ उत्पन्न नहीं करता: पहचाने जाने पर, क्रिया ठीक एक बार कॉल की जाती है।

direction प्रॉपर्टी (UISwipeGestureRecognizer.Direction) ट्रैक की गई दिशा निर्धारित करती है — .left, .right, .up, .down। मास्क के माध्यम से दिशाओं को जोड़ा जा सकता है: क्षैतिज स्वाइप के लिए [.left, .right]। numberOfTouchesRequired प्रॉपर्टी उंगलियों की संख्या निर्धारित करती है — डिफ़ॉल्ट रूप से 1। UISwipeGestureRecognizer में कॉन्फ़िगरेबल दूरी सीमा नहीं है — iOS लगभग 20px का अंतर्निहित मान उपयोग करता है, जो विश्वसनीय पहचान के लिए पर्याप्त है।

चूँकि UISwipeGestureRecognizer एक डिस्क्रीट रिकॉग्नाइज़र है, यह UIPanGestureRecognizer के साथ संघर्ष नहीं करता: धीमी गति pan को ट्रिगर करती है, तेज़ गति swipe को। हालाँकि, एक ही व्यू पर UITapGestureRecognizer के साथ सह-अस्तित्व में, गलत टैप पहचान को रोकने के लिए require(toFail:) की आवश्यकता हो सकती है।

Android में स्वाइप: GestureDetector

Android में, स्वाइप पहचान के लिए प्राथमिक API GestureDetector है जिसमें OnGestureListener कॉलबैक है, विशेष रूप से onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) विधि। GestureDetector प्रारंभिक और अंतिम उंगली की स्थिति, अक्षों पर गति की गति और दूरी का विश्लेषण करता है, और सीमाएँ पार होने पर onFling को कॉल करता है।

न्यूनतम सीमाएँ ViewConfiguration के माध्यम से कॉन्फ़िगर की जाती हैं: VelocityTracker.getMinVelocity() (~100 px/s) और ViewConfiguration.getScaledTouchSlop() (~8–16 dp)। एक कस्टम OnSwipeTouchListener एक सामान्य पैटर्न है जो API को सरल बनाता है: डेवलपर को मैन्युअल रूप से दिशा और गति की गणना करने की आवश्यकता नहीं है। Android Support Library में अंतर्निहित "SwipeDetector" शामिल नहीं है, इसलिए कस्टम रैपर मानक समाधान है।

सूचियों में स्वाइप के लिए, Google RecyclerView से ItemTouchHelper.SimpleCallback का उपयोग करने की अनुशंसा करता है, जो जेस्चर डिटेक्शन, एनिमेशन और onSwiped() कॉलबैक को अब्स्ट्रैक्ट करता है। IT Sectr में, हम ViewPager2 और कार्ड इंटरफ़ेस के लिए कस्टम SwipeListener का उपयोग करते हैं — यह प्रदर्शन से समझौता किए बिना स्वाइप संवेदनशीलता पर नियंत्रण देता है।

सूचियों में स्वाइप: SwipeActions और ItemTouchHelper

सूचियों (UITableView, RecyclerView) के लिए, Apple और Google विशेष API प्रदान करते हैं जो मैन्युअल रूप से UISwipeGestureRecognizer जोड़ने को बदल देते हैं। ये API एक्शन बटन, कस्टम एनिमेशन और "स्वाइप टू डिलीट" जेस्चर का समर्थन करते हैं — मोबाइल ऐप्लिकेशन में मानक पैटर्न।

iOS (11+) में, UISwipeActionsConfiguration का उपयोग किया जाता है: tableView(_:leadingSwipeActionsConfigurationForRowAt:) विधि UIContextualAction की एक सरणी लौटाती है — शीर्षक, शैली (destructive, normal) और हैंडलर वाले बटन। उदाहरण के लिए, "हटाएँ" — लाल पृष्ठभूमि के साथ .destructive, "संग्रहित करें" — ग्रे पृष्ठभूमि के साथ .normal। सिस्टम बटनों की उपस्थिति को एनिमेट करता है और टैप के बाद completion ब्लॉक को कॉल करता है।

Android में, ItemTouchHelper.SimpleCallback को ItemTouchHelper.attachToRecyclerView() के माध्यम से RecyclerView से जोड़ा जाता है। पैरामीटर में दिशा फ़्लैग (start, end, up, down) और onSwiped(viewHolder, direction) कॉलबैक शामिल हैं। onSwiped के अंदर, एनिमेशन के साथ आइटम को हटाने के लिए adapter.notifyItemRemoved(position) कॉल किया जाता है। ItemTouchHelper स्वचालित रूप से जेस्चर, स्क्रॉल संघर्ष और आइटम वापसी को संभालता है यदि स्वाइप पूरा नहीं होता है। Google I/O 2024 के अनुसार, सूचियों में स्वाइप एक्शन वाले 70% Android ऐप्लिकेशन में ItemTouchHelper का उपयोग किया जाता है।

Swift और Kotlin में कोड उदाहरण

उदाहरण 1: iOS में बाएँ स्वाइप (Swift)

पिछली स्क्रीन पर लौटने के लिए व्यू में UISwipeGestureRecognizer जोड़ता है। कोड .left दिशा के साथ न्यूनतम रिकॉग्नाइज़र कॉन्फ़िगरेशन दिखाता है।

import UIKit

class CardViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipeLeft(_:))
        )
        swipeLeft.direction = .left
        swipeLeft.numberOfTouchesRequired = 1
        view.addGestureRecognizer(swipeLeft)
    }

    @objc private func handleSwipeLeft(_: UISwipeGestureRecognizer) {
        guard let nav = navigationController else { return }
        if nav.viewControllers.count > 1 {
            nav.popViewController(animated: true)
        } else {
            nav.dismiss(animated: true)
        }
    }
}

रिकॉग्नाइज़र कंट्रोलर के रूट-व्यू से जुड़ा होता है। navigationController.viewControllers.count जाँच सुनिश्चित करती है कि pop केवल तभी किया जाता है जब स्टैक में पिछली स्क्रीन हो। मोडल कंट्रोलर के लिए, dismiss का उपयोग किया जाता है। कोड को स्थिति जाँच की आवश्यकता नहीं है — UISwipeGestureRecognizer डिस्क्रीट है और केवल सफल पहचान पर क्रिया को कॉल करता है।

उदाहरण 2: Android में स्वाइप (Kotlin) कस्टम OnSwipeTouchListener के साथ

एक सरल GestureDetector रैपर लागू करता है जो स्वाइप दिशा निर्धारित करता है और onSwipeLeft/Right कॉलबैक कॉल करता है।

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

open class OnSwipeTouchListener(context: Context) : View.OnTouchListener {

    private val gestureDetector = GestureDetector(context, GestureListener())

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

    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {

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

        override fun onFling(
            e1: MotionEvent?,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
        ): Boolean {
            val diffX = e2.x - e1!!.x
            val diffY = e2.y - e1.y

            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()
                    return true
                }
            } else {
                if (Math.abs(diffY) > SWIPE_THRESHOLD
                    && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD
                ) {
                    if (diffY > 0) onSwipeDown()
                    else onSwipeUp()
                    return true
                }
            }
            return false
        }
    }

    open fun onSwipeLeft() {}
    open fun onSwipeRight() {}
    open fun onSwipeUp() {}
    open fun onSwipeDown() {}
}

OnSwipeTouchListener onFling को लागू करते हुए SimpleOnGestureListener का विस्तार करता है। diffX/diffY दिशा निर्धारित करते हैं, SWIPE_THRESHOLD (100px) और SWIPE_VELOCITY_THRESHOLD (100 px/s) सीमाएँ हैं। उपयोग: view.setOnTouchListener(OnSwipeTouchListener(context).apply { onSwipeLeft = { dismiss() } }).

उदाहरण 3: iOS में SwipeActions (UITableView)

टेबल सेल पर बाएँ स्वाइप करने पर हटाने का बटन जोड़ता है। मैन्युअल जेस्चर पहचान के बिना अंतर्निहित iOS 11+ API का उपयोग करता है।

func tableView(
    _ tableView: UITableView,
    trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(
        style: .destructive,
        title: "हटाएँ"
    ) { _, _, completionHandler in
        items.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
        completionHandler(true)
    }
    deleteAction.backgroundColor = .systemRed

    let config = UISwipeActionsConfiguration(actions: [deleteAction])
    config.performsFirstActionWithFullSwipe = true
    return config
}

विधि UIContextualAction की एक सरणी के साथ UISwipeActionsConfiguration लौटाती है। style: .destructive स्वचालित रूप से लाल पृष्ठभूमि निर्धारित करता है। performsFirstActionWithFullSwipe = true अतिरिक्त टैप के बिना पूर्ण स्वाइप के साथ क्रिया को निष्पादित करने की अनुमति देता है। IT Sectr में, हम सभी सूचियों के लिए इस API का उपयोग करते हैं — यह मानकीकृत है, VoiceOver का समर्थन करता है, और कस्टम GestureRecognizer की आवश्यकता नहीं है।