Swipe-în aplicațiile mobile — tipuri de gesturi și implementare

Ce este swipe-în interfețele mobile

Swipe este un gest în care utilizatorul glisează degetul pe ecran într-o direcție specifică, inițiind o acțiune. Spre deosebire de atingere (atingere scurtă), swipe implică mișcare și contact cu ecranul pe parcursul întregului gest.

Istoria swipe a început cu primul iPhone în 2007 — gestul de deblocare „slide to unlock” a devenit cartea de vizită a interfețelor mobile. Astăzi, swipe este folosit în mii de aplicații pentru navigare, gestionarea conținutului și organizarea informațiilor.

Potrivit UX Planet (2025), aplicațiile cu control gestual (inclusiv swipe) arată un angajament al utilizatorilor cu 18% mai mare. Swipe este perceput ca o acțiune mai naturală în comparație cu apăsarea unui buton, deoarece imită deplasarea fizică a obiectelor.

Parametrii de recunoaștere a swipe

Parametrii principali care determină dacă un gest este swipe: distanța minimă (de obicei 30–50 pixeli), abaterea maximă de la linia dreaptă (nu mai mult de 15–20 de grade) și durata maximă de contact (până la 500 ms). Dacă degetul rămâne pe ecran mai mult, gestul este clasificat ca tragere (drag) sau apăsare lungă (long press).

Tipuri de swipe după direcție

După direcția de mișcare swipe-urile se împart în patru tipuri principale: stânga, dreapta, sus și jos. Fiecare tip are propria destinație și context de utilizare.

Swipe-urile orizontale (stânga/dreapta) sunt cel mai des folosite pentru gestionarea elementelor individuale — ștergere, arhivare, derulare. Swipe-urile verticale (sus/jos) — pentru navigarea între ecrane și actualizarea conținutului. Potrivit Material Design Guidelines (2024), swipe-ul orizontal este mai comod pentru dreptaci: mișcarea la stânga cu degetul mare este mai naturală pe mâna dreaptă.

Swipe-uri cu mai multe degete

Swipe-urile cu două și trei degete sunt folosite pentru acțiuni avansate. Cu două degete — comutarea între birourile de lucru pe iPad, anularea acțiunii (three-finger swipe). Cu trei degete — captură de ecran pe unele dispozitive. Cu toate acestea, gesturile cu mai multe degete sunt mai puțin intuitive și necesită învățare din partea utilizatorului.

Implementarea swipe pe iOS

Pe iOS gestionarea gesturilor se bazează pe UIGestureRecognizer — o clasă abstractă care analizează secvența de evenimente tactile și determină dacă aceasta corespunde unui anumit gest.

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("Glisați la stânga")
    }
}

UISwipeGestureRecognizer acceptă configurarea direcției (direction) și a numărului de degete (numberOfTouchesRequired). În mod implicit, este necesar un deget și direcția dreapta. Pentru a determina alte direcții, trebuie să specificați explicit direction: .left, .up, .down.

API de nivel superior — UICollectionViewLayout cu suport pentru acțiuni swipe. Începând cu iOS 11, tabelele și colecțiile acceptă acțiuni swipe încorporate prin UISwipeActionsConfiguration, permițând adăugarea butoanelor de ștergere sau arhivare fără gestionarea manuală a gesturilor.

Implementarea swipe pe Android

Pe Android gestionarea swipe-urilor se face prin GestureDetector — o clasă care analizează MotionEvents și apelează metodele callback corespunzătoare.

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("Glisați la dreapta")
                }
                return true
            }
        })
    }
}

Metoda onFling în GestureDetector este apelată atunci când utilizatorul glisează rapid degetul pe ecran. Aceasta primește coordonatele inițiale și finale (e1, e2) și viteza de mișcare (velocityX, velocityY). Pentru a determina direcția, se compară diferența de coordonate pe axa X sau Y.

Biblioteca AndroidX oferă un API mai convenabil: ViewCompat.setSwipeRefreshLayout pentru pull-to-refresh, RecyclerView cu ItemTouchHelper pentru acțiuni swipe în liste. ItemTouchHelper permite adăugarea funcționalității swipe cu feedback vizual — pictogramă, culoare de fundal și animație.

Swipe în aplicațiile web

în dezvoltarea web pentru gestionarea swipe-urilor se folosesc evenimentele Touch Events API (touchstart, touchmove, touchend) și biblioteci ajutătoare precum Hammer.js sau 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 ? "Glisați la dreapta" : "Glisați la stânga");
    }
});

Touch Events API — modul nativ de gestionare a gesturilor în browser. Evenimentul touchstart înregistrează coordonatele inițiale, touchmove urmărește mișcarea, touchend determină rezultatul. Valoarea de prag (threshold) filtrează atingerile accidentale.

Potrivit Can I Use (2026), Touch Events API este acceptat de 98% dintre browsere. Pentru scenarii complexe de gesturi (swipe-uri multiple, recunoașterea direcției) se recomandă utilizarea bibliotecii Hammer.js, care abstractizează procesarea de nivel scăzut și oferă un API clar.

Pattern-uri UX cu swipe

Pattern-urile UX de succes cu swipe s-au format de-a lungul anilor de evoluție a interfețelor mobile. Utilizarea lor garantează că utilizatorul va înțelege cum funcționează gestul fără instruire suplimentară.

Pattern-ul „Swipe to Delete” — cel mai răspândit. Glisarea la stânga pe un element de listă deschide butonul de ștergere. Standardizat pe iOS (SwipeActionsConfiguration) și Android (ItemTouchHelper). Utilizatorii se așteaptă ca glisarea la stânga să șteargă sau să arhiveze elementul.

Pattern-ul „Swipe to Go Back” — glisarea de la marginea stângă a ecranului pentru a reveni la ecranul anterior. A devenit standard în iOS după iPhone X. Pe Android, navigarea similară funcționează printr-un gest de sistem. Este important să nu intrați în conflict cu acest gest de sistem în aplicațiile dvs.

Pattern-ul „Pull to Refresh” — glisarea în jos pentru actualizarea conținutului. Inventat de Loren Brichter pentru Tweetie (2008), acum folosit în milioane de aplicații. Implementat în componentele standard ale ambelor platforme.

• Feedback — elementul trebuie să se miște odată cu degetul, arătând rezultatul înainte de finalizarea swipe-ului
• Conflicte de gesturi — evitați suportul simultan al swipe-ului orizontal și al derulării pe același element
• Detectabilitate — primele acțiuni swipe trebuie să fie însoțite de un indiciu vizual
• Anulare — utilizatorul trebuie să aibă posibilitatea de a anula swipe-ul, revenind cu degetul în poziția inițială