Gesture Navigation — cum este structurată, tipuri și implementare

Ce este Gesture Navigation

Gesture Navigation — este o metodă de interacțiune a utilizatorului cu dispozitivul mobil prin secvențe de atingeri, mișcări și apăsări recunoscute de ecranul tactil. Spre deosebire de butoanele tradiționale, gesturile nu au o poziție fixă pe ecran și sunt recunoscute după modelul de mișcare: swipe de la margine, pinch cu două degete, apăsare lungă.

Trecerea la navigarea prin gesturi a început cu iPhone X (2017), unde Apple a eliminat complet butonul Home, înlocuindu-l cu un swipe de la marginea de jos. Google a urmat tendința în Android 10 (2020), oferind utilizatorilor alegerea: navigare cu trei butoane, navigare cu două butoane și navigare completă prin gesturi. Potrivit StatCounter (2025), peste 75% dintre dispozitivele Android și 95% dintre dispozitivele iOS folosesc navigarea prin gesturi.

Din punct de vedere arhitectural, recunoașterea gesturilor constă din trei etape: Capture (captarea evenimentelor tactile), Recognition (determinarea modelului de mișcare) și Action (executarea acțiunii atribuite). La nivel de sistem, Android și iOS au procesoare încorporate pentru gesturile de navigare de bază — swipe înapoi, trecerea la ecranul principal, deschiderea comutatorului de aplicații. Dezvoltatorul trebuie doar să își integreze corect gesturile în acest sistem.

Tipuri de gesturi în navigarea mobilă

Toate gesturile tactile pot fi împărțite în trei categorii după scop și mod de execuție. Fiecare tip are propriile reguli de procesare și recomandări pentru utilizarea în interfață.

Gesturi de navigare

Gesturile de navigare controlează deplasarea între ecrane: swipe de la marginea stângă pentru întoarcere (iOS), swipe în sus pentru deschiderea comutatorului de aplicații, swipe de la marginea de jos pentru revenirea la ecranul principal. Aceste gesturi sunt procesate de sistem la nivel de Window și nu ar trebui să intre în conflict cu gesturile utilizatorului din interiorul aplicației.

Gesturi de manipulare

Gesturile de manipulare modifică poziția, dimensiunea sau orientarea obiectelor pe ecran. Pinch (zoom cu două degete), Rotate (rotire), Pan (tragere), Swipe (swipe rapid pentru derulare) — toate aceste gesturi sunt procesate la nivel de View sau Composabale și nu afectează navigarea sistemică.

Gesturi contextuale

Gesturile contextuale activează funcții suplimentare fără a trece la un alt ecran. Long press (apăsare lungă pentru meniul contextual), Double tap (atingere dublă pentru like sau zoom), Edge swipe (swipe de la margine pentru deschiderea Drawer). Aceste gesturi necesită cea mai atentă implementare, deoarece se pot suprapune cu gesturile sistemice de navigare.

Gesture Navigation pe Android: GestureDetector și MotionEvent

Android SDK oferă un sistem multinivel de procesare a gesturilor, de la MotionEvent de nivel scăzut până la GestureDetector și GestureOverlayView de nivel înalt. Alegerea corectă a nivelului depinde de complexitatea gestului și de cerințele de performanță.

GestureDetector — clasa de bază

GestureDetector — este o clasă de nivel înalt care transformă o secvență de MotionEvent în gesturi specifice: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Dezvoltatorul suprascrie metodele necesare din GestureDetector.SimpleOnGestureListener și primește evenimentul recunoscut gata. GestureDetector este recomandat pentru toate gesturile standard, cu excepția zoom-ului — pentru acesta există 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 pentru ținte personalizate

TouchDelegate — un mecanism de extindere a zonei de atingere pentru View. Se utilizează când elementul țintă este mai mic decât dimensiunea minimă de atingere de 48dp. De exemplu, un buton mic „Închide" în colțul ecranului primește un TouchDelegate care extinde zona de lovire fără a modifica dimensiunea vizibilă. Google recomandă TouchDelegate pentru toate elementele interactive mai mici de 48x48dp.

Gesturi în Jetpack Compose

Compose oferă modificatori pentru procesarea gesturilor: clickable, draggable, swipeable, combinedClickable (pentru double tap și long press). Intern, Compose folosește PointerInputScope pentru procesarea de nivel scăzut, dar pentru majoritatea dezvoltatorilor sunt suficienți modificatorii de nivel înalt. Pentru gesturi personalizate se folosește pointerInput cu awaitPointerEvent.

Gesture Navigation pe iOS: UIGestureRecognizer și SwiftUI

iOS SDK folosește arhitectura UIGestureRecognizer — o clasă de bază abstractă care analizează o secvență de UITouch și determină dacă aceasta corespunde unui gest cunoscut. Apple recomandă utilizarea recognizer-standard oriunde este posibil și crearea de subclase personalizate doar pentru gesturi unice.

UIGestureRecognizer în UIKit

UIKit oferă un set de recognizer gata făcute: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Fiecare recognizer are stări (possible, began, changed, ended, cancelled, failed) — dezvoltatorul urmărește starea pentru a reacționa în diferite etape ale gestului.

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

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

Gesturi în SwiftUI

SwiftUI folosește modificatori declarațivi pentru gesturi, similar cu Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. SwiftUI gestionează automat conflictele între gesturi prin simultaneousGesture, sequencedGesture și exclusiveGesture — modificatori care determină prioritatea gesturilor la declanșarea simultană.

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

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — recognizer-ul sistemic care gestionează swipe-ul înapoi în UINavigationController. Implicit, este activ pentru toate ecranele, cu excepția celui rădăcină. Dacă aplicația dvs. folosește un NavigationBar personalizat, interactivePopGestureRecognizer poate înceta să funcționeze — va necesita activarea sa programatică prin navigationController.interactivePopGestureRecognizer?.delegate.

Conflictul gesturilor sistemice și ale utilizatorului

Conflictul gesturilor — una dintre cele mai dificile probleme în navigarea prin gesturi. Când un gest al utilizatorului (de exemplu, deschiderea Drawer cu swipe de la marginea stângă) se suprapune cu un gest sistemic (swipe înapoi pe iOS sau Android), sistemul trebuie să determine care gest are prioritate. Gestionarea corectă a acestui conflict este critică pentru UX.

Soluția pe Android: Insets și SystemGestureExclusionRects

Android 10+ permite aplicației să rezerve zone ale ecranului pentru gesturile sale prin WindowInsets. Utilizați ViewCompat.setSystemGestureExclusionRects pentru a indica regiunile în care gesturile sistemice nu ar trebui să funcționeze. De exemplu, pentru un Drawer în stânga, puteți exclude marginea stângă a ecranului (lățime de până la 200dp) din swipe-ul sistemic înapoi. Google a stabilit o limită: se pot exclude până la 200dp pe fiecare parte.

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

Soluția pe iOS: UIGestureRecognizerDelegate

iOS oferă metoda gestureRecognizerShouldBegin în UIGestureRecognizerDelegate, care permite recognizer-ului personalizat să decidă dacă ar trebui să înceapă recunoașterea. Pentru swipe-ul Drawer de la marginea stângă, puteți verifica poziția atingerii: dacă utilizatorul trage Drawer (distanță mai mare decât threshold), gestul personalizat preia controlul. Dacă gestul nu este recunoscut, sistemul returnează controlul către InteractivePopGestureRecognizer.

Greșeli tipice și cele mai bune practici

Gesture Navigation necesită o proiectare atentă, în special pe dispozitivele cu navigare sistemică prin gesturi. Să vedem greșelile frecvente și recomandările pentru eliminarea lor.

Greșeală: ignorarea zonelor de conflict de la marginile ecranului

Cea mai frecventă greșeală — plasarea elementelor interactive sau implementarea swipe-urilor personalizate în zonele gesturilor sistemice (marginile stângă și dreaptă, marginea de jos). Utilizatorul încearcă să execute o acțiune, iar în schimb se activează navigarea sistemică. Prevedeți întotdeauna spații pentru gesturile sistemice și gestionați conflictele prin exclusion rects.

Greșeală: viteza diferită de recunoaștere pe Android și iOS

Parametrii gesturilor (velocity threshold, minimum distance) diferă implicit între platforme. Dacă aplicația dvs. este cross-platform, nu copiați parametrii de pe o platformă pe alta — testați fiecare gest separat pe Android și iOS. Flutter și React Native adaptează automat unii parametri, dar nu pe toți.

Cea mai bună practică: feedback vizual

Fiecare gest ar trebui să fie însoțit de feedback vizual: schimbare de culoare, transformare, animație. Utilizatorul trebuie să înțeleagă că gestul a fost recunoscut și acțiunea se execută. Pe iOS, recognizer-ele sistemice oferă automat feedback haptic, pe Android trebuie adăugat prin HapticFeedbackConstants.

Cea mai bună practică: accesibilitate pentru gesturi

Nu toți utilizatorii pot executa gesturi — persoanele cu motricitate limitată folosesc VoiceOver și TalkBack pentru navigare. Pentru fiecare gest trebuie să existe o alternativă sub formă de buton. Google și Apple solicită ca toate acțiunile prin gesturi să fie duplicate de elemente de control accesibile.