Tap: co to jest, obsługa dotknięć w iOS i Android

Czym jest Tap?

Tap (dotknięcie, naciśnięcie) — gest szybkiego dotknięcia palcem lub rysikiem ekranu dotykowego. Gest składa się z dwóch faz: dotknięcie (touch down) i puszczenie (touch up), które odbywają się w tym samym miejscu bez przesuwania. System rozpoznaje Tap, gdy odstęp czasu między down i up nie przekracza wartości progowej (zwykle 300–500 ms). Jeśli użytkownik przytrzyma palec dłużej — gest zamienia się w Long Press.

Tap — podstawa mobilnego UX. Na wszystkich platformach mobilnych Tap zastępuje lewy klik myszy używany w interfejsach desktopowych. W przeciwieństwie do kliknięcia myszą, Tap nie ma modyfikatorów (Shift+klik, Ctrl+klik) ani hovera — to ograniczenie kształtuje projekt interfejsów mobilnych. Aby zrekompensować brak podglądu, platformy mobilne używają wizualnego sprzężenia zwrotnego: highlight przy dotknięciu, efekt ripple w Android, zmiana przezroczystości w iOS.

Anatomia Tap obejmuje pięć etapów na poziomie systemu: wybudzenie czujnika (dotknięcie), określenie współrzędnych, filtracja szumu (palec nie powinien przesunąć się więcej niż o odległość progową), oczekiwanie na zakończenie (puszczenie lub przytrzymanie), klasyfikacja (Tap, Long Press, Drag). Nowoczesne kontrolery dotykowe przetwarzają ten cykl w 8–16 ms przy częstotliwości odczytu 60–120 Hz.

Tap i Click: jaka jest różnica?

Tap i Click — różne zdarzenia z różną fizyką. Click — zdarzenie myszy, występujące przy naciśnięciu i puszczeniu przycisku myszy w tej samej pozycji. Tap — zdarzenie ekranu dotykowego, występujące przy dotknięciu palcem. Na urządzeniach mobilnych przeglądarka przekształca Tap w zdarzenie click z opóźnieniem 300–350 ms (w celu emulacji podwójnego tapnięcia do zoomowania). To opóźnienie było historycznie problemem mobilnego internetu, dopóki Apple i Google nie wprowadzili meta viewport z user-scalable=no.

Touch Events — to osobne API od Mouse Events. Zdarzenia dotykowe (touchstart, touchmove, touchend) przekazują tablicę punktów dotknięcia (TouchList), współrzędne, siłę nacisku (pressure) i rozmiar obszaru dotknięcia (radiusX, radiusY). Mouse Events przekazują tylko współrzędne kursora. Nowoczesne przeglądarki syntetyzują click z touchend, jeśli nie było ruchu palca i zdarzenia touchcancel. Pointer Events API łączy oba podejścia, zapewniając ujednoliconą obsługę wszystkich urządzeń wejściowych.

Tap w iOS: UITapGestureRecognizer

UITapGestureRecognizer — standardowy rozpoznawacz pojedynczego i wielokrotnego Tap w iOS SDK. Obsługuje konfigurację numberOfTapsRequired (liczba kolejnych dotknięć) i numberOfTouchesRequired (liczba jednocześnie dotykających palców). Rozpoznawacz przechodzi w stan UIGestureRecognizerStateRecognized, gdy użytkownik puszcza palec, a dotknięcie nie przekracza progu przesunięcia.

// UITapGestureRecognizer z obsługą Double Tap
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — pokaż/ukryj elementy sterujące
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — zoomowanie obrazu
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Single Tap działa tylko jeśli Double Tap nie został rozpoznany
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* pokazać kontrolki */ }
    @objc private func handleDoubleTap() { /* przybliżać */ }
}

Ważny wzorzec: przy jednoczesnej obsłudze Single i Double Tap należy wywołać require(_:toFail:). Bez tego single tap będzie działać natychmiast, nie pozwalając systemowi czekać na drugie dotknięcie. iOS obsługuje również rozpoznawanie Tap przez UIControl.addTarget — dla UIButton, UISwitch i innych elementów sterujących. Wbudowane kontrolki UIKit mają już standardową obsługę Tap, a dodanie UITapGestureRecognizer na nich może prowadzić do konfliktów.

Tap w Android: setOnClickListener

View.setOnClickListener — standardowa metoda Android SDK do obsługi kliknięć na View. Gdy użytkownik dotyka View i puszcza palec na tym samym elemencie (touch down → touch up w obrębie View), wywoływana jest metoda onClick(). Android automatycznie dodaje efekt ripple (na API 21+) z animacją dotknięcia. Przycisk jest uważany za naciśnięty w stanie PRESSED, który jest wizualnie wyświetlany przez selektor lub RippleDrawable.

// setOnClickListener w Fragment z 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()
        }

        // Słuchacz z debounce w celu zapobiegania podwójnemu kliknięciu
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Wysyłanie danych formularza
    }
}

Debounce — ważny wzorzec w programowaniu Android. Użytkownik może przypadkowo nacisnąć przycisk dwa razy w krótkim odstępie czasu, co spowoduje podwójne wysłanie formularza lub podwójne wykonanie akcji. Rozwiązanie: otoczka DebouncingClickListener, która blokuje powtarzające się kliknięcia w ciągu 500–1000 ms. Google zaleca stosowanie tego podejścia w oficjalnych przykładach Android Architecture Components. Dla RecyclerView przewidziano setOnItemClickListener przez ListAdapter z interfejsem callback.

Wielokrotne dotknięcia: Double Tap i Triple Tap

Double Tap (podwójne dotknięcie) — dwa kolejne Tap w odstępie nie większym niż 300–400 ms. Używany do zoomowania obrazów (mapy, zdjęcia), polubień w mediach społecznościowych (Instagram, Twitter), powrotu do początku listy (Phone, Messages). Triple Tap (potrójne dotknięcie) występuje rzadziej — stosowane głównie w funkcjach accessibility (tryb pełnoekranowy, VoiceOver) i w grach.

Implementacja Double Tap wymaga synchronizacji z Single Tap: jeśli dodasz oba gesty do jednego elementu, Single Tap będzie działać z opóźnieniem (system czeka na drugie dotknięcie). W iOS to opóźnienie jest kontrolowane przez require(toFail:) — Single Tap jest opóźniony do momentu, gdy system jest pewien, że Double Tap nie nastąpi. W Android używany jest GestureDetector.OnDoubleTapListener z callbackami onSingleTapConfirmed i onDoubleTap. onSingleTapConfirmed jest wywoływany dopiero po upływie czasu, gdy system jest pewien, że to pojedyncze dotknięcie.

// Double Tap w Android przez 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() // pokaż/ukryj kontrolki
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // zoom w punkcie dotknięcia
                return true
            }
        })
    }
}

Instagram-like double tap — popularny wzorzec UX dla aplikacji społecznościowych. Podwójne dotknięcie zdjęcia wywołuje animację polubienia (ikona serca). Implementowane przez GestureDetector w Android lub UITapGestureRecognizer z numberOfTapsRequired=2 w iOS. Do animacji używane są Core Animation w iOS i ObjectAnimator/AnimatorSet w Android. Czas odpowiedzi double tap powinien być minimalny — użytkownik oczekuje natychmiastowej animacji po drugim dotknięciu.

Zasady używania Tap w interfejsach

Human Interface Guidelines Apple i Material Design Google stawiają konkretne wymagania dotyczące Tap. Minimalny rozmiar touch-target: 44×44 pt dla iOS i 48×48 dp dla Android. Odpowiada to ~9 mm na ekranie — rozmiar opuszki palca przeciętnej dorosłej osoby. Odstęp między celami dotykowymi powinien wynosić co najmniej 8 pt/dp, aby zapobiec fałszywym dotknięciom.

Wizualne sprzężenie zwrotne jest obowiązkowe dla Tap. Użytkownik powinien widzieć, że dotknięcie zostało zarejestrowane: zmiana koloru, opacity, animacja ripple lub highlight. Bez sprzężenia zwrotnego użytkownik może nacisnąć ponownie, powodując niepożądane działania. W iOS standardowa animacja touch highlight — zmiana przezroczystości na 0.3 z czasem trwania 0.15 s. W Android — efekt Material ripple, rozchodzący się od punktu dotknięcia. Nie używaj opóźnienia przed wizualnym sprzężeniem zwrotnym — użytkownik powinien widzieć reakcję jednocześnie z dotknięciem.