Gesture Navigation — cara kerjanya, jenis dan implementasi

Apa itu Gesture Navigation

Gesture Navigation — adalah metode interaksi pengguna dengan perangkat mobile melalui urutan sentuhan, gerakan, dan tekanan yang dikenali oleh layar sentuh. Berbeda dengan tombol tradisional, gesture tidak memiliki posisi tetap di layar dan dikenali berdasarkan pola gerakan: swipe dari tepi, pinch dengan dua jari, tekan lama.

Transisi ke navigasi gesture dimulai dengan iPhone X (2017), di mana Apple sepenuhnya menghilangkan tombol Home, menggantinya dengan swipe dari tepi bawah. Google mengikuti tren di Android 10 (2020), menawarkan pengguna pilihan: navigasi tiga tombol, navigasi dua tombol, dan navigasi gesture penuh. Menurut StatCounter (2025), lebih dari 75% perangkat Android dan 95% perangkat iOS menggunakan navigasi gesture.

Secara arsitektur, pengenalan gesture terdiri dari tiga tahap: Capture (menangkap peristiwa sentuh), Recognition (menentukan pola gerakan), dan Action (mengeksekusi tindakan yang ditentukan). Di tingkat sistem, Android dan iOS memiliki pemroses bawaan untuk gesture navigasi dasar — swipe kembali, pergi ke layar utama, membuka pengalih aplikasi. Pengembang hanya perlu mengintegrasikan gesture mereka dengan benar ke dalam sistem ini.

Jenis gesture dalam navigasi mobile

Semua gesture sentuh dapat dibagi menjadi tiga kategori berdasarkan tujuan dan cara pelaksanaannya. Setiap jenis memiliki aturan pemrosesan dan rekomendasi sendiri untuk digunakan dalam antarmuka.

Gesture navigasi

Gesture navigasi mengontrol perpindahan antar layar: swipe dari tepi kiri untuk kembali (iOS), swipe ke atas untuk membuka pengalih aplikasi, swipe dari tepi bawah untuk kembali ke layar utama. Gesture ini diproses oleh sistem di tingkat Window dan tidak boleh bertentangan dengan gesture pengguna di dalam aplikasi.

Gesture manipulasi

Gesture manipulasi mengubah posisi, ukuran, atau orientasi objek di layar. Pinch (memperbesar dengan dua jari), Rotate (memutar), Pan (menyeret), Swipe (menggesek cepat untuk menggulir) — semua gesture ini diproses di tingkat View atau Composabale dan tidak memengaruhi navigasi sistem.

Gesture kontekstual

Gesture kontekstual mengaktifkan fungsi tambahan tanpa berpindah ke layar lain. Long press (tekan lama untuk menu kontekstual), Double tap (ketuk dua kali untuk like atau zoom), Edge swipe (gesek dari tepi untuk membuka Drawer). Gesture ini memerlukan implementasi yang paling hati-hati karena dapat tumpang tindih dengan gesture navigasi sistem.

Gesture Navigation di Android: GestureDetector dan MotionEvent

Android SDK menyediakan sistem pemrosesan gesture bertingkat, mulai dari MotionEvent tingkat rendah hingga GestureDetector dan GestureOverlayView tingkat tinggi. Pemilihan tingkat yang tepat tergantung pada kompleksitas gesture dan kebutuhan kinerja.

GestureDetector — kelas dasar

GestureDetector — adalah kelas tingkat tinggi yang mengubah urutan MotionEvent menjadi gesture spesifik: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Pengembang menimpa metode yang diperlukan dari GestureDetector.SimpleOnGestureListener dan menerima peristiwa yang telah dikenali. GestureDetector direkomendasikan untuk semua gesture standar, kecuali zoom — untuk itu ada ScaleGestureDetector.

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

TouchDelegate untuk target khusus

TouchDelegate — mekanisme untuk memperluas area sentuh untuk View. Digunakan ketika elemen target lebih kecil dari ukuran sentuh minimum 48dp. Misalnya, tombol kecil “Tutup” di sudut layar mendapatkan TouchDelegate yang memperluas area sentuhnya tanpa mengubah ukuran yang terlihat. Google merekomendasikan TouchDelegate untuk semua elemen interaktif yang lebih kecil dari 48x48dp.

Gesture di Jetpack Compose

Compose menyediakan pengubah untuk pemrosesan gesture: clickable, draggable, swipeable, combinedClickable (untuk double tap dan long press). Secara internal, Compose menggunakan PointerInputScope untuk pemrosesan tingkat rendah, tetapi bagi sebagian besar pengembang, pengubah tingkat tinggi sudah cukup. Untuk gesture khusus, digunakan pointerInput dengan awaitPointerEvent.

Gesture Navigation di iOS: UIGestureRecognizer dan SwiftUI

iOS SDK menggunakan arsitektur UIGestureRecognizer — kelas dasar abstrak yang menganalisis urutan UITouch dan menentukan apakah itu sesuai dengan gesture yang dikenal. Apple merekomendasikan untuk menggunakan recognizer standar di mana pun memungkinkan, dan hanya untuk gesture unik membuat subkelas khusus.

UIGestureRecognizer di UIKit

UIKit menyediakan satu set recognizer siap pakai: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Setiap recognizer memiliki status (possible, began, changed, ended, cancelled, failed) — pengembang melacak status untuk bereaksi pada berbagai tahap gesture.

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

Gesture di SwiftUI

SwiftUI menggunakan pengubah gesture deklaratif, mirip dengan Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. SwiftUI secara otomatis menangani konflik antar gesture melalui simultaneousGesture, sequencedGesture dan exclusiveGesture — pengubah yang menentukan prioritas gesture saat aktivasi bersamaan.

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — recognizer sistem yang mengelola swipe kembali di UINavigationController. Secara default, ia aktif untuk semua layar kecuali layar root. Jika aplikasi Anda menggunakan NavigationBar khusus, interactivePopGestureRecognizer mungkin berhenti bekerja — diperlukan aktivasi terprogram melalui navigationController.interactivePopGestureRecognizer?.delegate.

Konflik gesture sistem dan pengguna

Konflik gesture — salah satu masalah paling sulit dalam navigasi gesture. Ketika gesture pengguna (misalnya, membuka Drawer dengan swipe dari tepi kiri) tumpang tindih dengan gesture sistem (swipe kembali di iOS atau Android), sistem harus menentukan gesture mana yang memiliki prioritas. Penanganan konflik ini dengan benar sangat penting untuk UX.

Solusi di Android: Insets dan SystemGestureExclusionRects

Android 10+ memungkinkan aplikasi untuk menyediakan area layar untuk gesture-nya sendiri melalui WindowInsets. Gunakan ViewCompat.setSystemGestureExclusionRects untuk menunjukkan wilayah di mana gesture sistem tidak boleh berfungsi. Misalnya, untuk Drawer di kiri, Anda dapat mengecualikan tepi kiri layar (lebar hingga 200dp) dari swipe kembali sistem. Google menetapkan batas: hingga 200dp di setiap sisi dapat dikecualikan.

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

Solusi di iOS: UIGestureRecognizerDelegate

iOS menyediakan metode gestureRecognizerShouldBegin di UIGestureRecognizerDelegate, yang memungkinkan recognizer khusus untuk memutuskan apakah akan memulai pengenalan. Untuk swipe Drawer dari tepi kiri, Anda dapat memeriksa posisi sentuhan: jika pengguna menarik Drawer (jarak lebih besar dari threshold), gesture khusus mengambil alih kendali. Jika gesture tidak dikenali, sistem mengembalikan kendali ke InteractivePopGestureRecognizer.

Kesalahan umum dan praktik terbaik

Gesture Navigation memerlukan perancangan yang cermat, terutama pada perangkat dengan navigasi gesture sistem. Mari kita lihat kesalahan umum dan rekomendasi untuk mengatasinya.

Kesalahan: mengabaikan zona konflik di tepi layar

Kesalahan paling umum — menempatkan elemen interaktif atau mengimplementasikan swipe khusus di zona gesture sistem (tepi kiri dan kanan, tepi bawah). Pengguna mencoba melakukan tindakan, tetapi sebaliknya navigasi sistem teraktivasi. Selalu sediakan ruang untuk gesture sistem dan tangani konflik melalui exclusion rects.

Kesalahan: kecepatan pengenalan berbeda di Android dan iOS

Parameter gesture (velocity threshold, minimum distance) secara default berbeda antar platform. Jika aplikasi Anda lintas platform, jangan menyalin parameter dari satu platform ke platform lain — uji setiap gesture secara terpisah di Android dan iOS. Flutter dan React Native secara otomatis menyesuaikan beberapa parameter, tetapi tidak semua.

Praktik terbaik: umpan balik visual

Setiap gesture harus disertai dengan umpan balik visual: perubahan warna, transformasi, animasi. Pengguna harus memahami bahwa gesture telah dikenali dan tindakan sedang dijalankan. Di iOS, recognizer sistem secara otomatis memberikan umpan balik haptic, di Android harus ditambahkan melalui HapticFeedbackConstants.

Praktik terbaik: aksesibilitas untuk gesture

Tidak semua pengguna dapat melakukan gesture — orang dengan keterbatasan motorik menggunakan VoiceOver dan TalkBack untuk navigasi. Untuk setiap gesture harus ada alternatif tombol. Google dan Apple mewajibkan semua tindakan gesture untuk diduplikasi oleh elemen kontrol yang dapat diakses.