Gesture Navigation — πώς είναι δομημένο, τύποι και υλοποίηση

Τι είναι το Gesture Navigation

Gesture Navigation — είναι μια μέθοδος αλληλεπίδρασης του χρήστη με μια κινητή συσκευή μέσω ακολουθιών αφής, κινήσεων και πιέσεων που αναγνωρίζονται από την οθόνη αφής. Σε αντίθεση με τα παραδοσιακά κουμπιά, οι χειρονομίες δεν έχουν σταθερή θέση στην οθόνη και αναγνωρίζονται βάσει του μοτίβου κίνησης: swipe από την άκρη, pinch με δύο δάχτυλα, παρατεταμένο πάτημα.

Η μετάβαση στην πλοήγηση με χειρονομίες ξεκίνησε με το iPhone X (2017), όπου η Apple αφαίρεσε εντελώς το κουμπί Home, αντικαθιστώντας το με swipe από το κάτω άκρο. Η Google ακολούθησε την τάση στο Android 10 (2020), προσφέροντας στους χρήστες επιλογή: πλοήγηση με τρία κουμπιά, πλοήγηση με δύο κουμπιά και πλήρης πλοήγηση με χειρονομίες. Σύμφωνα με το StatCounter (2025), πάνω από το 75% των συσκευών Android και το 95% των συσκευών iOS χρησιμοποιούν πλοήγηση με χειρονομίες.

Αρχιτεκτονικά, η αναγνώριση χειρονομιών αποτελείται από τρία στάδια: Capture (καταγραφή συμβάντων αφής), Recognition (προσδιορισμός μοτίβου κίνησης) και Action (εκτέλεση της εκχωρημένης ενέργειας). Σε συστημικό επίπεδο, τα Android και iOS διαθέτουν ενσωματωμένους επεξεργαστές για βασικές χειρονομίες πλοήγησης — swipe πίσω, μετάβαση στην αρχική οθόνη, άνοιγμα εναλλαγής εφαρμογών. Ο προγραμματιστής χρειάζεται μόνο να ενσωματώσει σωστά τις χειρονομίες του σε αυτό το σύστημα.

Τύποι χειρονομιών στην κινητή πλοήγηση

Όλες οι απτικές χειρονομίες μπορούν να χωριστούν σε τρεις κατηγορίες ανάλογα με τον σκοπό και τον τρόπο εκτέλεσης. Κάθε τύπος έχει τους δικούς του κανόνες επεξεργασίας και συστάσεις για χρήση στη διεπαφή.

Χειρονομίες πλοήγησης

Οι χειρονομίες πλοήγησης ελέγχουν τη μετακίνηση μεταξύ οθονών: swipe από το αριστερό άκρο για επιστροφή (iOS), swipe προς τα πάνω για άνοιγμα εναλλαγής εφαρμογών, swipe από το κάτω άκρο για επιστροφή στην αρχική οθόνη. Αυτές οι χειρονομίες υποβάλλονται σε επεξεργασία από το σύστημα σε επίπεδο Window και δεν θα πρέπει να έρχονται σε σύγκρουση με τις χειρονομίες του χρήστη εντός της εφαρμογής.

Χειρονομίες χειρισμού

Οι χειρονομίες χειρισμού αλλάζουν τη θέση, το μέγεθος ή τον προσανατολισμό των αντικειμένων στην οθόνη. Pinch (κλιμάκωση με δύο δάχτυλα), Rotate (περιστροφή), Pan (σύρσιμο), Swipe (γρήγορο swipe για κύλιση) — όλες αυτές οι χειρονομίες υποβάλλονται σε επεξεργασία σε επίπεδο View ή Composabale και δεν επηρεάζουν τη συστημική πλοήγηση.

Χειρονομίες συμφραζομένων

Οι χειρονομίες συμφραζομένων ενεργοποιούν πρόσθετες λειτουργίες χωρίς μετάβαση σε άλλη οθόνη. Long press (παρατεταμένο πάτημα για μενού συμφραζομένων), Double tap (διπλό πάτημα για like ή μεγέθυνση), Edge swipe (swipe από την άκρη για άνοιγμα Drawer). Αυτές οι χειρονομίες απαιτούν την πιο προσεκτική υλοποίηση, καθώς μπορεί να επικαλύπτονται με συστημικές χειρονομίες πλοήγησης.

Gesture Navigation στο Android: GestureDetector και MotionEvent

Το Android SDK παρέχει ένα πολυεπίπεδο σύστημα επεξεργασίας χειρονομιών, από το χαμηλού επιπέδου MotionEvent έως το υψηλού επιπέδου GestureDetector και GestureOverlayView. Η σωστή επιλογή επιπέδου εξαρτάται από την πολυπλοκότητα της χειρονομίας και τις απαιτήσεις απόδοσης.

GestureDetector — η βασική κλάση

GestureDetector — είναι μια κλάση υψηλού επιπέδου που μετατρέπει μια ακολουθία MotionEvent σε συγκεκριμένες χειρονομίες: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Ο προγραμματιστής παρακάμπτει τις απαραίτητες μεθόδους του GestureDetector.SimpleOnGestureListener και λαμβάνει το έτοιμο αναγνωρισμένο συμβάν. Το GestureDetector συνιστάται για όλες τις τυπικές χειρονομίες, εκτός από την κλιμάκωση — για αυτήν υπάρχει το 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 για προσαρμοσμένους στόχους

TouchDelegate — ένας μηχανισμός επέκτασης της περιοχής αφής για View. Χρησιμοποιείται όταν το στοιχείο-στόχος είναι μικρότερο από το ελάχιστο μέγεθος αφής 48dp. Για παράδειγμα, ένα μικρό κουμπί “Κλείσιμο” στη γωνία της οθόνης λαμβάνει ένα TouchDelegate που επεκτείνει την περιοχή χτυπήματος χωρίς να αλλάζει το ορατό μέγεθος. Η Google συνιστά το TouchDelegate για όλα τα διαδραστικά στοιχεία μικρότερα από 48x48dp.

Χειρονομίες στο Jetpack Compose

Το Compose παρέχει τροποποιητές για την επεξεργασία χειρονομιών: clickable, draggable, swipeable, combinedClickable (για double tap και long press). Εσωτερικά, το Compose χρησιμοποιεί το PointerInputScope για επεξεργασία χαμηλού επιπέδου, αλλά για τους περισσότερους προγραμματιστές αρκούν οι τροποποιητές υψηλού επιπέδου. Για προσαρμοσμένες χειρονομίες χρησιμοποιείται το pointerInput με awaitPointerEvent.

Gesture Navigation στο iOS: UIGestureRecognizer και SwiftUI

Το iOS SDK χρησιμοποιεί την αρχιτεκτονική UIGestureRecognizer — μια αφηρημένη βασική κλάση που αναλύει μια ακολουθία UITouch και καθορίζει αν αντιστοιχεί σε μια γνωστή χειρονομία. Η Apple συνιστά τη χρήση τυπικών recognizer όπου είναι δυνατόν, και μόνο για μοναδικές χειρονομίες τη δημιουργία προσαρμοσμένων υποκλάσεων.

UIGestureRecognizer στο UIKit

Το UIKit παρέχει ένα σύνολο έτοιμων recognizer: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Κάθε recognizer έχει καταστάσεις (possible, began, changed, ended, cancelled, failed) — ο προγραμματιστής παρακολουθεί την κατάσταση για να αντιδράσει σε διαφορετικά στάδια της χειρονομίας.

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

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

Χειρονομίες στο SwiftUI

Το SwiftUI χρησιμοποιεί δηλωτικούς τροποποιητές χειρονομιών, παρόμοια με το Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. Το SwiftUI χειρίζεται αυτόματα τις συγκρούσεις μεταξύ χειρονομιών μέσω simultaneousGesture, sequencedGesture και exclusiveGesture — τροποποιητών που καθορίζουν την προτεραιότητα των χειρονομιών κατά την ταυτόχρονη ενεργοποίηση.

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

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer — ο συστημικός recognizer που διαχειρίζεται το swipe πίσω στο UINavigationController. Από προεπιλογή, είναι ενεργός για όλες τις οθόνες εκτός από την αρχική. Εάν η εφαρμογή σας χρησιμοποιεί προσαρμοσμένο NavigationBar, το interactivePopGestureRecognizer μπορεί να σταματήσει να λειτουργεί — θα απαιτηθεί προγραμματιστική ενεργοποίηση μέσω navigationController.interactivePopGestureRecognizer?.delegate.

Σύγκρουση συστημικών και χρηστικών χειρονομιών

Σύγκρουση χειρονομιών — ένα από τα πιο δύσκολα προβλήματα στην πλοήγηση με χειρονομίες. Όταν μια χειρονομία χρήστη (για παράδειγμα, άνοιγμα Drawer με swipe από το αριστερό άκρο) επικαλύπτεται με μια συστημική χειρονομία (swipe πίσω σε iOS ή Android), το σύστημα πρέπει να καθορίσει ποια χειρονομία έχει προτεραιότητα. Η σωστή διαχείριση αυτής της σύγκρουσης είναι κρίσιμη για την εμπειρία χρήστη.

Λύση στο Android: Insets και SystemGestureExclusionRects

Android 10+ επιτρέπει στην εφαρμογή να δεσμεύσει περιοχές οθόνης για τις δικές της χειρονομίες μέσω WindowInsets. Χρησιμοποιήστε το ViewCompat.setSystemGestureExclusionRects για να υποδείξετε περιοχές όπου οι συστημικές χειρονομίες δεν πρέπει να λειτουργούν. Για παράδειγμα, για ένα Drawer στα αριστερά, μπορείτε να εξαιρέσετε το αριστερό άκρο της οθόνης (πλάτος έως 200dp) από το συστημικό swipe πίσω. Η Google έχει θέσει όριο: έως 200dp σε κάθε πλευρά μπορούν να εξαιρεθούν.

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

Λύση στο iOS: UIGestureRecognizerDelegate

Το iOS παρέχει τη μέθοδο gestureRecognizerShouldBegin στο UIGestureRecognizerDelegate, η οποία επιτρέπει στον προσαρμοσμένο recognizer να αποφασίσει αν πρέπει να ξεκινήσει την αναγνώριση. Για swipe Drawer από το αριστερό άκρο, μπορείτε να ελέγξετε τη θέση αφής: εάν ο χρήστης τραβά το Drawer (απόσταση μεγαλύτερη από threshold), η προσαρμοσμένη χειρονομία αναλαμβάνει τον έλεγχο. Εάν η χειρονομία δεν αναγνωριστεί, το σύστημα επιστρέφει τον έλεγχο στο InteractivePopGestureRecognizer.

Συνηθισμένα λάθη και βέλτιστες πρακτικές

Gesture Navigation απαιτεί προσεκτικό σχεδιασμό, ειδικά σε συσκευές με συστημική πλοήγηση με χειρονομίες. Ας εξετάσουμε τα συνηθισμένα λάθη και τις συστάσεις για την αντιμετώπισή τους.

Λάθος: αγνόηση ζωνών σύγκρουσης στα άκρα της οθόνης

Το πιο συνηθισμένο λάθος — τοποθέτηση διαδραστικών στοιχείων ή υλοποίηση προσαρμοσμένων swipe σε ζώνες συστημικών χειρονομιών (αριστερό και δεξί άκρο, κάτω άκρο). Ο χρήστης προσπαθεί να εκτελέσει μια ενέργεια, αλλά αντ' αυτού ενεργοποιείται η συστημική πλοήγηση. Πάντα να προβλέπετε χώρο για συστημικές χειρονομίες και να διαχειρίζεστε τις συγκρούσεις μέσω exclusion rects.

Λάθος: διαφορετική ταχύτητα αναγνώρισης σε Android και iOS

Οι παράμετροι χειρονομιών (velocity threshold, minimum distance) διαφέρουν από προεπιλογή μεταξύ πλατφορμών. Εάν η εφαρμογή σας είναι跨πλατφορμική, μην αντιγράφετε παραμέτρους από τη μία πλατφόρμα στην άλλη — δοκιμάστε κάθε χειρονομία ξεχωριστά σε Android και iOS. Τα Flutter και React Native προσαρμόζουν αυτόματα ορισμένες παραμέτρους, αλλά όχι όλες.

Βέλτιστη πρακτική: οπτική ανατροφοδότηση

Κάθε χειρονομία πρέπει να συνοδεύεται από οπτική ανατροφοδότηση: αλλαγή χρώματος, μετασχηματισμός, κινούμενο σχέδιο. Ο χρήστης πρέπει να καταλάβει ότι η χειρονομία αναγνωρίστηκε και η ενέργεια εκτελείται. Στο iOS, οι συστημικοί recognizer παρέχουν αυτόματα απτική ανατροφοδότηση, στο Android πρέπει να προστεθεί μέσω HapticFeedbackConstants.

Βέλτιστη πρακτική: προσβασιμότητα για χειρονομίες

Δεν μπορούν όλοι οι χρήστες να εκτελούν χειρονομίες — άτομα με περιορισμένη κινητικότητα χρησιμοποιούν VoiceOver και TalkBack για πλοήγηση. Για κάθε χειρονομία πρέπει να υπάρχει εναλλακτική κουμπιού. Η Google και η Apple απαιτούν όλες οι ενέργειες χειρονομιών να αντιγράφονται από προσβάσιμα στοιχεία ελέγχου.