जेस्चर नेविगेशन — यह कैसे काम करता है, प्रकार और कार्यान्वयन

जेस्चर नेविगेशन क्या है

जेस्चर नेविगेशन एक मोबाइल डिवाइस के साथ उपयोगकर्ता संपर्क की एक विधि है जो टच स्क्रीन द्वारा पहचाने जाने वाले स्पर्श, गति और दबाव के अनुक्रमों के माध्यम से काम करती है। पारंपरिक बटन के विपरीत, जेस्चर की स्क्रीन पर कोई निश्चित स्थिति नहीं होती है और वे गति पैटर्न द्वारा पहचाने जाते हैं: किनारे से स्वाइप, दो उंगलियों से पिंच, लॉन्ग प्रेस।

जेस्चर नेविगेशन में संक्रमण iPhone X से शुरू हुआ (2017), जहाँ Apple ने होम बटन को पूरी तरह से हटा दिया, इसे निचले किनारे से स्वाइप से बदल दिया। Google ने Android 10 (2020) में इस प्रवृत्ति का अनुसरण किया, उपयोगकर्ताओं को विकल्प प्रदान किया: तीन-बटन नेविगेशन, दो-बटन नेविगेशन और पूर्ण जेस्चर नेविगेशन। StatCounter (2025) के अनुसार, 75% से अधिक Android डिवाइस और 95% iOS डिवाइस जेस्चर नेविगेशन का उपयोग करते हैं।

आर्किटेक्चरली, जेस्चर पहचान तीन चरणों में होती है: कैप्चर (टच इवेंट कैप्चर करना), रिकॉग्निशन (गति पैटर्न की पहचान) और एक्शन (निर्धारित कार्य निष्पादित करना)। सिस्टम स्तर पर, Android और iOS में बुनियादी नेविगेशन जेस्चर के लिए अंतर्निहित हैंडलर होते हैं — स्वाइप बैक, होम स्क्रीन पर जाना, ऐप स्विचर खोलना। डेवलपर को केवल अपने स्वयं के जेस्चर को इस सिस्टम में सही ढंग से एकीकृत करने की आवश्यकता है।

मोबाइल नेविगेशन में जेस्चर के प्रकार

सभी टच जेस्चर को उद्देश्य और निष्पादन विधि के आधार पर तीन श्रेणियों में विभाजित किया जा सकता है। प्रत्येक प्रकार के अपने प्रसंस्करण नियम और इंटरफ़ेस में उपयोग के लिए सिफारिशें हैं।

नेविगेशन जेस्चर

नेविगेशन जेस्चर स्क्रीन के बीच गति को नियंत्रित करते हैं: वापस जाने के लिए बाएँ किनारे से स्वाइप (iOS), ऐप स्विचर खोलने के लिए ऊपर स्वाइप, होम स्क्रीन पर लौटने के लिए निचले किनारे से स्वाइप। ये जेस्चर विंडो स्तर पर सिस्टम द्वारा संभाले जाते हैं और ऐप के अंदर कस्टम जेस्चर के साथ विरोध नहीं करना चाहिए।

मैनिपुलेशन जेस्चर

मैनिपुलेशन जेस्चर स्क्रीन पर ऑब्जेक्ट की स्थिति, आकार या अभिविन्यास बदलते हैं। पिंच (दो-उंगली ज़ूम), रोटेट (घूर्णन), पैन (खींचना), स्वाइप (तेज़ स्वाइप) — ये सभी जेस्चर View या Composable स्तर पर संभाले जाते हैं और सिस्टम नेविगेशन को प्रभावित नहीं करते हैं।

प्रासंगिक जेस्चर

प्रासंगिक जेस्चर दूसरी स्क्रीन पर नेविगेट किए बिना अतिरिक्त कार्यों को सक्रिय करते हैं। लॉन्ग प्रेस (संदर्भ मेनू के लिए), डबल टैप (लाइक या ज़ूम के लिए), एज स्वाइप (Drawer खोलने के लिए)। इन जेस्चर को सबसे सावधानीपूर्वक कार्यान्वयन की आवश्यकता होती है क्योंकि ये सिस्टम नेविगेशन जेस्चर के साथ ओवरलैप हो सकते हैं।

Android पर जेस्चर नेविगेशन: GestureDetector और MotionEvent

Android SDK निम्न-स्तरीय MotionEvent से लेकर उच्च-स्तरीय GestureDetector और GestureOverlayView तक एक बहु-स्तरीय जेस्चर प्रसंस्करण प्रणाली प्रदान करता है। सही स्तर चुनना जेस्चर की जटिलता और प्रदर्शन आवश्यकताओं पर निर्भर करता है।

GestureDetector — आधार वर्ग

GestureDetector एक उच्च-स्तरीय वर्ग है जो MotionEvent के अनुक्रम को विशिष्ट जेस्चर में परिवर्तित करता है: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling। डेवलपर GestureDetector.SimpleOnGestureListener के आवश्यक विधियों को ओवरराइड करता है और एक तैयार पहचाना गया इवेंट प्राप्त करता है। स्केलिंग को छोड़कर सभी मानक जेस्चर के लिए GestureDetector की अनुशंसा की जाती है — उसके लिए ScaleGestureDetector है।

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

कस्टम लक्ष्यों के लिए TouchDelegate

TouchDelegate एक View के स्पर्श क्षेत्र को विस्तारित करने का तंत्र है। इसका उपयोग तब किया जाता है जब लक्ष्य तत्व 48dp के न्यूनतम स्पर्श आकार से छोटा होता है। उदाहरण के लिए, स्क्रीन के कोने में एक छोटा "बंद करें" बटन एक TouchDelegate प्राप्त करता है जो दृश्य आकार बदले बिना उसके हिट क्षेत्र का विस्तार करता है। Google सभी 48x48dp से छोटे इंटरैक्टिव तत्वों के लिए TouchDelegate की अनुशंसा करता है।

Jetpack Compose में जेस्चर

Compose जेस्चर संभालने के लिए मॉडिफायर प्रदान करता है: clickable, draggable, swipeable, combinedClickable (डबल टैप और लॉन्ग प्रेस के लिए)। आंतरिक रूप से, Compose निम्न-स्तरीय प्रसंस्करण के लिए PointerInputScope का उपयोग करता है, लेकिन अधिकांश डेवलपर्स को केवल उच्च-स्तरीय मॉडिफायर की आवश्यकता होती है। कस्टम जेस्चर के लिए awaitPointerEvent के साथ pointerInput का उपयोग करें।

iOS पर जेस्चर नेविगेशन: UIGestureRecognizer और SwiftUI

iOS SDK UIGestureRecognizer आर्किटेक्चर का उपयोग करता है — एक सार आधार वर्ग जो UITouch के अनुक्रम का विश्लेषण करता है और निर्धारित करता है कि यह किसी ज्ञात जेस्चर से मेल खाता है या नहीं। Apple जहाँ संभव हो मानक रिकॉग्नाइज़र का उपयोग करने की अनुशंसा करता है, और केवल अद्वितीय जेस्चर के लिए कस्टम उपवर्ग बनाने की।

UIKit में UIGestureRecognizer

UIKit तैयार रिकॉग्नाइज़र का एक सेट प्रदान करता है: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer। प्रत्येक रिकॉग्नाइज़र की अवस्थाएँ होती हैं (possible, began, changed, ended, cancelled, failed) — डेवलपर जेस्चर के विभिन्न चरणों में प्रतिक्रिया करने के लिए अवस्था को ट्रैक करता है।

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

SwiftUI में जेस्चर

SwiftUI Compose के समान घोषणात्मक जेस्चर मॉडिफायर का उपयोग करता है: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture। SwiftUI simultaneousGesture, sequencedGesture और exclusiveGesture के माध्यम से जेस्चर के बीच विरोध को स्वचालित रूप से संभालता है — मॉडिफायर जो एक साथ ट्रिगर होने पर जेस्चर प्राथमिकता निर्धारित करते हैं।

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer एक सिस्टम रिकॉग्नाइज़र है जो UINavigationController में स्वाइप-बैक जेस्चर को नियंत्रित करता है। डिफ़ॉल्ट रूप से, यह रूट को छोड़कर सभी स्क्रीन के लिए सक्रिय है। यदि आपका ऐप कस्टम NavigationBar का उपयोग करता है, तो interactivePopGestureRecognizer काम करना बंद कर सकता है — इसे navigationController.interactivePopGestureRecognizer?.delegate के माध्यम से प्रोग्रामेटिक रूप से सक्रिय करने की आवश्यकता होगी।

सिस्टम और कस्टम जेस्चर का विरोध

जेस्चर विरोध जेस्चर नेविगेशन में सबसे चुनौतीपूर्ण समस्याओं में से एक है। जब एक कस्टम जेस्चर (उदाहरण के लिए, बाएँ किनारे से स्वाइप करके Drawer खोलना) सिस्टम जेस्चर (iOS या Android पर स्वाइप बैक) से मेल खाता है, तो सिस्टम को निर्धारित करना होता है कि किस जेस्चर की प्राथमिकता है। इस विरोध को सही ढंग से संभालना उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है।

Android पर समाधान: Insets और SystemGestureExclusionRects

Android 10+ ऐप को WindowInsets के माध्यम से अपने स्वयं के जेस्चर के लिए स्क्रीन के क्षेत्र आरक्षित करने की अनुमति देता है। उन क्षेत्रों को निर्दिष्ट करने के लिए ViewCompat.setSystemGestureExclusionRects का उपयोग करें जहाँ सिस्टम जेस्चर ट्रिगर नहीं होने चाहिए। उदाहरण के लिए, बाईं ओर के Drawer के लिए, आप सिस्टम स्वाइप-बैक से स्क्रीन के बाएँ किनारे (200dp तक चौड़ा) को बाहर कर सकते हैं। Google ने एक सीमा निर्धारित की है: प्रत्येक तरफ 200dp तक बाहर किया जा सकता है।

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

iOS पर समाधान: UIGestureRecognizerDelegate

iOS UIGestureRecognizerDelegate में gestureRecognizerShouldBegin विधि प्रदान करता है, जो एक कस्टम रिकॉग्नाइज़र को यह तय करने की अनुमति देता है कि उसे पहचान शुरू करनी चाहिए या नहीं। बाएँ किनारे से Drawer स्वाइप के लिए, आप स्पर्श स्थिति की जाँच कर सकते हैं: यदि उपयोगकर्ता Drawer खींच रहा है (दूरी सीमा से अधिक है), तो कस्टम जेस्चर नियंत्रण ले लेता है। यदि जेस्चर पहचाना नहीं जाता है, तो सिस्टम InteractivePopGestureRecognizer को नियंत्रण वापस देता है।

सामान्य गलतियाँ और सर्वोत्तम अभ्यास

जेस्चर नेविगेशन के लिए सावधानीपूर्वक डिज़ाइन की आवश्यकता होती है, विशेष रूप से सिस्टम जेस्चर नेविगेशन वाले उपकरणों पर। आइए सामान्य गलतियों और उन्हें ठीक करने की सिफारिशों पर नज़र डालें।

गलती: स्क्रीन किनारों पर विरोध क्षेत्रों को अनदेखा करना

सबसे आम गलती सिस्टम जेस्चर ज़ोन (बाएँ और दाएँ किनारे, निचला किनारा) में इंटरैक्टिव तत्व रखना या कस्टम स्वाइप लागू करना है। उपयोगकर्ता एक कार्य करने का प्रयास करता है, लेकिन इसके बजाय सिस्टम नेविगेशन ट्रिगर हो जाता है। हमेशा सिस्टम जेस्चर के लिए मार्जिन प्रदान करें और exclusion rects के माध्यम से विरोध को संभालें।

गलती: Android और iOS पर अलग-अलग पहचान गति

जेस्चर पैरामीटर (वेलोसिटी थ्रेशोल्ड, न्यूनतम दूरी) डिफ़ॉल्ट रूप से प्लेटफ़ॉर्म के बीच भिन्न होते हैं। यदि आपका ऐप क्रॉस-प्लेटफ़ॉर्म है, तो एक प्लेटफ़ॉर्म से दूसरे पर पैरामीटर कॉपी न करें — प्रत्येक जेस्चर को Android और iOS पर अलग-अलग परीक्षण करें। Flutter और React Native स्वचालित रूप से कुछ पैरामीटर को अनुकूलित करते हैं, लेकिन सभी को नहीं।

सर्वोत्तम अभ्यास: दृश्य प्रतिक्रिया

प्रत्येक जेस्चर के साथ दृश्य प्रतिक्रिया होनी चाहिए: रंग परिवर्तन, रूपांतरण, एनिमेशन। उपयोगकर्ता को समझना चाहिए कि जेस्चर पहचाना गया और कार्य निष्पादित हो रहा है। iOS पर, सिस्टम रिकॉग्नाइज़र स्वचालित रूप से हैप्टिक फीडबैक प्रदान करते हैं; Android पर इसे HapticFeedbackConstants के माध्यम से जोड़ने की आवश्यकता है।

सर्वोत्तम अभ्यास: जेस्चर के लिए एक्सेसिबिलिटी

सभी उपयोगकर्ता जेस्चर नहीं कर सकते — सीमित मोटर कौशल वाले लोग नेविगेशन के लिए VoiceOver और TalkBack का उपयोग करते हैं। प्रत्येक जेस्चर के लिए एक बटन विकल्प होना चाहिए। Google और Apple आवश्यकता करते हैं कि सभी जेस्चर क्रियाओं को एक्सेसिबिलिटी के लिए उपलब्ध नियंत्रणों के साथ दोहराया जाए।