Přejetí v mobilních aplikacích — typy gest a implementace

Co je přejetí v mobilních rozhraních

Přejetí (swipe) je gesto, při kterém uživatel pohybuje prstem po obrazovce určitým směrem, čímž zahajuje akci. Na rozdíl od klepnutí (krátkého dotyku) přejetí zahrnuje pohyb a kontakt s obrazovkou po celou dobu trvání gesta.

Historie přejetí začala prvním iPhonem v roce 2007 — gesto odemknutí „slide to unlock” se stalo poznávacím znamením mobilních rozhraní. Dnes se přejetí používá v tisících aplikací pro navigaci, správu obsahu a organizaci informací.

Podle UX Planet (2025) vykazují aplikace s ovládáním gesty (včetně přejetí) o 18% vyšší zapojení uživatelů. Přejetí je vnímáno jako přirozenější akce ve srovnání se stisknutím tlačítka, protože napodobuje fyzický pohyb objektů.

Parametry rozpoznávání posouvání

Hlavní parametry, které určují, zda je gesto posouvání: minimální vzdálenost (obvykle 30–50 pixelů), maximální odchylka od přímky (ne více než 15–20 stupňů) a maximální doba kontaktu (do 500 ms). Pokud prst zůstane na obrazovce déle, je gesto klasifikováno jako přetažení (drag) nebo dlouhé stisknutí (long press).

Typy posouvání podle směru

Podle směru pohybu se posouvání dělí na čtyři základní typy: doleva, doprava, nahoru a dolů. Každý typ má svůj účel a kontext použití.

Vodorovné posouvání (doleva/doprava) se nejčastěji používá pro správu jednotlivých prvků — mazání, archivaci, procházení. Svislé posouvání (nahoru/dolů) — pro navigaci mezi obrazovkami a aktualizaci obsahu. Podle Material Design Guidelines (2024) je vodorovné posouvání pohodlnější pro pravoruké: pohyb doleva palcem je na pravé ruce přirozenější.

Víceprsté posouvání

Posouvání dvěma a třemi prsty se používá pro pokročilé akce. Dvěma prsty — přepínání mezi plochami na iPadu, zpětí akce (three-finger swipe). Třemi prsty — símek obrazovky na některých zařízeních. Víceprstá gesta jsou však méně intuitivní a vyžadují učení uživatele.

Implementace posouvání na iOS

Na iOS je zpracování gest založeno na UIGestureRecognizer — abstraktní třídě, která analyzuje sekvenci dotykových událostí a určuje, zda odpovídá konkrétnímu gestu.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("Posuňte doleva")
    }
}

UISwipeGestureRecognizer podporuje nastavení směru (direction) a počtu prstů (numberOfTouchesRequired). Ve výchozím nastavení je vyžadován jeden prst a směr doprava. Pro určení jiných směrů je třeba výslovně nastavit direction: .left, .up, .down.

API vyšší úrovně — UICollectionViewLayout s podporou swipe akcí. Počínaje iOS 11 podporují tabulky a kolekce vestavěné swipe akce prostřednictvím UISwipeActionsConfiguration, což umožňuje přidání tlačítek pro mazání nebo archivaci bez ručního zpracování gest.

Implementace posouvání na Android

Na Android se zpracování posouvání provádí prostřednictvím GestureDetector — třídy, která analyzuje MotionEvents a volá odpovídající metody zpětného volání.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("Posuňte doprava")
                }
                return true
            }
        })
    }
}

Metoda onFling v GestureDetector je volána, když uživatel rychle posune prstem po obrazovce. Obdrží startovní a koncové souřadnice (e1, e2) a rychlost pohybu (velocityX, velocityY). Pro určení směru se porovnává rozdíl souřadnic na ose X nebo Y.

Knihovna AndroidX poskytuje pohodlnější API: ViewCompat.setSwipeRefreshLayout pro pull-to-refresh, RecyclerView s ItemTouchHelper pro swipe akce v seznamech. ItemTouchHelper umožňuje přidat funkcionalitu posouvání s vizuální zpětnou vazbou — ikonou, barvou pozadí a animací.

Posouvání ve webových aplikacích

Ve vývoji webu se pro zpracování posouvání používají události Touch Events API (touchstart, touchmove, touchend) a pomocné knihovny jako Hammer.js nebo Swiper.js.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "Posuňte doprava" : "Posuňte doleva");
    }
});

Touch Events API — nativní způsob zpracování gest v prohlížeči. Událost touchstart zaznamenává počáteční souřadnice, touchmove sleduje pohyb, touchend určuje výsledek. Prahová hodnota (threshold) odfiltrovává náhodné dotyky.

Podle Can I Use (2026) je Touch Events API podporováno 98% prohlížečů. Pro složité scénáře gest (vícenásobná posouvání, rozpoznání směru) se doporučuje použít knihovnu Hammer.js, která abstrahuje nízkoúrovňové zpracování a poskytuje přehledné API.

UX vzory s posouváním

Úspěšné UX vzory s posouváním se formovaly během let vývoje mobilních rozhraní. Jejich použití zaručuje, že uživatel pochopí, jak gesto funguje, bez dalšího učení.

Vzor „Swipe to Delete” — nejčastější. Posunutí doleva na prvku seznamu otevírá tlačítko pro smazání. Standardizováno na iOS (SwipeActionsConfiguration) a Android (ItemTouchHelper). Uživatelé očekávají, že posunutí doleva prvek smaže nebo archivuje.

Vzor „Swipe to Go Back” — posunutí od levého okraje obrazovky pro návrat na předchozí obrazovku. Stal se standardem na iOS po iPhonu X. Na Androidu podobná navigace funguje prostřednictvím systémového gesta. Je důležité, aby nedocházelo ke konfliktu s tímto systémovým gestem ve vašich aplikacích.

Vzor „Pull to Refresh” — posunutí dolů pro aktualizaci obsahu. Vynalezl Loren Brichter pro Tweetie (2008), nyní se používá v milionech aplikací. Implementován ve standardních komponentech obou platforem.

• Zpětná vazba — prvek by se měl pohybovat spolu s prstem a ukazovat výsledek před dokončením posouvání
• Konflikty gest — vyhněte se současné podpoře vodorovného posouvání a rolování na stejném prvku
• Zjistitelnost — první akce posouvání by měly být doprovázeny vizuálním nápovědou
• Zrušení — uživatel by měl mít možnost zrušit posouvání vrácením prstu do původní polohy