Swipe: bu nədir, mobil inkişafda sürüşdürmələrin işlənməsi

Swipe nədir?

Swipe — barmağın ekran səthində sürətli sürüşmə hərəkətidir, ayrılma ilə bitir. Swipe qısa (elementi sürüşdürmək) və ya uzun (pərdəni açmaq) ola bilər, lakin əsas xüsusiyyət diskretlikdir: sistem onu bir hadisə kimi tanıyır, koordinatların fasiləsiz ardıcıllığı kimi deyil.

Mobil ƏS-lər swipe-i üç parametrə görə təyin edir: minimal məsafə (hədd), minimal sürət (velocity) və istiqamət. Barmaq yavaş hərəkət edərsə və ya məsafə kifayət deyilsə, sistem jesti panoramlama (pan) və ya tap kimi şərh edir. Hədd dəyərləri platformalar arasında fərqlənir: iOS sabit həddi olan UISwipeGestureRecognizer sabitindən istifadə edir, Android — ViewConfiguration.getScaledTouchSlop(), ekran sıxlığından asılı olaraq ~8–16 dp qaytarır.

Android Developers Documentation-a görə, GestureDetector-də onFling (swipe) 100 px/s sürətdən yuxarı və 50px məsafədən işə düşür. IT Sectr-də biz swipe-i naviqasiya üçün istifadə edirik (qalereyalar, kart interfeysləri, onboarding) — bu jest istənilən yaşda olan istifadəçilər üçün intuitivdir.

Swipe vs panoramlama: fərq nədir?

Swipe və panoramlama (pan/drag) — müxtəlif jest növləridir, hər ikisi barmağın ekranda hərəkətindən istifadə etsə də. Swipe diskretdir və „bir hərəkət et” mənasını verir, panoramlama isə fasiləsizdir və „barmaq ekranda olduğu müddətcə obyekti hərəkət etdir” mənasını verir.

Swipe və panoramlama arasında seçim tapşırıqdan asılıdır. Element üzərində hərəkətlər üçün (silmək, arxivləşdirmək, menyu açmaq) swipe istifadə edin. Birbaşa manipulyasiya üçün (hərəkət etdirmək, miqyaslama) — panoramlama. Bir elementdə jestləri qarışdırmaq require(toFail:) və ya fərdi məntiq tələb edir.

iOS-da Swipe: UISwipeGestureRecognizer

UISwipeGestureRecognizer — dörd istiqamətdən birində diskret swipe tanıyan UIGestureRecognizer alt sinfi. UIPanGestureRecognizer-dən fərqli olaraq, aralıq .changed hadisələri yaratmır: tanıma zamanı action dəqiq bir dəfə çağırılır.

Direction xüsusiyyəti (UISwipeGestureRecognizer.Direction) izlənilən istiqaməti təyin edir — .left, .right, .up, .down. Maska vasitəsilə birləşdirmək olar: üfüqi swipelər üçün [.left, .right]. numberOfTouchesRequired xüsusiyyəti barmaq sayını təyin edir — susmaya görə 1. UISwipeGestureRecognizer tənzimlənən məsafə həddinə malik deyil — iOS etibarlı tanıma üçün təxminən 20px daxili dəyərdən istifadə edir.

UISwipeGestureRecogniser diskret tanıyıcı olduğundan, UIPanGestureRecognizer ilə konflikt yaratmır: yavaş hərəkətdə pan, sürətli hərəkətdə swipe işləyəcək. Lakin eyni view-də UITapGestureRecognizer ilə birgə mövcud olduqda, tapın yalançı tanınmasının qarşısını almaq üçün require(toFail:) tələb oluna bilər.

Android-də Swipe: GestureDetector

Android-də swipeni tanımaq üçün əsas API GestureDetector OnGestureListener callback-i ilə, dəqiq desək onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) metodudur. GestureDetector barmağın başlanğıc və son mövqeyini, oxlar üzrə hərəkət sürətini və məsafəni təhlil edir, hədləri aşdıqda onFling çağırır.

Minimal hədlər ViewConfiguration vasitəsilə tənzimlənir: VelocityTracker.getMinVelocity() (~100 px/s) və ViewConfiguration.getScaledTouchSlop() (~8–16 dp). Fərdi OnSwipeTouchListener — API-ni sadələşdirən geniş yayılmış nümunədir: proqramçı əl ilə istiqamət və sürət hesablamalı deyil. Android Support Library daxili „SwipeDetector” ehtiva etmir, buna görə fərdi sarğı standart həll yoludur.

Siyahılarda swipe üçün Google RecyclerView-dən ItemTouchHelper.SimpleCallback istifadə etməyi tövsiyə edir, jest deteksiyasını, animasiyanı və onSwiped() callback-lərini abstraksiya edir. IT Sectr-də biz ViewPager2 və kart interfeysləri üçün fərdi SwipeListener istifadə edirik — bu, performansa zərər vermədən swipe həssaslığına nəzarət verir.

Siyahılarda Swipe: SwipeActions və ItemTouchHelper

Siyahılar üçün (UITableView, RecyclerView) Apple və Google ixtisaslaşmış API-lər təqdim edir, UISwipeGestureRecognizer-in əl ilə əlavə edilməsini əvəz edir. Bu API-lər hərəkət düymələrini, fərdi animasiyanı və „sürüşdürərək sil” jestlərini dəstəkləyir — mobil tətbiqlərin standart nümunələri.

iOS (11+)-də UISwipeActionsConfiguration istifadə olunur: tableView(_:leadingSwipeActionsConfigurationForRowAt:) metodu başlıqlı, stilli (destructive, normal) və handler-li UIContextualAction massivi qaytarır. Məsələn, „Sil” — qırmızı fonla .destructive, „Arxiv” — boz ilə .normal. Sistem düymələrin görünməsini animasiya edir və basdıqdan sonra completion blokunu çağırır.

Android-də ItemTouchHelper.SimpleCallback RecyclerView-ə ItemTouchHelper.attachToRecyclerView() vasitəsilə birləşdirilir. Parametrlər — istiqamət bayraqları (start, end, up, down) və onSwiped(viewHolder, direction) callback-i. onSwiped daxilində elementin animasiya ilə silinməsi üçün adapter.notifyItemRemoved(position) çağırılır. ItemTouchHelper avtomatik jestləri, sürüşdürmə (scroll) ilə konfliktləri və swipe tamamlanmadıqda elementin qaytarılmasını idarə edir. Google I/O 2024-ə görə, ItemTouchHelper siyahılarda swipe hərəkətləri olan Android tətbiqlərinin 70%-də istifadə olunur.

Swift və Kotlin kod nümunələri

Nümunə 1: iOS-da sola swipe (Swift)

Əvvəlki ekrana qayıtmaq üçün view-ə UISwipeGestureRecognizer əlavə edir. Kod .left istiqaməti ilə tanıyıcının minimal konfiqurasiyasını göstərir.

import UIKit

class CardViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipeLeft(_:))
        )
        swipeLeft.direction = .left
        swipeLeft.numberOfTouchesRequired = 1
        view.addGestureRecognizer(swipeLeft)
    }

    @objc private func handleSwipeLeft(_: UISwipeGestureRecognizer) {
        guard let nav = navigationController else { return }
        if nav.viewControllers.count > 1 {
            nav.popViewController(animated: true)
        } else {
            nav.dismiss(animated: true)
        }
    }
}

Tanıyıcı kontrollerin root-view-nə bağlanır. navigationController.viewControllers.count yoxlaması pop-un yalnız stack-də əvvəlki ekran olduqda yerinə yetirilməsini təmin edir. Modal kontrollerlər üçün dismiss istifadə olunur. Kod state yoxlaması tələb etmir — UISwipeGestureRecognizer diskretdir və action-ı yalnız uğurlu tanımada çağırır.

Nümunə 2: Android-də swipe (Kotlin) fərdi OnSwipeTouchListener ilə

GestureDetector-in sadə sarğısını tətbiq edir, swipe istiqamətini təyin edir və onSwipeLeft/Right callback-lərini çağırır.

import android.content.Context
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View

open class OnSwipeTouchListener(context: Context) : View.OnTouchListener {

    private val gestureDetector = GestureDetector(context, GestureListener())

    override fun onTouch(v: View, event: MotionEvent): Boolean {
        return gestureDetector.onTouchEvent(event)
    }

    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {

        companion object {
            private const val SWIPE_THRESHOLD = 100
            private const val SWIPE_VELOCITY_THRESHOLD = 100
        }

        override fun onFling(
            e1: MotionEvent?,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
        ): Boolean {
            val diffX = e2.x - e1!!.x
            val diffY = e2.y - e1.y

            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (Math.abs(diffX) > SWIPE_THRESHOLD
                    && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD
                ) {
                    if (diffX > 0) onSwipeRight()
                    else onSwipeLeft()
                    return true
                }
            } else {
                if (Math.abs(diffY) > SWIPE_THRESHOLD
                    && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD
                ) {
                    if (diffY > 0) onSwipeDown()
                    else onSwipeUp()
                    return true
                }
            }
            return false
        }
    }

    open fun onSwipeLeft() {}
    open fun onSwipeRight() {}
    open fun onSwipeUp() {}
    open fun onSwipeDown() {}
}

OnSwipeTouchListener SimpleOnGestureListener-i genişləndirir, onFling-i tətbiq edir. diffX/diffY istiqaməti təyin edir, SWIPE_THRESHOLD (100px) və SWIPE_VELOCITY_THRESHOLD (100 px/s) — hədlərdir. İstifadə: view.setOnTouchListener(OnSwipeTouchListener(context).apply { onSwipeLeft = { dismiss() } }).

Nümunə 3: iOS-da SwipeActions (UITableView)

Cədvəl xanasını sola sürüşdürdükdə silmə düyməsini əlavə edir. Əl ilə jest tanımadan iOS 11+ daxili API-ni istifadə edir.

func tableView(
    _ tableView: UITableView,
    trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(
        style: .destructive,
        title: "Sil"
    ) { _, _, completionHandler in
        items.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
        completionHandler(true)
    }
    deleteAction.backgroundColor = .systemRed

    let config = UISwipeActionsConfiguration(actions: [deleteAction])
    config.performsFirstActionWithFullSwipe = true
    return config
}

Metod UIContextualAction massivi ilə UISwipeActionsConfiguration qaytarır. style: .destructive avtomatik qırmızı fon təyin edir. performsFirstActionWithFullSwipe = true əlavə basmadan tam swipe ilə hərəkəti yerinə yetirməyə imkan verir. IT Sectr-də bu API-ni bütün hərəkət siyahıları üçün istifadə edirik — standartlaşdırılmışdır, VoiceOver-i dəstəkləyir və fərdi GestureRecognizer tələb etmir.