Tap: co to je, zpracování dotyků v iOS a Android

Co je Tap?

Tap (dotyk, stisk) — gesto rychlého dotknutí dotykové obrazovky prstem nebo stylusem. Gesto se skládá ze dvou fází: dotyk (touch down) a uvolnění (touch up), které probíhají na stejném místě bez pohybu. Systém rozpozná Tap, když časový interval mezi down a up nepřekročí prahovou hodnotu (obvykle 300–500 ms). Pokud uživatel drží prst déle — gesto se změní na Long Press.

Tap — základ mobilního UX. Na všech mobilních platformách Tap nahrazuje levé kliknutí myši používané v desktopových rozhraních. Na rozdíl od kliknutí myší, Tap nemá modifikátory (Shift+klik, Ctrl+klik) ani hover — toto omezení formuje design mobilních rozhraní. Pro kompenzaci chybějícího náhledu používají mobilní platformy vizuální zpětnou vazbu: highlight při dotyku, efekt ripple v Android, změnu průhlednosti v iOS.

Anatomie Tap zahrnuje pět fází na úrovni systému: probuzení senzoru (dotyk), určení souřadnic, filtrování šumu (prst by se neměl posunout více než o prahovou vzdálenost), čekání na dokončení (uvolnění nebo podržení), klasifikace (Tap, Long Press, Drag). Moderní dotykové ovladače zpracovávají tento cyklus za 8–16 ms při frekvenci dotazování 60–120 Hz.

Tap a Click: jaký je rozdíl?

Tap a Click — různé události s odlišnou fyzikou. Click — událost myši, ke které dochází při stisku a uvolnění tlačítka myši na stejné pozici. Tap — událost dotykové obrazovky, ke které dochází při dotyku prstem. Na mobilních zařízeních prohlížeč převádí Tap na událost click se zpožděním 300–350 ms (pro emulaci dvojitého klepnutí pro zoom). Toto zpoždění bylo historicky problémem mobilního webu, dokud Apple a Google nezavedli meta viewport s user-scalable=no.

Touch Events — je samostatné API od Mouse Events. Dotykové události (touchstart, touchmove, touchend) předávají pole dotykových bodů (TouchList), souřadnice, sílu stisku (pressure) a velikost oblasti dotyku (radiusX, radiusY). Mouse Events předává pouze souřadnice kurzoru. Moderní prohlížeče syntetizují click z touchend, pokud nedošlo k pohybu prstu a události touchcancel. Pointer Events API kombinuje oba přístupy a poskytuje jednotné zpracování pro všechna vstupní zařízení.

Tap v iOS: UITapGestureRecognizer

UITapGestureRecognizer — standardní rozpoznávač jednotlivého a vícenásobného Tap v iOS SDK. Podporuje konfiguraci numberOfTapsRequired (počet po sobě jdoucích klepnutí) a numberOfTouchesRequired (počet současně se dotýkajících prstů). Rozpoznávač přechází do stavu UIGestureRecognizerStateRecognized, když uživatel uvolní prst a dotyk nepřekročí práh pohybu.

// UITapGestureRecognizer s podporou Double Tap
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — zobrazit/skrýt ovládací prvky
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — zoomování obrázku
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Single Tap se aktivuje pouze pokud Double Tap není rozpoznán
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* zobrazit ovládací prvky */ }
    @objc private func handleDoubleTap() { /* zoomovat */ }
}

Důležitý vzor: při současné podpoře Single a Double Tap je třeba zavolat require(_:toFail:). Bez toho bude single tap reagovat okamžitě, aniž by systém mohl čekat na druhé klepnutí. iOS také podporuje rozpoznávání Tap přes UIControl.addTarget — pro UIButton, UISwitch a další ovládací prvky. Vestavěné ovládací prvky UIKit již mají standardní zpracování Tap a přidání UITapGestureRecognizer na ně může vést ke konfliktům.

Tap v Android: setOnClickListener

View.setOnClickListener — standardní metoda Android SDK pro zpracování kliknutí na View. Když uživatel dotkne View a uvolní prst na stejném prvku (touch down → touch up v rámci View), je volána metoda onClick(). Android automaticky přidává efekt ripple (na API 21+) s animací dotyku. Tlačítko je považováno za stisknuté ve stavu PRESSED, který je vizuálně zobrazen přes selector nebo RippleDrawable.

// setOnClickListener ve Fragment s Data Binding
class ItemListFragment : Fragment() {

    private var binding: FragmentItemListBinding? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding = FragmentItemListBinding.bind(view)
        binding.submitButton.setOnClickListener {
            submitForm()
        }

        // Posluchač s debounce pro prevenci dvojitého kliknutí
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Odeslání dat formuláře
    }
}

Debounce — důležitý vzor v programování pro Android. Uživatel může omylem stisknout tlačítko dvakrát v krátkém časovém intervalu, což vede k dvojímu odeslání formuláře nebo dvojímu provedení akce. Řešení: obal DebouncingClickListener, který blokuje opakovaná kliknutí po dobu 500–1000 ms. Google doporučuje tento přístup v oficiálních příkladech Android Architecture Components. Pro RecyclerView je k dispozici setOnItemClickListener přes ListAdapter s callback rozhraním.

Vícenásobné dotyky: Double Tap a Triple Tap

Double Tap (dvojité klepnutí) — dva po sobě jdoucí Tap s intervalem nejvýše 300–400 ms. Používá se pro zoomování obrázků (mapy, fotografie), lajky v sociálních sítích (Instagram, Twitter), návrat na začátek seznamu (Phone, Messages). Triple Tap (trojité klepnutí) je vzácnější — používá se hlavně pro funkce usnadnění přístupu (režim celé obrazovky, VoiceOver) a ve hrách.

Implementace Double Tap vyžaduje synchronizaci s Single Tap: pokud přidáte obě gesta na jeden prvek, Single Tap bude fungovat se zpožděním (systém čeká na druhé klepnutí). V iOS je toto zpoždění řízeno přes require(toFail:) — Single Tap je odložen, dokud si systém není jistý, že Double Tap nenastane. V Android se používá GestureDetector.OnDoubleTapListener s callbacky onSingleTapConfirmed a onDoubleTap. onSingleTapConfirmed je volán až po timeoutu, když si je systém jistý, že se jedná o jediné klepnutí.

// Double Tap v Android přes GestureDetector
class PhotoViewerActivity : AppCompatActivity() {

    private var gestureDetector: GestureDetector? = null

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

        gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {

            override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
                toggleControls() // zobrazit/skrýt ovládací prvky
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // zoom v bodě dotyku
                return true
            }
        })
    }
}

Instagram-like double tap — populární UX vzor pro sociální aplikace. Dvojité klepnutí na fotografii spouští animaci lajku (ikona srdce). Implementuje se přes GestureDetector v Android nebo UITapGestureRecognizer s numberOfTapsRequired=2 v iOS. Pro animaci se používá Core Animation na iOS a ObjectAnimator/AnimatorSet na Android. Doba odezvy double tap musí být minimální — uživatel očekává okamžitou animaci po druhém klepnutí.

Pravidla použití Tap v rozhraních

Human Interface Guidelines Apple a Material Design Google kladou konkrétní požadavky na Tap. Minimální velikost touch-target: 44×44 pt pro iOS a 48×48 dp pro Android. To odpovídá ~9 mm na obrazovce — velikosti prstového polštářku průměrného dospělého člověka. Vzdálenost mezi dotykovými cíli by měla být alespoň 8 pt/dp, aby se zabránilo falešným dotykům.

Vizuální zpětná vazba je pro Tap povinná. Uživatel musí vidět, že dotyk byl zaregistrován: změna barvy, opacity, animace ripple nebo highlight. Bez zpětné vazby může uživatel stisknout znovu, což způsobí nežádoucí akce. V iOS standardní animace touch highlight — změna průhlednosti na 0.3 s dobou trvání 0.15 s. V Android — efekt Material ripple šířící se z bodu dotyku. Nepoužívejte zpoždění před vizuální zpětnou vazbou — uživatel by měl vidět reakci současně s dotykem.