Gesture Navigation — paano ito nakaayos, mga uri at implementasyon

Ano ang Gesture Navigation

Gesture Navigation — ay isang paraan ng pakikipag-ugnayan ng gumagamit sa mobile device sa pamamagitan ng mga pagkakasunod-sunod ng pagpindot, paggalaw, at pagpindot na kinikilala ng touch screen. Hindi tulad ng tradisyonal na mga button, ang mga gesture ay walang nakapirming posisyon sa screen at kinikilala batay sa pattern ng paggalaw: swipe mula sa gilid, pinch gamit ang dalawang daliri, mahabang pagpindot.

Ang paglipat sa gesture navigation ay nagsimula sa iPhone X (2017), kung saan ganap na inalis ng Apple ang Home button, pinalitan ito ng swipe mula sa ibabang gilid. Sinundan ng Google ang trend sa Android 10 (2020), nag-aalok sa mga gumagamit ng pagpipilian: nabigasyon na may tatlong button, nabigasyon na may dalawang button, at buong gesture navigation. Ayon sa StatCounter (2025), higit sa 75% ng Android device at 95% ng iOS device ay gumagamit ng gesture navigation.

Sa arkitektura, ang pagkilala ng gesture ay binubuo ng tatlong yugto: Capture (pagkuha ng touch events), Recognition (pagtukoy ng pattern ng paggalaw), at Action (pagsasagawa ng itinalagang aksyon). Sa antas ng sistema, ang Android at iOS ay may built-in na tagaproseso para sa pangunahing navigation gesture — swipe pabalik, pagpunta sa home screen, pagbubukas ng app switcher. Kailangan lang ng developer na wastong isama ang kanyang mga gesture sa sistemang ito.

Mga uri ng gesture sa mobile nabigasyon

Lahat ng touch gesture ay maaaring hatiin sa tatlong kategorya ayon sa layunin at paraan ng pagsasagawa. Ang bawat uri ay may sariling mga patakaran sa pagproseso at mga rekomendasyon para sa paggamit sa interface.

Mga gesture pang-navigate

Mga gesture pang-navigate ay kumokontrol sa paglipat sa pagitan ng mga screen: swipe mula sa kaliwang gilid para bumalik (iOS), swipe pataas para buksan ang app switcher, swipe mula sa ibabang gilid para bumalik sa home screen. Ang mga gesture na ito ay pinoproseso ng sistema sa antas ng Window at hindi dapat sumalungat sa mga gesture ng gumagamit sa loob ng application.

Mga gesture pang-manipulate

Mga gesture pang-manipulate ay nagbabago ng posisyon, laki, o oryentasyon ng mga bagay sa screen. Pinch (pag-scale gamit ang dalawang daliri), Rotate (pag-ikot), Pan (pag-drag), Swipe (mabilis na pag-swipe para mag-scroll) — lahat ng gesture na ito ay pinoproseso sa antas ng View o Composabale at hindi nakakaapekto sa sistema ng nabigasyon.

Mga kontekstwal na gesture

Mga kontekstwal na gesture ay nag-a-activate ng karagdagang mga function nang hindi pumupunta sa ibang screen. Long press (mahabang pagpindot para sa context menu), Double tap (dobleng pagpindot para sa like o zoom), Edge swipe (pag-swipe mula sa gilid para buksan ang Drawer). Ang mga gesture na ito ay nangangailangan ng pinaka-maingat na implementasyon dahil maaari silang mag-overlap sa sistema ng navigation gesture.

Gesture Navigation sa Android: GestureDetector at MotionEvent

Android SDK ay nagbibigay ng multi-level na sistema ng pagproseso ng gesture, mula sa mababang antas na MotionEvent hanggang sa mataas na antas na GestureDetector at GestureOverlayView. Ang tamang pagpili ng antas ay depende sa pagiging kumplikado ng gesture at mga kinakailangan sa pagganap.

GestureDetector — pangunahing klase

GestureDetector — ay isang mataas na antas na klase na nagko-convert ng pagkakasunod-sunod ng MotionEvent sa mga tiyak na gesture: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Ang developer ay nag-o-override ng mga kinakailangang pamamaraan ng GestureDetector.SimpleOnGestureListener at natatanggap ang handa na kinikilalang kaganapan. Ang GestureDetector ay inirerekomenda para sa lahat ng karaniwang gesture, maliban sa pag-scale — para doon ay mayroong 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 para sa mga custom na target

TouchDelegate — isang mekanismo para sa pagpapalawak ng lugar ng pagpindot para sa View. Ginagamit kapag ang target na elemento ay mas maliit kaysa sa minimum na sukat ng pagpindot na 48dp. Halimbawa, ang isang maliit na button na “Sara” sa sulok ng screen ay nakakakuha ng TouchDelegate na nagpapalawak ng hit area nito nang hindi binabago ang nakikitang sukat. Inirerekomenda ng Google ang TouchDelegate para sa lahat ng interactive na elemento na mas maliit sa 48x48dp.

Gesture sa Jetpack Compose

Compose ay nagbibigay ng mga modifier para sa pagproseso ng gesture: clickable, draggable, swipeable, combinedClickable (para sa double tap at long press). Sa loob, ginagamit ng Compose ang PointerInputScope para sa mababang antas na pagproseso, ngunit para sa karamihan ng mga developer, sapat na ang mataas na antas na mga modifier. Para sa mga custom na gesture, ginagamit ang pointerInput na may awaitPointerEvent.

Gesture Navigation sa iOS: UIGestureRecognizer at SwiftUI

iOS SDK ay gumagamit ng arkitektura ng UIGestureRecognizer — isang abstract na base class na sumusuri sa pagkakasunod-sunod ng UITouch at tinutukoy kung ito ay tumutugma sa isang kilalang gesture. Inirerekomenda ng Apple na gamitin ang mga standard na recognizer hangga't maaari, at para lamang sa mga natatanging gesture gumawa ng mga custom na subclass.

UIGestureRecognizer sa UIKit

UIKit ay nagbibigay ng isang set ng handa na mga recognizer: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Bawat recognizer ay may mga estado (possible, began, changed, ended, cancelled, failed) — sinusubaybayan ng developer ang estado para mag-react sa iba't ibang yugto ng gesture.

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

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

Gesture sa SwiftUI

SwiftUI ay gumagamit ng deklaratibong mga modifier ng gesture, katulad ng Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. Awtomatikong pinoproseso ng SwiftUI ang mga salungatan sa pagitan ng mga gesture sa pamamagitan ng simultaneousGesture, sequencedGesture at exclusiveGesture — mga modifier na tumutukoy sa priyoridad ng mga gesture kapag sabay na na-activate.

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

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — ang sistema ng recognizer na namamahala sa swipe pabalik sa UINavigationController. Bilang default, ito ay aktibo para sa lahat ng screen maliban sa root screen. Kung ang iyong application ay gumagamit ng custom na NavigationBar, ang interactivePopGestureRecognizer ay maaaring tumigil sa paggana — mangangailangan ito ng programmatic na pag-activate sa pamamagitan ng navigationController.interactivePopGestureRecognizer?.delegate.

Salungatan ng sistema at gumagamit na gesture

Salungatan ng gesture — isa sa pinakamahirap na problema sa gesture navigation. Kapag ang gesture ng gumagamit (halimbawa, pagbubukas ng Drawer sa pamamagitan ng swipe mula sa kaliwang gilid) ay nag-overlap sa sistema ng gesture (swipe pabalik sa iOS o Android), dapat matukoy ng sistema kung aling gesture ang may priyoridad. Ang tamang paghawak ng salungatan na ito ay kritikal para sa UX.

Solusyon sa Android: Insets at SystemGestureExclusionRects

Android 10+ ay nagpapahintulot sa application na mag-reserve ng mga lugar ng screen para sa sarili nitong mga gesture sa pamamagitan ng WindowInsets. Gamitin ang ViewCompat.setSystemGestureExclusionRects para ipahiwatig ang mga rehiyon kung saan hindi dapat gumana ang sistema ng gesture. Halimbawa, para sa Drawer sa kaliwa, maaari mong ibukod ang kaliwang gilid ng screen (lapad hanggang 200dp) mula sa sistema ng swipe pabalik. Nagtakda ang Google ng limitasyon: hanggang 200dp sa bawat panig ang maaaring ibukod.

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

Solusyon sa iOS: UIGestureRecognizerDelegate

iOS ay nagbibigay ng pamamaraang gestureRecognizerShouldBegin sa UIGestureRecognizerDelegate, na nagpapahintulot sa custom na recognizer na magpasya kung dapat itong magsimula ng pagkilala. Para sa Drawer swipe mula sa kaliwang gilid, maaari mong suriin ang posisyon ng pagpindot: kung hinihila ng gumagamit ang Drawer (distansya na mas malaki kaysa threshold), ang custom na gesture ang kukuha ng kontrol. Kung hindi kinilala ang gesture, ibabalik ng sistema ang kontrol sa InteractivePopGestureRecognizer.

Mga karaniwang pagkakamali at pinakamahusay na kasanayan

Gesture Navigation ay nangangailangan ng maingat na disenyo, lalo na sa mga device na may sistema ng gesture navigation. Tingnan natin ang mga karaniwang pagkakamali at mga rekomendasyon para sa pag-aayos ng mga ito.

Pagkakamali: pagwawalang-bahala sa mga conflict zone sa mga gilid ng screen

Ang pinakakaraniwang pagkakamali — paglalagay ng mga interactive na elemento o pagpapatupad ng mga custom na swipe sa mga zone ng sistema ng gesture (kaliwa at kanang gilid, ibabang gilid). Ang gumagamit ay sumusubok na magsagawa ng aksyon, ngunit sa halip ay nag-a-activate ang sistema ng nabigasyon. Laging maglaan ng espasyo para sa sistema ng gesture at hawakan ang mga salungatan sa pamamagitan ng exclusion rects.

Pagkakamali: magkaibang bilis ng pagkilala sa Android at iOS

Mga parameter ng gesture (velocity threshold, minimum distance) ay magkaiba bilang default sa pagitan ng mga platform. Kung ang iyong application ay cross-platform, huwag kopyahin ang mga parameter mula sa isang platform patungo sa isa pa — subukan ang bawat gesture nang hiwalay sa Android at iOS. Ang Flutter at React Native ay awtomatikong nag-aadjust ng ilang parameter, ngunit hindi lahat.

Pinakamahusay na kasanayan: visual na feedback

Bawat gesture ay dapat na may kasamang visual na feedback: pagbabago ng kulay, pagbabago, animasyon. Ang gumagamit ay dapat na maunawaan na ang gesture ay kinilala at ang aksyon ay isinasagawa. Sa iOS, ang sistema ng recognizer ay awtomatikong nagbibigay ng haptic feedback, sa Android ito ay kailangang idagdag sa pamamagitan ng HapticFeedbackConstants.

Pinakamahusay na kasanayan: aksesibilidad para sa mga gesture

Hindi lahat ng gumagamit ay maaaring magsagawa ng mga gesture — ang mga taong may limitadong kakayahang motor ay gumagamit ng VoiceOver at TalkBack para sa nabigasyon. Para sa bawat gesture ay dapat mayroong button na alternatibo. Ang Google at Apple ay nangangailangan na ang lahat ng pagkilos ng gesture ay i-duplicate ng mga control element na naa-access para sa aksesibilidad.