Gesture Navigation — hogyan épül fel, típusok és implementáció

Mi az a Gesture Navigation

Gesture Navigation — a felhasználó mobileszközzel való interakciójának módja érintések, mozdulatok és nyomások sorozatán keresztül, amelyeket az érintőképernyő ismer fel. A hagyományos gombokkal ellentétben a gesztusoknak nincs rögzített helyük a képernyőn, és a mozgásminta alapján kerülnek felismerésre: swipe a szélétől, pinch két ujjal, hosszú lenyomás.

A gesztus navigációra való áttérés az iPhone X-szel kezdődött (2017), ahol az Apple teljesen eltávolította a Home gombot, és egy alsó szélről történő swipe-pal helyettesítette. A Google követte a trendet az Android 10-ben (2020), választási lehetőséget kínálva a felhasználóknak: háromgombos navigáció, kétgombos navigáció és teljes gesztus navigáció. A StatCounter (2025) szerint az Android-eszközök több mint 75%-a és az iOS-eszközök 95%-a használ gesztus navigációt.

Architekturálisan a gesztusfelismerés három szakaszból áll: Capture (érintési események rögzítése), Recognition (a mozgásminta meghatározása) és Action (a kijelölt művelet végrehajtása). Rendszerszinten az Android és az iOS beépített feldolgozókkal rendelkezik az alapvető navigációs gesztusokhoz — swipe vissza, kezdőképernyőre lépés, alkalmazásváltó megnyitása. A fejlesztőnek csak megfelelően kell integrálnia a gesztusait ebbe a rendszerbe.

Gesztustípusok a mobil navigációban

Minden érintőgesztus három kategóriába sorolható a cél és a végrehajtás módja szerint. Minden típusnak megvannak a saját feldolgozási szabályai és ajánlásai a felületben való használatra.

Navigációs gesztusok

Navigációs gesztusok irányítják a képernyők közötti mozgást: swipe a bal szélről a visszatéréshez (iOS), swipe felfelé az alkalmazásváltó megnyitásához, swipe az alsó szélről a kezdőképernyőre való visszatéréshez. Ezeket a gesztusokat a rendszer dolgozza fel Window szinten, és nem ütközhetnek a felhasználói gesztusokkal az alkalmazáson belül.

Manipulációs gesztusok

Manipulációs gesztusok megváltoztatják a képernyőn lévő objektumok helyzetét, méretét vagy tájolását. Pinch (kétujjas nagyítás), Rotate (forgatás), Pan (húzás), Swipe (gyors swipe görgetéshez) — ezeket a gesztusokat View vagy Composabale szinten dolgozzák fel, és nem befolyásolják a rendszernavigációt.

Kontextuális gesztusok

Kontextuális gesztusok további funkciókat aktiválnak anélkül, hogy másik képernyőre lépnének. Long press (hosszú lenyomás helyi menühöz), Double tap (dupla koppintás like-hoz vagy nagyításhoz), Edge swipe (swipe a szélről a Drawer megnyitásához). Ezek a gesztusok igénylik a legkörültekintőbb implementációt, mivel átfedésbe kerülhetnek a rendszer navigációs gesztusaival.

Gesture Navigation Androidon: GestureDetector és MotionEvent

Android SDK többszintű gesztusfeldolgozó rendszert biztosít, az alacsony szintű MotionEvent-től a magas szintű GestureDetector és GestureOverlayView-ig. A megfelelő szint kiválasztása a gesztus összetettségétől és a teljesítménykövetelményektől függ.

GestureDetector — az alaposztály

GestureDetector — egy magas szintű osztály, amely a MotionEvent sorozatot konkrét gesztusokká alakítja: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. A fejlesztő felülírja a GestureDetector.SimpleOnGestureListener szükséges metódusait, és megkapja a felismert eseményt. A GestureDetector minden szabványos gesztushoz ajánlott, kivéve a nagyítást — ahhoz a ScaleGestureDetector létezik.

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 egyedi célokhoz

TouchDelegate — egy mechanizmus az érintési terület kiterjesztésére View számára. Akkor használatos, amikor a célelem kisebb, mint a minimális érintési méret, 48dp. Például egy kis „Bezárás" gomb a képernyő sarkában kap egy TouchDelegate-ot, amely kiterjeszti a találati területét anélkül, hogy megváltoztatná a látható méretet. A Google a TouchDelegate-ot ajánlja minden 48x48dp-nél kisebb interaktív elemhez.

Gesztusok Jetpack Compose-ban

A Compose módosítókat biztosít a gesztusok feldolgozásához: clickable, draggable, swipeable, combinedClickable (double tap és long press esetén). Belsőleg a Compose a PointerInputScope-ot használja alacsony szintű feldolgozáshoz, de a legtöbb fejlesztő számára elegendőek a magas szintű módosítók. Egyedi gesztusokhoz a pointerInput használatos az awaitPointerEvent függvénnyel.

Gesture Navigation iOS-en: UIGestureRecognizer és SwiftUI

iOS SDK az UIGestureRecognizer architektúrát használja — egy absztrakt alaposztályt, amely elemzi a UITouch sorozatot, és meghatározza, hogy az megfelel-e egy ismert gesztusnak. Az Apple azt ajánlja, hogy ahol csak lehetséges, használjunk szabványos recognizer-eket, és csak egyedi gesztusokhoz hozzunk létre egyedi alosztályokat.

UIGestureRecognizer a UIKit-ben

A UIKit kész recognizer-ek készletét biztosítja: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Minden recognizer-nek vannak állapotai (possible, began, changed, ended, cancelled, failed) — a fejlesztő követi az állapotot, hogy reagáljon a gesztus különböző szakaszaiban.

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

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

Gesztusok SwiftUI-ban

A SwiftUI deklaratív gesztusmódosítókat használ, hasonlóan a Compose-hoz: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. A SwiftUI automatikusan kezeli a gesztusok közötti ütközéseket a simultaneousGesture, sequencedGesture és exclusiveGesture segítségével — ezek a módosítók határozzák meg a gesztusok prioritását egyidejű aktiváláskor.

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

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — a rendszer recognizer-e, amely a vissza swipe-t kezeli UINavigationController-ben. Alapértelmezés szerint minden képernyőn aktív, kivéve a gyökérképernyőt. Ha az alkalmazás egyedi NavigationBar-t használ, az interactivePopGestureRecognizer leállhat — programozott aktiválásra lesz szükség a navigationController.interactivePopGestureRecognizer?.delegate segítségével.

Rendszer- és felhasználói gesztusok ütközése

Gesztusütközés — az egyik legnehezebb probléma a gesztus navigációban. Amikor a felhasználói gesztus (például a Drawer megnyitása swipe-pal a bal szélről) átfedésbe kerül a rendszergesztussal (swipe vissza iOS-en vagy Androidon), a rendszernek meg kell határoznia, hogy melyik gesztusnak van elsőbbsége. Az ütközés megfelelő kezelése kritikus fontosságú a UX szempontjából.

Megoldás Androidon: Insets és SystemGestureExclusionRects

Android 10+ lehetővé teszi az alkalmazás számára, hogy képernyőterületeket foglaljon le saját gesztusai számára a WindowInsets segítségével. Használja a ViewCompat.setSystemGestureExclusionRects függvényt azoknak a régióknak a megjelölésére, ahol a rendszergesztusok nem működhetnek. Például egy bal oldali Drawer esetén kizárhatja a képernyő bal szélét (legfeljebb 200dp szélességben) a rendszer vissza swipe-jából. A Google korlátot szabott: oldalanként legfeljebb 200dp zárható ki.

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

Megoldás iOS-en: UIGestureRecognizerDelegate

Az iOS biztosítja a gestureRecognizerShouldBegin metódust az UIGestureRecognizerDelegate-ben, amely lehetővé teszi az egyedi recognizer számára, hogy eldöntse, el kell-e kezdenie a felismerést. A bal szélről történő Drawer swipe esetén ellenőrizheti az érintés helyzetét: ha a felhasználó húzza a Drawer-t (a távolság nagyobb, mint a threshold), az egyedi gesztus átveszi az irányítást. Ha a gesztus nem kerül felismerésre, a rendszer visszaadja az irányítást az InteractivePopGestureRecognizer-nek.

Gyakori hibák és bevált gyakorlatok

Gesture Navigation gondos tervezést igényel, különösen a rendszerszintű gesztus navigációval rendelkező eszközökön. Tekintsük át a gyakori hibákat és a kijavításukra vonatkozó ajánlásokat.

Hiba: a képernyő széleinél lévő ütközési zónák figyelmen kívül hagyása

A leggyakoribb hiba — interaktív elemek elhelyezése vagy egyedi swipe-ok implementálása a rendszergesztusok zónáiban (bal és jobb szél, alsó szél). A felhasználó megpróbál végrehajtani egy műveletet, de ehelyett a rendszernavigáció aktiválódik. Mindig biztosítson helyet a rendszergesztusok számára, és kezelje az ütközéseket exclusion rects segítségével.

Hiba: eltérő felismerési sebesség Androidon és iOS-en

A gesztus paraméterei (velocity threshold, minimum distance) alapértelmezés szerint eltérnek a platformok között. Ha az alkalmazás többplatformos, ne másolja át a paramétereket egyik platformról a másikra — tesztelje minden gesztust külön Androidon és iOS-en. A Flutter és a React Native automatikusan adaptál néhány paramétert, de nem az összeset.

Bevált gyakorlat: vizuális visszajelzés

Minden gesztust vizuális visszajelzésnek kell kísérnie: színváltozás, transzformáció, animáció. A felhasználónak meg kell értenie, hogy a gesztus felismerésre került és a művelet végrehajtás alatt áll. iOS-en a rendszer recognizer-ek automatikusan biztosítanak haptikus visszajelzést, Androidon a HapticFeedbackConstants segítségével kell hozzáadni.

Bevált gyakorlat: akadálymentesítés gesztusokhoz

Nem minden felhasználó képes gesztusokat végrehajtani — a korlátozott mozgásképességű emberek VoiceOver és TalkBack segítségével navigálnak. Minden gesztushoz léteznie kell egy gomb alternatívának. A Google és az Apple megköveteli, hogy az összes gesztus művelet meg legyen duplázva akadálymentes vezérlőelemekkel.