Gesture Navigation — jak je uspořádána, typy a implementace

Co je Gesture Navigation

Gesture Navigation — je metoda interakce uživatele s mobilním zařízením prostřednictvím sekvencí dotyků, pohybů a stisků rozpoznávaných dotykovou obrazovkou. Na rozdíl od tradičních tlačítek nemají gesta pevnou polohu na obrazovce a jsou rozpoznávána podle vzorce pohybu: swipe od okraje, pinch dvěma prsty, dlouhé stisknutí.

Přechod na gestovou navigaci začal s iPhonem X (2017), kde Apple zcela odstranil tlačítko Home a nahradil jej swipem od spodního okraje. Google následoval trend v Androidu 10 (2020) a nabídl uživatelům volbu: navigace se třemi tlačítky, navigace se dvěma tlačítky a plná gestová navigace. Podle StatCounter (2025) používá gestovou navigaci více než 75% Android zařízení a 95% iOS zařízení.

Architektonicky se rozpoznávání gest skládá ze tří fází: Capture (zachycení dotykových událostí), Recognition (určení vzorce pohybu) a Action (provedení přiřazené akce). Na systémové úrovni mají Android a iOS vestavěné procesory pro základní navigační gesta — swipe zpět, přechod na domovskou obrazovku, otevření přepínače aplikací. Vývojář potřebuje pouze správně integrovat svá gesta do tohoto systému.

Typy gest v mobilní navigaci

Všechna dotyková gesta lze rozdělit do tří kategorií podle účelu a způsobu provedení. Každý typ má svá vlastní pravidla zpracování a doporučení pro použití v rozhraní.

Navigační gesta

Navigační gesta řídí pohyb mezi obrazovkami: swipe od levého okraje pro návrat (iOS), swipe nahoru pro otevření přepínače aplikací, swipe od spodního okraje pro návrat na domovskou obrazovku. Tato gesta jsou zpracovávána systémem na úrovni Window a neměla by být v konfliktu s uživatelskými gesty uvnitř aplikace.

Manipulační gesta

Manipulační gesta mění polohu, velikost nebo orientaci objektů na obrazovce. Pinch (škálování dvěma prsty), Rotate (otáčení), Pan (tažení), Swipe (rychlé swipování pro posouvání) — všechna tato gesta jsou zpracovávána na úrovni View nebo Composabale a neovlivňují systémovou navigaci.

Kontextová gesta

Kontextová gesta aktivují další funkce bez přechodu na jinou obrazovku. Long press (dlouhé stisknutí pro kontextovou nabídku), Double tap (dvojité klepnutí pro like nebo zvětšení), Edge swipe (swipe od okraje pro otevření Drawer). Tato gesta vyžadují nejpečlivější implementaci, protože se mohou překrývat se systémovými navigačními gesty.

Gesture Navigation na Android: GestureDetector a MotionEvent

Android SDK poskytuje víceúrovňový systém zpracování gest, od nízkoúrovňových MotionEvent až po vysokoúrovňové GestureDetector a GestureOverlayView. Správná volba úrovně závisí na složitosti gesta a požadavcích na výkon.

GestureDetector — základní třída

GestureDetector — je vysokoúrovňová třída, která převádí sekvenci MotionEvent na konkrétní gesta: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Vývojář přepíše potřebné metody GestureDetector.SimpleOnGestureListener a obdrží hotovou rozpoznanou událost. GestureDetector je doporučen pro všechna standardní gesta, kromě škálování — k tomu slouží 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 pro vlastní cíle

TouchDelegate — mechanismus rozšíření dotykové oblasti pro View. Používá se, když je cílový prvek menší než minimální velikost dotyku 48dp. Například malé tlačítko „Zavřít" v rohu obrazovky získá TouchDelegate, který rozšiřuje jeho oblast zásahu bez změny viditelné velikosti. Google doporučuje TouchDelegate pro všechny interaktivní prvky menší než 48x48dp.

Gesta v Jetpack Compose

Compose poskytuje modifikátory pro zpracování gest: clickable, draggable, swipeable, combinedClickable (pro double tap a long press). Interně Compose používá PointerInputScope pro nízkoúrovňové zpracování, ale pro většinu vývojářů stačí vysokoúrovňové modifikátory. Pro vlastní gesta se používá pointerInput s awaitPointerEvent.

Gesture Navigation na iOS: UIGestureRecognizer a SwiftUI

iOS SDK používá architekturu UIGestureRecognizer — abstraktní základní třídu, která analyzuje sekvenci UITouch a určuje, zda odpovídá známému gestu. Apple doporučuje používat standardní recognizery všude, kde je to možné, a pouze pro jedinečná gesta vytvářet vlastní podtřídy.

UIGestureRecognizer v UIKit

UIKit poskytuje sadu hotových recognizerů: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Každý recognizer má stavy (possible, began, changed, ended, cancelled, failed) — vývojář sleduje stav, aby reagoval v různých fázích gesta.

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

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

Gesta ve SwiftUI

SwiftUI používá deklarativní modifikátory gest, podobně jako Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. SwiftUI automaticky zpracovává konflikty mezi gesty prostřednictvím simultaneousGesture, sequencedGesture a exclusiveGesture — modifikátorů, které určují prioritu gest při současné aktivaci.

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

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — systémový recognizer, který spravuje swipe zpět v UINavigationController. Ve výchozím nastavení je aktivní pro všechny obrazovky kromě kořenové. Pokud vaše aplikace používá vlastní NavigationBar, interactivePopGestureRecognizer může přestat fungovat — bude vyžadovat programovou aktivaci prostřednictvím navigationController.interactivePopGestureRecognizer?.delegate.

Konflikt systémových a uživatelských gest

Konflikt gest — jeden z nejobtížnějších problémů v gestové navigaci. Když se uživatelské gesto (například otevření Drawer swipem od levého okraje) překrývá se systémovým gestem (swipe zpět na iOS nebo Android), systém musí určit, které gesto má prioritu. Správné zpracování tohoto konfliktu je kritické pro UX.

Řešení na Android: Insets a SystemGestureExclusionRects

Android 10+ umožňuje aplikaci rezervovat oblasti obrazovky pro svá vlastní gesta prostřednictvím WindowInsets. Použijte ViewCompat.setSystemGestureExclusionRects k označení regionů, kde by systémová gesta neměla fungovat. Například pro Drawer vlevo můžete vyloučit levý okraj obrazovky (šířka až 200dp) ze systémového swipe zpět. Google stanovil limit: z každé strany lze vyloučit až 200dp.

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

Řešení na iOS: UIGestureRecognizerDelegate

iOS poskytuje metodu gestureRecognizerShouldBegin v UIGestureRecognizerDelegate, která umožňuje vlastnímu recognizeru rozhodnout, zda má začít rozpoznávání. Pro Drawer swipe od levého okraje můžete zkontrolovat polohu dotyku: pokud uživatel táhne Drawer (vzdálenost větší než threshold), vlastní gesto převezme kontrolu. Pokud gesto není rozpoznáno, systém vrátí kontrolu InteractivePopGestureRecognizeru.

Typické chyby a nejlepší praktiky

Gesture Navigation vyžaduje pečlivý návrh, zejména na zařízeních se systémovou gestovou navigací. Podívejme se na časté chyby a doporučení pro jejich odstranění.

Chyba: ignorování konfliktních zón u okrajů obrazovky

Nejčastější chyba — umístění interaktivních prvků nebo implementace vlastních swipe v zónách systémových gest (levý a pravý okraj, spodní okraj). Uživatel se snaží provést akci, ale místo toho se aktivuje systémová navigace. Vždy počítejte s místem pro systémová gesta a zpracovávejte konflikty pomocí exclusion rects.

Chyba: rozdílná rychlost rozpoznávání na Android a iOS

Parametry gest (velocity threshold, minimum distance) se ve výchozím nastavení liší mezi platformami. Pokud je vaše aplikace multiplatformní, nekopírujte parametry z jedné platformy na druhou — testujte každé gesto zvlášť na Android a iOS. Flutter a React Native automaticky přizpůsobují některé parametry, ale ne všechny.

Nejlepší praktika: vizuální zpětná vazba

Každé gesto by mělo být doprovázeno vizuální zpětnou vazbou: změna barvy, transformace, animace. Uživatel musí pochopit, že gesto bylo rozpoznáno a akce se provádí. Na iOS systémové recognizery automaticky poskytují haptickou zpětnou vazbu, na Androidu je třeba ji přidat pomocí HapticFeedbackConstants.

Nejlepší praktika: přístupnost pro gesta

Ne všichni uživatelé mohou provádět gesta — lidé s omezenou motorikou používají VoiceOver a TalkBack pro navigaci. Pro každé gesto by měla existovat tlačítková alternativa. Google a Apple vyžadují, aby všechny akce gest byly duplikovány přístupnými ovládacími prvky.