Swipe a mobilalkalmazásokban — gesztustípusok és megvalósítás

Mi az a swipe a mobil interfészekben

Swipe egy olyan gesztus, ahol a felhasználó az ujját egy meghatározott irányba húzza a képernyőn, ezzel elindítva egy műveletet. A koppintástól (rövid érintés) eltérően a swipe mozgást és folyamatos érintkezést jelent a képernyővel a gesztus teljes időtartama alatt.

A swipe története az első iPhone-nal kezdődött 2007-ben — a „slide to unlock” feloldó gesztus a mobil interfészek védjegyévé vált. Manapság a swipet navigációra, tartalomkezelésre és információrendszerezésre használják ezrek alkalmazásokban.

A UX Planet (2025) szerint a gesztusvezérléssel rendelkező alkalmazások (beleértve a swipet is) 18%-kal magasabb felhasználói elköteleződést mutatnak. A swipet természetesebb műveletnek érzékeljük a gombnyomáshoz képest, mivel az objektumok fizikai mozgatását utánozza.

A swipe felismerésének paraméterei

A fő paraméterek, amelyek meghatározzák, hogy egy gesztus swip-e: minimális távolság (általában 30–50 pixel), maximális eltérés az egyenes vonaltól (legfeljebb 15–20 fok) és maximális érintkezési időtartam (500 ms-ig). Ha az ujj tovább marad a képernyőn, a gesztust húzásként (drag) vagy hosszú nyomásként (long press) osztályozzuk.

Swip típusok irány szerint

Mozgási irány szerint a swip-ek négy alapvető típusra oszlanak: balra, jobbra, fel és le. Minden típusnak megvan a maga célja és használati kontextusa.

Vízszintes swip-ek (balra/jobbra) leggyakrabban egyedi elemek kezelésére használhatók — törlés, archiválás, lapozás. Függőleges swip-ek (fel/le) — képernyők közötti navigációra és tartalom frissítésére. A Material Design Guidelines (2024) szerint a vízszintes swipe kényelmesebb a jobbkezesek számára: a húvejkővel balra mozdulat természetesebb a jobb kézen.

Többujjas swip-ek

Két és három ujjal végzett swip-ek haladó műveletekhez használhatók. Két ujjal — asztalok váltása iPad-en, művelet visszavonása (three-finger swipe). Három ujjal — képernyőkép néhány eszközön. A többujjas gesztusok azonban kevésbé intuitívak és tanulást igényelnek a felhasználótól.

Swip megvalósítása iOS-en

iOS-en a gesztuskezelés az UIGestureRecognizer-en alapul — egy absztrakt osztályon, amely elemzi az érintési események sorozatát és meghatározza, hogy az megfelel-e egy adott gesztusnak.

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("Húzz balra")
    }
}

UISwipeGestureRecognizer támogatja az irány (direction) és az ujjak számának (numberOfTouchesRequired) beállítását. Alapértelmezésben egy ujj és jobb irány szükséges. Más irányok meghatározásához explicit módon meg kell adni a direction: .left, .up, .down értékeket.

Magasabb szintű API — UICollectionViewLayout swipe műveletek támogatásával. Az iOS 11-től kezdve a táblázatok és gyűjtemények beépített swipe műveleteket támogatnak az UISwipeActionsConfiguration segítségével, amely lehetővé teszi törlő vagy archiváló gombok hozzáadását kézi gesztuskezelés nélkül.

Swip megvalósítása Androidon

Androidon a swip-ek kezelése a GestureDetector-en keresztül történik — egy osztályon, amely elemzi a MotionEvents eseményeket és meghívja a megfelelő callback metódusokat.

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("Húzz jobbra")
                }
                return true
            }
        })
    }
}

Az onFling metódus a GestureDetector-ben akkor hívódik meg, amikor a felhasználó gyorsan húzza az ujját a képernyőn. Megkapja a kezdő és vég koordinátákat (e1, e2) és a mozgás sebességét (velocityX, velocityY). Az irány meghatározásához az X vagy Y tengely koordináta-különbségét hasonlítjuk össze.

AndroidX könyvtár kényelmesebb API-t nyújt: ViewCompat.setSwipeRefreshLayout pull-to-refreshhez, RecyclerView ItemTouchHelper-val a listákban végrehajtandó swipe műveletekhez. Az ItemTouchHelper lehetővé teszi a swipe funkció vizuális visszajelzéssel történő hozzáadását — ikon, háttérszín és animáció.

Swip webalkalmazásokban

A webfejlesztésben a swip-ek kezeléséhez a Touch Events API eseményeit (touchstart, touchmove, touchend) és segédkönyvtárakat, mint a Hammer.js vagy Swiper.js használjuk.

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 ? "Húzz jobbra" : "Húzz balra");
    }
});

Touch Events API — a gesztusok natív kezelésének módja a böngészőben. A touchstart esemény rögzíti a kezdő koordinátákat, a touchmove követi a mozgást, a touchend meghatározza az eredményt. A küszöbérték (threshold) kiszűri a véletlenszerű érintéseket.

A Can I Use (2026) szerint a Touch Events API-t a böngészők 98%-a támogatja. Összetett gesztus-forgatókönyvekhez (többszörös swip-ek, irányfelismerés) ajánlott a Hammer.js könyvtár használata, amely elvonatkoztatja az alacsony szintű feldolgozást és átlátható API-t kínál.

UX minták swippel

Sikeres UX minták swippel évek alatt alakultak ki a mobil interfészek fejlődése során. Használatuk garantálja, hogy a felhasználó további tanulás nélkül megértse a gesztus működését.

A „Swipe to Delete” minta — a leggyakoribb. A lista elemen balra húzás megnyitja a törlő gombot. Szabványosítva iOS-en (SwipeActionsConfiguration) és Androidon (ItemTouchHelper). A felhasználók elvárják, hogy a balra húzás törölje vagy archiválja az elemet.

A „Swipe to Go Back” minta — húzás a képernyő bal szélétől az előző képernyőre való visszatéréshez. Az iPhone X után szabvánnyá vált iOS-en. Androidon hasonló navigáció működik rendszergesztus segítségével. Fontos, hogy ne ütközzön ez a rendszergesztus az alkalmazásaiban.

A „Pull to Refresh” minta — lefelé húzás a tartalom frissítéséhez. Loren Brichter találta fel a Tweetie számára (2008), ma milliók alkalmazásban használják. Mindkét platform standard összetevőiben megvalósítva.

• Visszajelzés — az elemnek az ujjal együtt kell mozognia, mutatva az eredményt a swipe befejezése előtt
• Gesztus ütközések — kerülje a vízszintes swipe és a görgetés egyidejű támogatását ugyanazon az elemen
• Felfedezhetőség — az első swipe műveleteket vizuális útmutatóval kell kísérni
• Mégse — a felhasználónak lehetőséget kell adni a swipe visszavonására az ujj eredeti pozícióba való visszahelyezésével