Swipe: wat is het, verwerking van swipes in mobiele ontwikkeling

Wat is swipe?

Swipe is een snelle glijdende beweging van de vinger over het scherm, eindigend met loslaten. Swipe kan kort (een element scrollen) of lang (een gordijn openen) zijn, maar het belangrijkste kenmerk is discretie: het systeem herkent het als één gebeurtenis, niet als een continue reeks coördinaten.

Mobiele besturingssystemen bepalen swipe aan de hand van drie parameters: minimale afstand (drempel), minimale snelheid (velocity) en richting. Als de vinger langzaam beweegt of de afstand onvoldoende is, interpreteert het systeem het gebaar als panorameren (pan) of tap. Drempelwaarden verschillen tussen platforms: iOS gebruikt de constante UISwipeGestureRecognizer met een vaste drempel, Android — ViewConfiguration.getScaledTouchSlop(), die ~8–16 dp retourneert afhankelijk van de schermdichtheid.

Volgens Android Developers Documentation wordt onFling (swipe) in GestureDetector geactiveerd bij snelheden boven 100 px/s en afstanden vanaf 50px. Bij IT Sectr gebruiken we swipe voor navigatie (galerijen, kaartinterfaces, onboarding) — dit gebaar is intuïtief voor gebruikers van alle leeftijden.

Swipe vs panorameren: wat is het verschil?

Swipe en panorameren (pan/drag) zijn verschillende soorten gebaren, hoewel beide gebruik maken van vingerbeweging over het scherm. Swipe is discreet en betekent „voer één actie uit”, terwijl panorameren continu is en betekent „verplaats het object zolang de vinger op het scherm is”.

De keuze tussen swipe en panorameren hangt af van de taak. Voor acties op een element (verwijderen, archiveren, menu openen) gebruikt u swipe. Voor directe manipulatie (verplaatsen, schalen) — panorameren. Het combineren van gebaren op één element vereist require(toFail:) of aangepaste logica.

Swipe in iOS: UISwipeGestureRecognizer

UISwipeGestureRecognizer is een subklasse van UIGestureRecognizer die discrete swipe in een van vier richtingen herkent. In tegenstelling tot UIPanGestureRecognizer genereert het geen tussentijdse .changed-gebeurtenissen: bij herkenning wordt action exact één keer aangeroepen.

De eigenschap direction (UISwipeGestureRecognizer.Direction) bepaalt de gevolgde richting — .left, .right, .up, .down. Kan worden gecombineerd via een masker: [.left, .right] voor horizontale swipes. De eigenschap numberOfTouchesRequired bepaalt het aantal vingers — standaard 1. UISwipeGestureRecognizer heeft geen configureerbare afstandsdrempel — iOS gebruikt een ingebouwde waarde van ongeveer 20px, voldoende voor betrouwbare herkenning.

Omdat UISwipeGestureRecogniser een discrete herkenner is, conflicteert het niet met UIPanGestureRecognizer: bij langzame beweging wordt pan geactiveerd, bij snelle — swipe. Bij gelijktijdig bestaan met UITapGestureRecognizer op dezelfde view kan require(toFail:) nodig zijn om valse tap-herkenning te voorkomen.

Swipe in Android: GestureDetector

In Android is de belangrijkste API voor swipe-herkenning GestureDetector met de callback OnGestureListener, namelijk de methode onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY). GestureDetector analyseert de begin- en eindpositie van de vinger, de bewegingssnelheid langs de assen en de afstand, waarna het onFling aanroept bij overschrijding van drempels.

Minimale drempels worden geconfigureerd via ViewConfiguration: VelocityTracker.getMinVelocity() (~100 px/s) en ViewConfiguration.getScaledTouchSlop() (~8–16 dp). Aangepaste OnSwipeTouchListener is een veelgebruikt patroon dat de API vereenvoudigt: de ontwikkelaar hoeft richting en snelheid niet handmatig te berekenen. Android Support Library bevat geen ingebouwde „SwipeDetector”, dus een aangepaste wrapper is de standaardoplossing.

Voor swipe in lijsten raadt Google het gebruik van ItemTouchHelper.SimpleCallback uit RecyclerView aan, die gebaardetectie, animatie en onSwiped()-callbacks abstraheert. Bij IT Sectr gebruiken we een aangepaste SwipeListener voor ViewPager2 en kaartinterfaces — dit geeft controle over de swipe-gevoeligheid zonder prestatieverlies.

Swipe in lijsten: SwipeActions en ItemTouchHelper

Voor lijsten (UITableView, RecyclerView) bieden Apple en Google gespecialiseerde API’s die handmatige toevoeging van UISwipeGestureRecognizer vervangen. Deze API’s ondersteunen actieknoppen, aangepaste animatie en „veeg om te verwijderen”-gebaren — standaardpatronen van mobiele apps.

In iOS (11+) wordt UISwipeActionsConfiguration gebruikt: de methode tableView(_:leadingSwipeActionsConfigurationForRowAt:) retourneert een array van UIContextualAction — knoppen met titel, stijl (destructive, normal) en handler. Bijvoorbeeld „Verwijder” — .destructive met rode achtergrond, „Archief” — .normal met grijs. Het systeem animeert zelf het verschijnen van knoppen en roept het completion-blok aan na indrukken.

In Android wordt ItemTouchHelper.SimpleCallback aan RecyclerView bevestigd via ItemTouchHelper.attachToRecyclerView(). Parameters — richtingvlaggen (start, end, up, down) en callback onSwiped(viewHolder, direction). Binnen onSwiped wordt adapter.notifyItemRemoved(position) aangeroepen om het element met animatie te verwijderen. ItemTouchHelper verwerkt automatisch gebaren, conflicten met scrollen en het terugzetten van het element als de swipe niet is voltooid. Volgens Google I/O 2024 wordt ItemTouchHelper gebruikt in 70% van Android-apps met swipe-acties in lijsten.

Codevoorbeelden in Swift en Kotlin

Voorbeeld 1: Swipe naar links op iOS (Swift)

Voegt UISwipeGestureRecognizer toe aan view om terug te keren naar het vorige scherm. De code toont de minimale configuratie van de herkenner met richting .left.

import UIKit

class CardViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipeLeft(_:))
        )
        swipeLeft.direction = .left
        swipeLeft.numberOfTouchesRequired = 1
        view.addGestureRecognizer(swipeLeft)
    }

    @objc private func handleSwipeLeft(_: UISwipeGestureRecognizer) {
        guard let nav = navigationController else { return }
        if nav.viewControllers.count > 1 {
            nav.popViewController(animated: true)
        } else {
            nav.dismiss(animated: true)
        }
    }
}

De herkenner wordt gekoppeld aan de root-view van de controller. Controle van navigationController.viewControllers.count garandeert dat pop alleen wordt uitgevoerd als er een vorig scherm in de stack is. Voor modale controllers wordt dismiss gebruikt. De code vereist geen state-controle — UISwipeGestureRecognizer is discreet en roept action alleen aan bij succesvolle herkenning.

Voorbeeld 2: Swipe in Android (Kotlin) met aangepaste OnSwipeTouchListener

Implementeert een eenvoudige wrapper van GestureDetector die de veegrichting bepaalt en onSwipeLeft/Right-callbacks aanroept.

import android.content.Context
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View

open class OnSwipeTouchListener(context: Context) : View.OnTouchListener {

    private val gestureDetector = GestureDetector(context, GestureListener())

    override fun onTouch(v: View, event: MotionEvent): Boolean {
        return gestureDetector.onTouchEvent(event)
    }

    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {

        companion object {
            private const val SWIPE_THRESHOLD = 100
            private const val SWIPE_VELOCITY_THRESHOLD = 100
        }

        override fun onFling(
            e1: MotionEvent?,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
        ): Boolean {
            val diffX = e2.x - e1!!.x
            val diffY = e2.y - e1.y

            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (Math.abs(diffX) > SWIPE_THRESHOLD
                    && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD
                ) {
                    if (diffX > 0) onSwipeRight()
                    else onSwipeLeft()
                    return true
                }
            } else {
                if (Math.abs(diffY) > SWIPE_THRESHOLD
                    && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD
                ) {
                    if (diffY > 0) onSwipeDown()
                    else onSwipeUp()
                    return true
                }
            }
            return false
        }
    }

    open fun onSwipeLeft() {}
    open fun onSwipeRight() {}
    open fun onSwipeUp() {}
    open fun onSwipeDown() {}
}

OnSwipeTouchListener breidt SimpleOnGestureListener uit door onFling te implementeren. diffX/diffY bepalen de richting, SWIPE_THRESHOLD (100px) en SWIPE_VELOCITY_THRESHOLD (100 px/s) — drempels. Gebruik: view.setOnTouchListener(OnSwipeTouchListener(context).apply { onSwipeLeft = { dismiss() } }).

Voorbeeld 3: SwipeActions in iOS (UITableView)

Voegt een verwijderknop toe bij swipe naar links op een tabelcel. Gebruikt de ingebouwde API van iOS 11+ zonder handmatige gebaarherkenning.

func tableView(
    _ tableView: UITableView,
    trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(
        style: .destructive,
        title: "Verwijder"
    ) { _, _, completionHandler in
        items.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
        completionHandler(true)
    }
    deleteAction.backgroundColor = .systemRed

    let config = UISwipeActionsConfiguration(actions: [deleteAction])
    config.performsFirstActionWithFullSwipe = true
    return config
}

De methode retourneert UISwipeActionsConfiguration met een array van UIContextualAction. style: .destructive stelt automatisch een rode achtergrond in. performsFirstActionWithFullSwipe = true maakt het mogelijk de actie uit te voeren met een volledige swipe zonder extra druk. Bij IT Sectr gebruiken we deze API voor alle lijsten met acties — het is gestandaardiseerd, ondersteunt VoiceOver en vereist geen aangepaste GestureRecognizers.