Tap: mi ez, érintések feldolgozása iOS és Android rendszerben

Mi az a Tap?

Tap (érintés, nyomás) — az érintőképernyő gyors megérintésének gesztusa ujjal vagy tollal. A gesztus két fázisból áll: érintés (touch down) és elengedés (touch up), amelyek ugyanazon a helyen történnek mozgás nélkül. A rendszer akkor ismeri fel a Tap-ot, ha a down és up közötti időintervallum nem haladja meg a küszöbértéket (általában 300–500 ms). Ha a felhasználó tovább tartja az ujját — a gesztus Long Press-vé alakul.

Tap — a mobil UX alapja. Minden mobil platformon a Tap helyettesíti az asztali interfészekben használt bal egérkattintást. Az egérkattintással ellentétben a Tap-nak nincsenek módosítói (Shift+kattintás, Ctrl+kattintás) és hover-je — ez a korlátozás formálja a mobil interfészek kialakítását. Az előnézet hiányának kompenzálására a mobil platformok vizuális visszajelzést használnak: highlight érintéskor, ripple effektus Androidban, átlátszóság változás iOS-ben.

A Tap anatómiája öt szakaszból áll rendszerszinten: érzékelő felébresztése (érintés), koordináták meghatározása, zajszűrés (az ujj nem mozdulhat el a küszöbtávolságnál nagyobb mértékben), befejezésre várás (elengedés vagy tartás), osztályozás (Tap, Long Press, Drag). A modern érintésvezérlők ezt a ciklust 8–16 ms alatt dolgozzák fel 60–120 Hz-es lekérdezési frekvencián.

Tap és Click: mi a különbség?

Tap és Click — különböző események eltérő fizikával. Click — egéresemény, amely az egérgomb lenyomásakor és elengedésekor következik be ugyanazon a pozíción. Tap — érintőképernyős esemény, amely az ujj érintésekor következik be. Mobileszközökön a böngésző a Tap-ot click eseménnyé alakítja 300–350 ms késleltetéssel (a dupla koppintás szimulálásához nagyításhoz). Ez a késleltetés történelmileg a mobilweb problémája volt, amíg az Apple és a Google be nem vezette a meta viewport-ot user-scalable=no paraméterrel.

Touch Events — egy külön API a Mouse Events-től. Az érintési események (touchstart, touchmove, touchend) érintési pontok tömbjét (TouchList), koordinátákat, nyomáserősséget (pressure) és az érintési terület méretét (radiusX, radiusY) adják át. A Mouse Events csak a kurzor koordinátáit adja át. A modern böngészők a click-et a touchend-ből szintetizálják, ha nem volt ujjmozgás és touchcancel esemény. A Pointer Events API egyesíti mindkét megközelítést, egységes feldolgozást biztosítva minden beviteli eszközhöz.

Tap iOS-ben: UITapGestureRecognizer

UITapGestureRecognizer — az egy- és többszörös Tap szabványos felismerője az iOS SDK-ban. Támogatja a numberOfTapsRequired (egymást követő érintések száma) és numberOfTouchesRequired (egyidejűleg érintő ujjak száma) konfigurációját. A felismerő UIGestureRecognizerStateRecognized állapotba lép, amikor a felhasználó elengedi az ujját, és az érintés nem haladja meg a mozgási küszöböt.

// UITapGestureRecognizer Double Tap támogatással
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — vezérlők megjelenítése/elrejtése
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — kép nagyítása
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // A Single Tap csak akkor aktiválódik, ha a Double Tap nem került felismerésre
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* vezérlők megjelenítése */ }
    @objc private func handleDoubleTap() { /* nagyítás */ }
}

Fontos minta: a Single és Double Tap egyidejű támogatása esetén meg kell hívni a require(_:toFail:) metódust. Enélkül a single tap azonnal reagál, nem engedve a rendszernek, hogy megvárja a második érintést. Az iOS a Tap felismerését UIControl.addTarget-en keresztül is támogatja — UIButton, UISwitch és más vezérlőelemek esetében. A UIKit beépített vezérlői már rendelkeznek szabványos Tap-feldolgozással, és az UITapGestureRecognizer hozzáadása konfliktusokhoz vezethet.

Tap Androidban: setOnClickListener

View.setOnClickListener — a szabványos Android SDK metódus a View-n történő kattintások feldolgozásához. Amikor a felhasználó megérinti a View-t és elengedi az ujját ugyanazon az elemen (touch down → touch up a View-n belül), az onClick() metódus meghívódik. Az Android automatikusan ripple effektust (API 21+) ad hozzá érintési animációval. A gomb lenyomottnak tekintendő a PRESSED állapotban, amely vizuálisan egy szelektor vagy RippleDrawable segítségével jelenik meg.

// setOnClickListener Fragment-ben Data Binding-el
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()
        }

        // Figyelő debounce-szal a dupla kattintás megelőzésére
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Űrlapadatok küldése
    }
}

Debounce — fontos minta az Android programozásban. A felhasználó véletlenül kétszer is megnyomhatja a gombot rövid időn belül, ami az űrlap kétszeri elküldéséhez vagy a művelet kétszeri végrehajtásához vezet. Megoldás: DebouncingClickListener burkoló, amely blokkolja az ismétlődő kattintásokat 500–1000 ms-ig. A Google ezt a megközelítést ajánlja az Android Architecture Components hivatalos példáiban. A RecyclerView esetében a setOnItemClickListener a ListAdapter-en keresztül callback interfésszel van ellátva.

Többszörös érintések: Double Tap és Triple Tap

Double Tap (dupla érintés) — két egymást követő Tap legfeljebb 300–400 ms intervallummal. Képek nagyítására (térképek, fényképek), like-okra a közösségi médiában (Instagram, Twitter), a lista elejére való visszatérésre (Phone, Messages) használják. Triple Tap (tripla érintés) ritkábban fordul elő — főként akadálymentesítési funkciókhoz (teljes képernyős mód, VoiceOver) és játékokban használják.

A Double Tap implementációja szinkronizációt igényel a Single Tap-pal: ha mindkét gesztust hozzáadja egy elemhez, a Single Tap késleltetéssel fog működni (a rendszer várja a második érintést). iOS-ben ezt a késleltetést a require(toFail:) vezérli — a Single Tap addig késik, amíg a rendszer meg nem bizonyosodik arról, hogy a Double Tap nem fog bekövetkezni. Androidban a GestureDetector.OnDoubleTapListener használatos az onSingleTapConfirmed és onDoubleTap callback-ekkel. Az onSingleTapConfirmed csak időtúllépés után hívódik meg, amikor a rendszer biztos abban, hogy ez egy egyszeri érintés.

// Double Tap Android-ban GestureDetector segítségével
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() // vezérlők megjelenítése/elrejtése
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // nagyítás az érintési pontban
                return true
            }
        })
    }
}

Instagram-like double tap — népszerű UX minta közösségi alkalmazásokhoz. Egy fénykép dupla megérintése like animációt (szív ikon) indít el. Androidban GestureDetector, iOS-ben UITapGestureRecognizer numberOfTapsRequired=2 paraméterrel valósítják meg. Az animációhoz iOS-ben Core Animation, Androidban ObjectAnimator/AnimatorSet használatos. A double tap válaszidejének minimálisnak kell lennie — a felhasználó azonnali animációt vár a második érintés után.

A Tap használatának szabályai interfészekben

Human Interface Guidelines (Apple) és a Material Design (Google) konkrét követelményeket támaszt a Tap-vel szemben. A touch-target minimális mérete: 44×44 pt iOS és 48×48 dp Android esetén. Ez ~9 mm-nek felel meg a képernyőn — egy átlagos felnőtt ujjbegyének mérete. Az érintési célpontok közötti távolságnak legalább 8 pt/dp-nek kell lennie a hamis érintések megelőzése érdekében.

Vizuális visszajelzés kötelező a Tap-hoz. A felhasználónak látnia kell, hogy az érintés regisztrálásra került: színváltozás, opacity, ripple animáció vagy highlight. Visszajelzés nélkül a felhasználó újra megnyomhatja, ami nem kívánt műveleteket okoz. iOS-ben a szabványos touch highlight animáció — átlátszóság változás 0.3-ra 0.15 s időtartammal. Androidban — a Material ripple effektus, amely az érintési pontból terjed. Ne használjon késleltetést a vizuális visszajelzés előtt — a felhasználónak az érintéssel egyidejűleg kell látnia a reakciót.