Przesunięcie w aplikacjach mobilnych — typy gestów i implementacja

Czym jest przesunięcie w interfejsach mobilnych

Przesunięcie (swipe) — to gest, w którym użytkownik przesuwa palcem po ekranie w określonym kierunku, inicjując działanie. W przeciwieństwie do tapnięcia (krótkie dotknięcie), przesunięcie obejmuje ruch i kontakt z ekranem przez cały czas trwania gestu.

Historia przesunięcia zaczęła się od pierwszego iPhone’a w 2007 roku — gest odblokowania „slide to unlock” stał się wizytówką interfejsów mobilnych. Dziś przesunięcie jest używane w tysiącach aplikacji do nawigacji, zarządzania treścią i organizacji informacji.

Według UX Planet (2025), aplikacje z obsługą gestów (w tym przesunięcia) wykazują o 18% wyższe zaangażowanie użytkowników. Przesunięcie jest postrzegane jako bardziej naturalne działanie w porównaniu z naciśnięciem przycisku, ponieważ imituje fizyczne przemieszczanie obiektów.

Parametry rozpoznawania przesunięcia

Podstawowe parametry, które określają, czy gest jest przesunięciem: minimalna odległość (zwykle 30–50 pikseli), maksymalne odchylenie od linii prostej (nie więcej niż 15–20 stopni) i maksymalny czas kontaktu (do 500 ms). Jeśli palec zatrzyma się na ekranie dłużej, gest jest klasyfikowany jako przeciąganie (drag) lub długie naciśnięcie (long press).

Typy przesunięć według kierunku

Według kierunku ruchu przesunięcia dzielą się na cztery podstawowe typy: w lewo, w prawo, w górę i w dół. Każdy typ ma swoje przeznaczenie i kontekst użycia.

Przesunięcia poziome (w lewo/prawo) są najczęściej używane do zarządzania pojedynczymi elementami — usuwaniem, archiwizacją, przewijaniem. Przesunięcia pionowe (w górę/dół) — do nawigacji między ekranami i odświeżania treści. Według Material Design Guidelines (2024), poziome przesunięcie jest wygodniejsze dla praworęcznych: ruch w lewo kciukiem jest bardziej naturalny na prawej ręce.

Przesunięcia wielopalcowe

Przesunięcia dwoma i trzema palcami są używane do zaawansowanych działań. Dwoma palcami — przełączanie między pulpami na iPadzie, cofanie czynności (three-finger swipe). Trzema palcami — zrzut ekranu na niektórych urządzeniach. Jednak gesty wielopalcowe są mniej intuicyjne i wymagają nauki przez użytkownika.

Implementacja przesunięcia na iOS

Na iOS obsługa gestów opiera się na UIGestureRecognizer — abstrakcyjnej klasie, która analizuje sekwencję zdarzeń dotykowych i określa, czy odpowiada ona konkretnemu gestowi.

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("Przesuń w lewo")
    }
}

UISwipeGestureRecognizer obsługuje konfigurację kierunku (direction) i liczby palców (numberOfTouchesRequired). Domyślnie wymagany jest jeden palec i kierunek w prawo. Do określenia innych kierunków należy jawnie ustawić direction: .left, .up, .down.

API wyższego poziomu — UICollectionViewLayout z obsługą akcji przesunięcia. Począwszy od iOS 11, tabele i kolekcje obsługują wbudowane akcje przesunięcia przez UISwipeActionsConfiguration, co pozwala dodać przyciski usuwania lub archiwizacji bez ręcznej obsługi gestów.

Implementacja przesunięcia na Android

Na Android obsługa przesunięć odbywa się przez GestureDetector — klasę, która analizuje MotionEvents i wywołuje odpowiednie metody callback.

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("Przesuń w prawo")
                }
                return true
            }
        })
    }
}

Metoda onFling w GestureDetector jest wywoływana, gdy użytkownik szybko przesuwa palcem po ekranie. Otrzymuje początkowe i końcowe współrzędne (e1, e2) oraz prędkość ruchu (velocityX, velocityY). Do określenia kierunku porównuje się różnicę współrzędnych na osi X lub Y.

Biblioteka AndroidX zapewnia wygodniejsze API: ViewCompat.setSwipeRefreshLayout do pull-to-refresh, RecyclerView z ItemTouchHelper do akcji przesunięcia na listach. ItemTouchHelper pozwala dodawać funkcjonalność przesunięcia z wizualnym sprzężeniem zwrotnym — ikoną, kolorem tła i animacją.

Przesunięcie w aplikacjach webowych

W rozwoju webowym do obsługi przesunięć używane są zdarzenia Touch Events API (touchstart, touchmove, touchend) oraz biblioteki pomocnicze, takie jak Hammer.js czy 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 ? "Przesuń w prawo" : "Przesuń w lewo");
    }
});

Touch Events API — natywny sposób obsługi gestów w przeglądarce. Zdarzenie touchstart rejestruje początkowe współrzędne, touchmove śledzi ruch, touchend określa wynik. Wartość progowa (threshold) odfiltrowuje przypadkowe dotknięcia.

Według Can I Use (2026), Touch Events API jest obsługiwany przez 98% przeglądarek. Do złożonych scenariuszy gestów (wielokrotne przesunięcia, rozpoznawanie kierunku) zaleca się użycie biblioteki Hammer.js, która abstrahuje niskopoziomową obsługę i udostępnia przejrzyste API.

Wzorce UX z przesunięciem

Udane wzorce UX z przesunięciem ukształtowały się przez lata ewolucji interfejsów mobilnych. Ich użycie gwarantuje, że użytkownik zrozumie, jak działa gest, bez dodatkowej nauki.

Wzorzec „Swipe to Delete” — najpopularniejszy. Przesunięcie w lewo po elemencie listy otwiera przycisk usuwania. Standaryzowany na iOS (SwipeActionsConfiguration) i Android (ItemTouchHelper). Użytkownicy oczekują, że przesunięcie w lewo usuwa lub archiwizuje element.

Wzorzec „Swipe to Go Back” — przesunięcie od lewej krawędzi ekranu do powrotu na poprzedni ekran. Stał się standardem w iOS po iPhonie X. Na Android podobna nawigacja działa przez systemowy gest. Ważne, aby nie konfliktować z tym systemowym gestem w swoich aplikacjach.

Wzorzec „Pull to Refresh” — przesunięcie w dół do odświeżenia treści. Wynaleziony przez Lorena Brichtera dla Tweetie (2008), obecnie używany w milionach aplikacji. Zaimplementowany w standardowych komponentach obu platform.

• Sprzężenie zwrotne — element powinien poruszać się wraz z palcem, pokazując rezultat przed zakończeniem przesunięcia
• Konflikty gestów — unikaj jednoczesnej obsługi poziomego przesunięcia i przewijania na tym samym elemencie
• Wykrywalność — pierwsze akcje przesunięcia powinny być wspierane wizualną podpowiedzią
• Anulowanie — użytkownik powinien mieć możliwość anulowania przesunięcia, wracając palcem do pozycji początkowej