Swipe di Aplikasi Seluler — Jenis Gestur dan Implementasi

Apa itu swipe dalam antarmuka seluler

Swipe adalah gestur di mana pengguna menggesekkan jari di layar ke arah tertentu, memicu suatu tindakan. Berbeda dengan ketukan (sentuhan singkat), swipe melibatkan gerakan dan kontak dengan layar selama seluruh gestur.

Sejarah swipe dimulai dengan iPhone pertama pada tahun 2007 — gestur membuka kunci „slide to unlock” menjadi ciri khas antarmuka seluler. Saat ini swipe digunakan di ribuan aplikasi untuk navigasi, manajemen konten, dan organisasi informasi.

Menurut UX Planet (2025), aplikasi dengan kontrol gestur (termasuk swipe) menunjukkan keterlibatan pengguna 18% lebih tinggi. Swipe dianggap sebagai tindakan yang lebih alami dibandingkan menekan tombol, karena meniru perpindahan fisik objek.

Parameter pengenalan swipe

Parameter utama yang menentukan apakah suatu gestur adalah swipe: jarak minimum (biasanya 30–50 piksel), deviasi maksimum dari garis lurus (tidak lebih dari 15–20 derajat) dan durasi kontak maksimum (hingga 500 ms). Jika jari tertinggal di layar lebih lama, gestur diklasifikasikan sebagai seret (drag) atau tekan lama (long press).

Jenis swipe berdasarkan arah

Berdasarkan arah gerakan swipe dibagi menjadi empat jenis utama: kiri, kanan, atas, dan bawah. Setiap jenis memiliki tujuan dan konteks penggunaan sendiri.

Swipe horizontal (kiri/kanan) paling sering digunakan untuk mengelola elemen individual — menghapus, mengarsipkan, menggulir. Swipe vertikal (atas/bawah) — untuk navigasi antar layar dan memperbarui konten. Menurut Material Design Guidelines (2024), swipe horizontal lebih nyaman bagi pengguna tangan kanan: gerakan ke kiri dengan ibu jari lebih alami di tangan kanan.

Swipe multi-jari

Swipe dengan dua dan tiga jari digunakan untuk tindakan lanjutan. Dua jari — beralih antar desktop di iPad, batalkan tindakan (three-finger swipe). Tiga jari — tangkapan layar di beberapa perangkat. Namun, gestur multi-jari kurang intuitif dan memerlukan pembelajaran pengguna.

Implementasi swipe di iOS

Di iOS pemrosesan gestur dibangun di atas UIGestureRecognizer — kelas abstrak yang menganalisis urutan peristiwa sentuhan dan menentukan apakah itu sesuai dengan gestur tertentu.

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("Geser ke kiri")
    }
}

UISwipeGestureRecognizer mendukung konfigurasi arah (direction) dan jumlah jari (numberOfTouchesRequired). Secara default diperlukan satu jari dan arah kanan. Untuk menentukan arah lain, Anda perlu secara eksplisit mengatur direction: .left, .up, .down.

API tingkat lebih tinggi — UICollectionViewLayout dengan dukungan swipe actions. Mulai iOS 11, tabel dan koleksi mendukung swipe actions bawaan melalui UISwipeActionsConfiguration, yang memungkinkan penambahan tombol hapus atau arsip tanpa pemrosesan gestur manual.

Implementasi swipe di Android

Di Android pemrosesan swipe dilakukan melalui GestureDetector — kelas yang menganalisis MotionEvents dan memanggil metode callback yang sesuai.

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("Geser ke kanan")
                }
                return true
            }
        })
    }
}

Metode onFling di GestureDetector dipanggil ketika pengguna menggesekkan jari dengan cepat di layar. Ia menerima koordinat awal dan akhir (e1, e2) serta kecepatan gerakan (velocityX, velocityY). Untuk menentukan arah, perbedaan koordinat pada sumbu X atau Y dibandingkan.

Pustaka AndroidX menyediakan API yang lebih nyaman: ViewCompat.setSwipeRefreshLayout untuk pull-to-refresh, RecyclerView dengan ItemTouchHelper untuk swipe actions di daftar. ItemTouchHelper memungkinkan penambahan fungsionalitas swipe dengan umpan balik visual — ikon, warna latar belakang, dan animasi.

Swipe di aplikasi web

Dalam pengembangan web untuk pemrosesan swipe digunakan peristiwa Touch Events API (touchstart, touchmove, touchend) dan pustaka pembantu seperti Hammer.js atau 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 ? "Geser ke kanan" : "Geser ke kiri");
    }
});

Touch Events API — cara native untuk menangani gestur di browser. Peristiwa touchstart mencatat koordinat awal, touchmove melacak gerakan, touchend menentukan hasil. Nilai ambang (threshold) menyaring sentuhan acak.

Menurut Can I Use (2026), Touch Events API didukung oleh 98% browser. Untuk skenario gestur kompleks (banyak swipe, pengenalan arah) disarankan menggunakan pustaka Hammer.js, yang mengabstraksi pemrosesan tingkat rendah dan menyediakan API yang jelas.

Pola UX dengan swipe

Pola UX yang sukses dengan swipe terbentuk selama bertahun-tahun evolusi antarmuka seluler. Penggunaannya menjamin bahwa pengguna akan memahami cara kerja gestur tanpa pembelajaran tambahan.

Pola „Swipe to Delete” — yang paling umum. Geser ke kiri pada elemen daftar membuka tombol hapus. Distandarisasi di iOS (SwipeActionsConfiguration) dan Android (ItemTouchHelper). Pengguna mengharapkan bahwa geser ke kiri menghapus atau mengarsipkan elemen.

Pola „Swipe to Go Back” — geser dari tepi kiri layar untuk kembali ke layar sebelumnya. Menjadi standar di iOS setelah iPhone X. Di Android, navigasi serupa bekerja melalui gestur sistem. Penting untuk tidak bertentangan dengan gestur sistem ini di aplikasi Anda.

Pola „Pull to Refresh” — geser ke bawah untuk memperbarui konten. Ditemukan oleh Loren Brichter untuk Tweetie (2008), sekarang digunakan di jutaan aplikasi. Diimplementasikan dalam komponen standar kedua platform.

• Umpan balik — elemen harus bergerak bersama jari, menunjukkan hasil sebelum swipe selesai
• Konflik gestur — hindari dukungan simultan swipe horizontal dan gulir pada elemen yang sama
• Keterdeteksian — tindakan swipe pertama harus disertai petunjuk visual
• Pembatalan — pengguna harus memiliki kemampuan untuk membatalkan swipe dengan mengembalikan jari ke posisi awal