Tap: τι είναι, επεξεργασία αγγίγματος σε iOS και Android

Τι είναι το Tap;

Tap (άγγιγμα, πίεση) — η χειρονομία γρήγορης αφής της οθόνης αφής με το δάχτυλο ή στυλό. Η χειρονομία αποτελείται από δύο φάσεις: αφή (touch down) και απελευθέρωση (touch up), που συμβαίνουν στο ίδιο σημείο χωρίς μετακίνηση. Το σύστημα αναγνωρίζει το Tap όταν το χρονικό διάστημα μεταξύ down και up δεν υπερβαίνει την τιμή κατωφλίου (συνήθως 300–500 ms). Εάν ο χρήστης κρατήσει το δάχτυλο περισσότερο — η χειρονομία μετατρέπεται σε Long Press.

Tap — η βάση του mobile UX. Σε όλες τις πλατφόρμες κινητών, το Tap αντικαθιστά το αριστερό κλικ του ποντικιού που χρησιμοποιείται σε επιτραπέζιες διεπαφές. Σε αντίθεση με το κλικ ποντικιού, το Tap δεν έχει τροποποιητές (Shift+κλικ, Ctrl+κλικ) και hover — αυτός ο περιορισμός διαμορφώνει τον σχεδιασμό των κινητών διεπαφών. Για να αντισταθμίσει την έλλειψη προεπισκόπησης, οι κινητές πλατφόρμες χρησιμοποιούν οπτική ανάδραση: highlight κατά την αφή, εφέ ripple στο Android, αλλαγή διαφάνειας στο iOS.

Ανατομία του Tap περιλαμβάνει πέντε στάδια σε επίπεδο συστήματος: αφύπνιση αισθητήρα (αφή), προσδιορισμός συντεταγμένων, φιλτράρισμα θορύβου (το δάχτυλο δεν πρέπει να μετακινηθεί περισσότερο από την απόσταση κατωφλίου), αναμονή ολοκλήρωσης (απελευθέρωση ή κράτηση), ταξινόμηση (Tap, Long Press, Drag). Οι σύγχρονοι ελεγκτές αφής επεξεργάζονται αυτόν τον κύκλο σε 8–16 ms με συχνότητα δημοσκόπησης 60–120 Hz.

Tap και Click: ποια είναι η διαφορά;

Tap και Click — διαφορετικά γεγονότα με διαφορετική φυσική. Click — γεγονός ποντικιού που συμβαίνει όταν πατάτε και απελευθερώνετε το κουμπί του ποντικιού στην ίδια θέση. Tap — γεγονός οθόνης αφής που συμβαίνει όταν αγγίζετε με το δάχτυλο. Σε κινητές συσκευές, το πρόγραμμα περιήγησης μετατρέπει το Tap σε γεγονός click με καθυστέρηση 300–350 ms (για προσομοίωση διπλού πατήματος για μεγέθυνση). Αυτή η καθυστέρηση ήταν ιστορικά πρόβλημα του κινητού web, μέχρι που η Apple και η Google εισήγαγαν το meta viewport με user-scalable=no.

Touch Events — είναι ένα ξεχωριστό API από τα Mouse Events. Τα γεγονότα αφής (touchstart, touchmove, touchend) μεταδίδουν έναν πίνακα σημείων αφής (TouchList), συντεταγμένες, δύναμη πίεσης (pressure) και μέγεθος περιοχής αφής (radiusX, radiusY). Τα Mouse Events μεταδίδουν μόνο συντεταγμένες δείκτη. Τα σύγχρονα προγράμματα περιήγησης συνθέτουν click από touchend, εάν δεν υπήρξε κίνηση δαχτύλου και γεγονός touchcancel. Το Pointer Events API συνδυάζει και τις δύο προσεγγίσεις, παρέχοντας ενοποιημένη επεξεργασία για όλες τις συσκευές εισόδου.

Tap στο iOS: UITapGestureRecognizer

UITapGestureRecognizer — ο τυπικός αναγνωριστής για μεμονωμένο και πολλαπλό Tap στο iOS SDK. Υποστηρίζει διαμόρφωση numberOfTapsRequired (αριθμός διαδοχικών πατημάτων) και numberOfTouchesRequired (αριθμός δαχτύλων που αγγίζουν ταυτόχρονα). Ο αναγνωριστής μεταβαίνει στην κατάσταση UIGestureRecognizerStateRecognized όταν ο χρήστης απελευθερώνει το δάχτυλο και η αφή δεν υπερβαίνει το κατώφλι μετακίνησης.

// UITapGestureRecognizer με υποστήριξη Double Tap
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — εμφάνιση/απόκρυψη στοιχείων ελέγχου
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — μεγέθυνση εικόνας
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Το Single Tap ενεργοποιείται μόνο εάν το Double Tap δεν αναγνωριστεί
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* εμφάνιση στοιχείων ελέγχου */ }
    @objc private func handleDoubleTap() { /* ζουμ */ }
}

Σημαντικό μοτίβο: κατά την ταυτόχρονη υποστήριξη Single και Double Tap, πρέπει να κληθεί το require(_:toFail:). Χωρίς αυτό, το single tap θα αντιδράσει αμέσως, μη επιτρέποντας στο σύστημα να περιμένει το δεύτερο πάτημα. Το iOS υποστηρίζει επίσης την αναγνώριση Tap μέσω UIControl.addTarget — για UIButton, UISwitch και άλλα στοιχεία ελέγχου. Τα ενσωματωμένα χειριστήρια UIKit έχουν ήδη τυπική επεξεργασία Tap και η προσθήκη UITapGestureRecognizer πάνω τους μπορεί να οδηγήσει σε συγκρούσεις.

Tap στο Android: setOnClickListener

View.setOnClickListener — η τυπική μέθοδος Android SDK για επεξεργασία κλικ σε View. Όταν ο χρήστης αγγίζει το View και απελευθερώνει το δάχτυλο στο ίδιο στοιχείο (touch down → touch up εντός του View), καλείται η μέθοδος onClick(). Το Android προσθέτει αυτόματα εφέ ripple (σε API 21+) με κινούμενη εικόνα αφής. Το κουμπί θεωρείται πατημένο στην κατάσταση PRESSED, η οποία εμφανίζεται οπτικά μέσω selector ή RippleDrawable.

// setOnClickListener σε Fragment με Data Binding
class ItemListFragment : Fragment() {

    private var binding: FragmentItemListBinding? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding = FragmentItemListBinding.bind(view)
        binding.submitButton.setOnClickListener {
            submitForm()
        }

        // Listener με debounce για αποτροπή διπλού κλικ
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Αποστολή δεδομένων φόρμας
    }
}

Debounce — σημαντικό μοτίβο στον προγραμματισμό Android. Ο χρήστης μπορεί κατά λάθος να πατήσει το κουμπί δύο φορές σε σύντομο χρονικό διάστημα, προκαλώντας διπλή αποστολή της φόρμας ή διπλή εκτέλεση της ενέργειας. Λύση: το περιτύλιγμα DebouncingClickListener που μπλοκάρει επαναλαμβανόμενα κλικ για 500–1000 ms. Η Google συνιστά αυτήν την προσέγγιση στα επίσημα παραδείγματα Android Architecture Components. Για RecyclerView παρέχεται setOnItemClickListener μέσω ListAdapter με διεπαφή callback.

Πολλαπλά αγγίγματα: Double Tap και Triple Tap

Double Tap (διπλό πάτημα) — δύο διαδοχικά Tap με διάστημα όχι μεγαλύτερο από 300–400 ms. Χρησιμοποιείται για μεγέθυνση εικόνων (χάρτες, φωτογραφίες), like στα μέσα κοινωνικής δικτύωσης (Instagram, Twitter), επιστροφή στην αρχή της λίστας (Phone, Messages). Triple Tap (τριπλό πάτημα) είναι πιο σπάνιο — χρησιμοποιείται κυρίως για λειτουργίες προσβασιμότητας (λειτουργία πλήρους οθόνης, VoiceOver) και σε παιχνίδια.

Υλοποίηση του Double Tap απαιτεί συγχρονισμό με το Single Tap: εάν προσθέσετε και τις δύο χειρονομίες σε ένα στοιχείο, το Single Tap θα λειτουργεί με καθυστέρηση (το σύστημα περιμένει το δεύτερο πάτημα). Στο iOS, αυτή η καθυστέρηση ελέγχεται μέσω require(toFail:) — το Single Tap καθυστερεί μέχρι το σύστημα να είναι σίγουρο ότι το Double Tap δεν θα συμβεί. Στο Android χρησιμοποιείται το GestureDetector.OnDoubleTapListener με callbacks onSingleTapConfirmed και onDoubleTap. Το onSingleTapConfirmed καλείται μόνο μετά από timeout, όταν το σύστημα είναι σίγουρο ότι είναι ένα μεμονωμένο πάτημα.

// Double Tap στο Android μέσω GestureDetector
class PhotoViewerActivity : AppCompatActivity() {

    private var gestureDetector: GestureDetector? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {

            override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
                toggleControls() // εμφάνιση/απόκρυψη χειριστηρίων
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // μεγέθυνση στο σημείο αφής
                return true
            }
        })
    }
}

Instagram-like double tap — δημοφιλές μοτίβο UX για κοινωνικές εφαρμογές. Το διπλό πάτημα σε μια φωτογραφία ενεργοποιεί κινούμενη εικόνα like (εικονίδιο καρδιάς). Υλοποιείται μέσω GestureDetector στο Android ή UITapGestureRecognizer με numberOfTapsRequired=2 στο iOS. Για κινούμενη εικόνα χρησιμοποιούνται Core Animation στο iOS και ObjectAnimator/AnimatorSet στο Android. Ο χρόνος απόκρισης του double tap πρέπει να είναι ελάχιστος — ο χρήστης αναμένει άμεση κινούμενη εικόνα μετά το δεύτερο πάτημα.

Κανόνες χρήσης Tap σε διεπαφές

Human Interface Guidelines της Apple και Material Design της Google θέτουν συγκεκριμένες απαιτήσεις για το Tap. Ελάχιστο μέγεθος touch-target: 44×44 pt για iOS και 48×48 dp για Android. Αυτό αντιστοιχεί σε ~9 mm στην οθόνη — το μέγεθος του δακτυλικού μαξιλαριού ενός μέσου ενήλικα. Η απόσταση μεταξύ στόχων αφής πρέπει να είναι τουλάχιστον 8 pt/dp για την αποφυγή ψευδών αγγίγματος.

Οπτική ανάδραση είναι υποχρεωτική για το Tap. Ο χρήστης πρέπει να βλέπει ότι η αφή καταγράφηκε: αλλαγή χρώματος, opacity, κινούμενη εικόνα ripple ή highlight. Χωρίς ανάδραση, ο χρήστης μπορεί να πατήσει ξανά, προκαλώντας ανεπιθύμητες ενέργειες. Στο iOS, η τυπική κινούμενη εικόνα touch highlight — αλλαγή διαφάνειας στο 0.3 με διάρκεια 0.15 s. Στο Android — το εφέ Material ripple που εξαπλώνεται από το σημείο αφής. Μην χρησιμοποιείτε καθυστέρηση πριν από την οπτική ανάδραση — ο χρήστης πρέπει να βλέπει την αντίδραση ταυτόχρονα με την αφή.