Svep i mobila applikationer — typer av gester och implementering

Vad är svep i mobila gränssnitt

Svep (swipe) är en gest där användaren för fingret över skärmen i en specifik riktning och initierar en åtgärd. Till skillnad från tryckning (kort beröring) innebär svep rörelse och kontakt med skärmen under hela gesten.

Historien om svep började med den första iPhone 2007 — upplåsningsgesten „slide to unlock” blev kännetecknet för mobila gränssnitt. Idag används svep i tusentals applikationer för navigering, innehållshantering och informationsorganisation.

Enligt UX Planet (2025) visar applikationer med gestkontroll (inklusive svep) 18% högre användarengagemang. Svep uppfattas som en mer naturlig handling jämfört med att trycka på en knapp, eftersom det efterliknar fysisk förflyttning av objekt.

Parametrar för svepigenkänning

Huvudparametrar som bestämmer om en gest är ett svep: minimiavstånd (vanligtvis 30–50 pixlar), maximal avvikelse från en rak linje (högst 15–20 grader) och maximal kontakttid (upp till 500 ms). Om fingret stannar längre på skärmen klassificeras gesten som dragning (drag) eller lång tryckning (long press).

Typer av svep efter riktning

Efter rörelseriktning delas svep in i fyra huvudtyper: vänster, höger, upp och ner. Varje typ har sitt eget syfte och användningssammanhang.

Horisontella svep (vänster/höger) används oftast för att hantera enskilda element — borttagning, arkivering, bläddring. Vertikala svep (upp/ner) — för navigering mellan skärmar och uppdatering av innehåll. Enligt Material Design Guidelines (2024) är horisontellt svep bekvämare för högerhänta: rörelse åt vänster med tummen är mer naturlig på höger hand.

Flerfingersvep

Svep med två och tre fingrar används för avancerade åtgärder. Med två fingrar — växling mellan skrivbord på iPad, ångra åtgärd (three-finger swipe). Med tre fingrar — skärmdump på vissa enheter. Flerfingersgester är dock mindre intuitiva och kräver användarinlärning.

Implementering av svep på iOS

På iOS bygger gesthantering på UIGestureRecognizer — en abstrakt klass som analyserar sekvensen av touch-händelser och avgör om den motsvarar en specifik 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("Svep åt vänster")
    }
}

UISwipeGestureRecognizer stöder konfiguration av riktning (direction) och antal fingrar (numberOfTouchesRequired). Som standard krävs ett finger och riktning höger. För att bestämma andra riktningar måste du uttryckligen ange direction: .left, .up, .down.

API på högre nivå — UICollectionViewLayout med stöd för svepåtgärder. Från och med iOS 11 stöder tabeller och samlingar inbyggda svepåtgärder via UISwipeActionsConfiguration, vilket gör det möjligt att lägga till knappar för borttagning eller arkivering utan manuell gesthantering.

Implementering av svep på Android

På Android utförs svephantering via GestureDetector — en klass som analyserar MotionEvents och anropar motsvarande callback-metoder.

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("Svep åt höger")
                }
                return true
            }
        })
    }
}

Metoden onFling i GestureDetector anropas när användaren snabbt sveper fingret över skärmen. Den tar emot start- och slutkoordinater (e1, e2) samt rörelsehastighet (velocityX, velocityY). För att bestämma riktningen jämförs skillnaden i koordinater på X- eller Y-axeln.

AndroidX-biblioteket erbjuder ett bekvämare API: ViewCompat.setSwipeRefreshLayout för pull-to-refresh, RecyclerView med ItemTouchHelper för svepåtgärder i listor. ItemTouchHelper gör det möjligt att lägga till svepfunktionalitet med visuell återkoppling — ikon, bakgrundsfärg och animation.

Svep i webbapplikationer

I webbutveckling används Touch Events API-händelser (touchstart, touchmove, touchend) och hjälpbibliotek som Hammer.js eller Swiper.js för svephantering.

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 ? "Svep åt höger" : "Svep åt vänster");
    }
});

Touch Events API — det inbyggda sättet att hantera gester i webbläsaren. Händelsen touchstart registrerar startkoordinater, touchmove spårar rörelsen, touchend bestämmer resultatet. Tröskelvärdet (threshold) filtrerar bort oavsiktliga beröringar.

Enligt Can I Use (2026) stöds Touch Events API av 98% av webbläsarna. För komplexa gestscenarier (flera svep, riktningsigenkänning) rekommenderas att använda biblioteket Hammer.js, som abstraherar lågnivåbearbetning och erbjuder ett tydligt API.

UX-mönster med svep

Framgångsrika UX-mönster med svep har formats under år av utveckling av mobila gränssnitt. Deras användning garanterar att användaren förstår hur gesten fungerar utan ytterligare inlärning.

Mönstret „Swipe to Delete” — det vanligaste. Svep åt vänster på ett listelement öppnar borttagningsknappen. Standardiserat på iOS (SwipeActionsConfiguration) och Android (ItemTouchHelper). Användare förväntar sig att svep åt vänster tar bort eller arkiverar elementet.

Mönstret „Swipe to Go Back” — svep från skärmens vänstra kant för att återvända till föregående skärm. Blev standard på iOS efter iPhone X. På Android fungerar liknande navigering via en systemgest. Det är viktigt att inte konfliktera med denna systemgest i dina applikationer.

Mönstret „Pull to Refresh” — svep nedåt för att uppdatera innehåll. Uppfunnet av Loren Brichter för Tweetie (2008), används nu i miljontals applikationer. Implementerat i standardkomponenter för båda plattformarna.

• Återkoppling — elementet ska röra sig med fingret och visa resultatet innan svepet är klart
• Gestkonflikter — undvik samtidigt stöd för horisontellt svep och rullning på samma element
• Upptäckbarhet — första svepåtgärderna bör åtföljas av en visuell ledtråd
• Avbrytning — användaren ska ha möjlighet att avbryta svepet genom att återföra fingret till startpositionen