Tap: bu nədir, iOS və Android-də toxunmaların işlənməsi

Tap nədir?

Tap (toxunma, basma) — barmaq və ya stilusla sensor ekrana sürətli toxunma jesti. Jest iki fazadan ibarətdir: toxunma (touch down) və buraxma (touch up), eyni yerdə hərəkət etmədən baş verir. Sistem down və up arasında vaxt intervalı həddi dəyəri (adətən 300–500 ms) keçmədikdə Tap-ı tanıyır. İstifadəçi barmağını daha uzun saxlayarsa — jest Long Press-ə çevrilir.

Tap — mobil UX-in əsası. Bütün mobil platformalarda Tap masaüstü interfeyslərdə istifadə olunan sol siçan klikini əvəz edir. Siçan klikindən fərqli olaraq, Tap-ın modifikatorları (Shift+klik, Ctrl+klik) və hoveri yoxdur — bu məhdudiyyət mobil interfeyslərin dizaynını formalaşdırır. Ön baxışın olmamasını kompensasiya etmək üçün mobil platformalar vizual əks əlaqədən istifadə edir: toxunma zamanı highlight, Android-də ripple effekti, iOS-da şəffaflığın dəyişməsi.

Tap anatomiyası sistem səviyyəsində beş mərhələdən ibarətdir: sensorun oyanması (toxunma), koordinatların müəyyən edilməsi, səs-küyün filtrasiyası (barmaq həddi məsafədən çox yerdəyişməməlidir), bitmənin gözlənilməsi (buraxma və ya saxlama), təsnifat (Tap, Long Press, Drag). Müasir sensor kontrollerlər bu dövrü 60–120 Hz sorğu tezliyində 8–16 ms ərzində emal edir.

Tap və Click: fərq nədir?

Tap və Click — fərqli fizikaya malik müxtəlif hadisələrdir. Click — siçan düyməsini eyni vəziyyətdə basma və buraxma zamanı yaranan siçan hadisəsidir. Tap — barmaq toxunması zamanı yaranan sensor ekran hadisəsidir. Mobil qurğularda brauzer Tap-ı 300–350 ms gecikmə ilə click hadisəsinə çevirir (zoom etmək üçün ikiqat toxunmanı emulyasiya etmək üçün). Bu gecikmə tarixən mobil veb-in problemi idi, Apple və Google user-scalable=no ilə meta viewport tətbiq edənə qədər.

Touch Events — Mouse Events-dən ayrı API-dir. Sensor hadisələri (touchstart, touchmove, touchend) toxunma nöqtələri massivi (TouchList), koordinatlar, təzyiq gücü (pressure) və toxunma sahəsinin ölçüsünü (radiusX, radiusY) ötürür. Mouse Events yalnız kursor koordinatlarını ötürür. Müasir brauzerlər click-i touchend-dən sintez edir, əgər barmaq hərəkəti və touchcancel hadisəsi olmayıbsa. Pointer Events API hər iki yanaşmanı birləşdirərək bütün giriş qurğularının vahid işlənməsini təmin edir.

iOS-da Tap: UITapGestureRecognizer

UITapGestureRecognizer — iOS SDK-da tək və çoxsaylı Tap üçün standart tanıyıcı. numberOfTapsRequired (ardıcıl toxunmaların sayı) və numberOfTouchesRequired (eyni anda toxunan barmaqların sayı) konfiqurasiyasını dəstəkləyir. Tanıyıcı istifadəçi barmağını buraxdıqda və toxunma yerdəyişmə həddini keçmədikdə UIGestureRecognizerStateRecognized vəziyyətinə keçir.

// Double Tap dəstəyi ilə UITapGestureRecognizer
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — idarəetmə elementlərini göstər/gizlət
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — şəklin zoomlanması
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Single Tap yalnız Double Tap tanınmadıqda işə düşür
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* kontrolları göstər */ }
    @objc private func handleDoubleTap() { /* zum etmək */ }
}

Vacib nümunə: Single və Double Tap-ın eyni vaxtda dəstəklənməsi zamanı require(_:toFail:) çağırılmalıdır. Bu olmadan single tap dərhal işə düşəcək, sistemin ikinci toxunmanı gözləməsinə imkan verməyəcək. iOS həmçinin UIControl.addTarget vasitəsilə Tap-ın tanınmasını dəstəkləyir — UIButton, UISwitch və digər idarəetmə elementləri üçün. UIKit-in daxili kontrollerləri artıq standart Tap işlənməsinə malikdir və onların üzərinə UITapGestureRecognizer əlavə etmək konfliktlərə səbəb ola bilər.

Android-də Tap: setOnClickListener

View.setOnClickListener — Android SDK-da View-də klikləri idarə etmək üçün standart metod. İstifadəçi View-ə toxunduqda və barmağını eyni elementdə buraxdıqda (touch down → touch up View daxilində), onClick() metodu çağırılır. Android avtomatik olaraq toxunma animasiyası ilə ripple effekti (API 21+) əlavə edir. Düymə PRESSED vəziyyətində basılmış hesab olunur, bu vizual olaraq seçici və ya RippleDrawable vasitəsilə göstərilir.

// Data Binding ilə Fragment-də setOnClickListener
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()
        }

        // İkiqat klikin qarşısını almaq üçün debounce ilə dinləyici
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Forma məlumatlarının göndərilməsi
    }
}

Debounce — Android proqramlaşdırmasında vacib nümunədir. İstifadəçi təsadüfən düyməni qısa müddət ərzində iki dəfə basa bilər ki, bu da formanın iki dəfə göndərilməsinə və ya hərəkətin iki dəfə yerinə yetirilməsinə səbəb olur. Həll yolu: 500–1000 ms ərzində təkrarlanan klikləri bloklayan DebouncingClickListener örtüyü. Google bu yanaşmanı Android Architecture Components rəsmi nümunələrində istifadə etməyi tövsiyə edir. RecyclerView üçün callback interfeysi ilə ListAdapter vasitəsilə setOnItemClickListener təmin edilmişdir.

Çoxsaylı toxunmalar: Double Tap və Triple Tap

Double Tap (ikiqat toxunma) — 300–400 ms-dən çox olmayan interval ilə iki ardıcıl Tap. Şəkillərin zoomlanması (xəritələr, fotolar), sosial şəbəkələrdə bəyənmələr (Instagram, Twitter), siyahının əvvəlinə qayıtmaq (Phone, Messages) üçün istifadə olunur. Triple Tap (üçqat toxunma) daha az rast gəlinir — əsasən accessibility funksiyaları (tam ekran rejimi, VoiceOver) və oyunlarda istifadə olunur.

Double Tap-ın tətbiqi Single Tap ilə sinxronizasiya tələb edir: hər iki jesti bir elementə əlavə etsəniz, Single Tap gecikmə ilə işləyəcək (sistem ikinci toxunmanı gözləyir). iOS-da bu gecikmə require(toFail:) vasitəsilə idarə olunur — Single Tap sistem Double Tap-ın olmayacağına əmin olana qədər təxirə salınır. Android-də onSingleTapConfirmed və onDoubleTap callback-ləri ilə GestureDetector.OnDoubleTapListener istifadə olunur. onSingleTapConfirmed yalnız vaxt aşımından sonra, sistem bunun tək toxunma olduğuna əmin olduqda çağırılır.

// Android-də GestureDetector vasitəsilə Double Tap
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() // kontrolları göstər/gizlət
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // toxunma nöqtəsində zoom
                return true
            }
        })
    }
}

Instagram-like double tap — sosial proqramlar üçün məşhur UX nümunəsidir. Fotoya ikiqat toxunma bəyənmə animasiyasını (ürək ikonu) çağırır. Android-də GestureDetector və ya iOS-da numberOfTapsRequired=2 ilə UITapGestureRecognizer vasitəsilə tətbiq olunur. Animasiya üçün iOS-da Core Animation, Android-də isə ObjectAnimator/AnimatorSet istifadə olunur. Double tap cavab müddəti minimal olmalıdır — istifadəçi ikinci toxunmadan sonra dərhal animasiya gözləyir.

İnterfeyslərdə Tap istifadə qaydaları

Human Interface Guidelines Apple və Material Design Google Tap üçün konkret tələblər irəli sürür. Touch-target minimal ölçüsü: 44×44 pt iOS üçün və 48×48 dp Android üçün. Bu ekranda ~9 mm-ə uyğun gəlir — orta yaşlı insanın barmaq yastığının ölçüsü. Touch hədəfləri arasındakı məsafə yalançı toxunmaların qarşısını almaq üçün ən azı 8 pt/dp olmalıdır.

Vizual əks əlaqə Tap üçün məcburidir. İstifadəçi toxunmanın qeydə alındığını görməlidir: rəng dəyişikliyi, opacity, ripple animasiyası və ya highlight. Əks əlaqə olmadan istifadəçi təkrar basa bilər, arzuolunmaz hərəkətlərə səbəb ola bilər. iOS-da standart touch highlight animasiyası — 0.3 şəffaflıq dəyişikliyi 0.15 s müddətində. Android-də — toxunma nöqtəsindən yayılan Material ripple effekti. Vizual əks əlaqədən əvvəl gecikmədən istifadə etməyin — istifadəçi toxunma ilə eyni vaxtda reaksiyanı görməlidir.