Swipe: nedir, mobil geliştirmede kaydırma işleme

Kaydırma nedir?

Kaydırma, parmağın ekran yüzeyinde hızlı bir şekilde kaydırılması ve kaldırılmasıyla sonlanan bir harekettir. Kaydırma kısa (bir öğeyi çevirme) veya uzun (bir perdeyi açma) olabilir, ancak temel özellik ayrıklıktır: sistem bunu sürekli bir koordinat dizisi olarak değil, tek bir olay olarak tanır.

Mobil işletim sistemleri kaydırmayı üç parametreye göre algılar: minimum mesafe (eşik), minimum hız (velocity) ve yön. Parmak yavaş hareket ederse veya mesafe yetersizse, sistem hareketi kaydırma (pan) veya dokunma olarak yorumlar. Eşik değerleri platformlar arasında farklılık gösterir: iOS sabit eşikli UISwipeGestureRecognizer'da bir sabit kullanır, Android ekran yoğunluğuna bağlı olarak ~8–16 dp döndüren ViewConfiguration.getScaledTouchSlop()'u kullanır.

Android Geliştirici Dokümantasyonu'na göre, GestureDetector'daki onFling (kaydırma) 100 px/s üzerindeki hızlarda ve 50px'den başlayan mesafelerde tetiklenir. IT Sectr'da, navigasyon (galeriler, kart arayüzleri, onboarding) için kaydırma kullanıyoruz — bu hareket her yaştan kullanıcı için sezgiseldir.

Kaydırma vs kaydırma (pan): fark nedir?

Kaydırma (swipe) ve kaydırma (pan/drag), her ikisi de parmağı ekranda hareket ettirmeyi içerse de farklı hareket türleridir. Kaydırma (swipe) ayrıktır ve "bir eylem gerçekleştirmek" anlamına gelirken, kaydırma (pan) süreklidir ve "parmak ekranda olduğu sürece bir nesneyi hareket ettirmek" anlamına gelir.

Kaydırma ve pan arasındaki seçim göreve bağlıdır. Bir öğe üzerindeki eylemler için (silme, arşivleme, menü açma) kaydırmayı kullanın. Doğrudan manipülasyon için (taşıma, ölçekleme) pan kullanın. Aynı öğede hareketleri karıştırmak require(toFail:) veya özel mantık gerektirir.

iOS'ta kaydırma: UISwipeGestureRecognizer

UISwipeGestureRecognizer, dört yönden birinde ayrık bir kaydırmayı tanıyan UIGestureRecognizer'ın bir alt sınıfıdır. UIPanGestureRecognizer'dan farklı olarak, ara .changed olayları üretmez: tanındığında, eylem tam olarak bir kez çağrılır.

direction özelliği (UISwipeGestureRecognizer.Direction) izlenen yönü belirler — .left, .right, .up, .down. Yönler bir maske aracılığıyla birleştirilebilir: yatay kaydırmalar için [.left, .right]. numberOfTouchesRequired özelliği parmak sayısını belirler — varsayılan olarak 1. UISwipeGestureRecognizer'ın yapılandırılabilir bir mesafe eşiği yoktur — iOS, güvenilir tanıma için yeterli olan yaklaşık 20px'lik yerleşik bir değer kullanır.

UISwipeGestureRecognizer ayrık bir tanıyıcı olduğundan, UIPanGestureRecognizer ile çakışmaz: yavaş hareket pan'i tetikler, hızlı hareket swipe'ı tetikler. Ancak, aynı görünümde UITapGestureRecognizer ile bir arada bulunduğunda, yanlış dokunma tanımayı önlemek için require(toFail:) gerekebilir.

Android'de kaydırma: GestureDetector

Android'de kaydırma tanıma için birincil API, OnGestureListener geri çağrısına sahip GestureDetector, özellikle onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) yöntemidir. GestureDetector, parmağın ilk ve son konumunu, eksenler boyunca hareket hızını ve mesafeyi analiz eder ve eşikler aşıldığında onFling'i çağrır.

Minimum eşikler ViewConfiguration aracılığıyla yapılandırılabilir: VelocityTracker.getMinVelocity() (~100 px/s) ve ViewConfiguration.getScaledTouchSlop() (~8–16 dp). Özel bir OnSwipeTouchListener, API'yi basitleştiren yaygın bir desendir: geliştiricinin yön ve hızı manuel olarak hesaplaması gerekmez. Android Support Library, yerleşik bir "SwipeDetector" içermez, bu nedenle özel bir sarmalayıcı standart çözümdür.

Listelerde kaydırma için Google, RecyclerView'dan ItemTouchHelper.SimpleCallback kullanılmasını önerir; bu, hareket algılamayı, animasyonu ve onSwiped() geri çağrılarını soyutlar. IT Sectr'da, ViewPager2 ve kart arayüzleri için özel bir SwipeListener kullanıyoruz — bu, performanstan ödün vermeden kaydırma hassasiyeti üzerinde kontrol sağlar.

Listelerde kaydırma: SwipeActions ve ItemTouchHelper

Listeler (UITableView, RecyclerView) için Apple ve Google özel API'ler sağlar ve bunlar manuel olarak UISwipeGestureRecognizer eklemenin yerini alır. Bu API'ler eylem düğmelerini, özel animasyonu ve "silmek için kaydır" hareketlerini destekler — mobil uygulamalarda standart desenler.

iOS (11+)'da UISwipeActionsConfiguration kullanılır: tableView(_:leadingSwipeActionsConfigurationForRowAt:) yöntemi bir UIContextualAction dizisi döndürür — başlık, stil (destructive, normal) ve işleyici içeren düğmeler. Örneğin, "Sil" — kırmızı arka planlı .destructive, "Arşivle" — gri arka planlı .normal. Sistem, düğmelerin görünümünü canlandırır ve bir dokunmadan sonra completion bloğunu çağrır.

Android'de, ItemTouchHelper.SimpleCallback, ItemTouchHelper.attachToRecyclerView() aracılığıyla RecyclerView'a eklenir. Parametreler yön bayraklarını (start, end, up, down) ve onSwiped(viewHolder, direction) geri çağrısını içerir. onSwiped içinde, öğeyi animasyonla kaldırmak için adapter.notifyItemRemoved(position) çağrılır. ItemTouchHelper, hareketleri, kaydırma çakışmalarını ve kaydırma tamamlanmazsa öğe iadesini otomatik olarak işler. Google I/O 2024'e göre, listelerde kaydırma eylemleri olan Android uygulamalarının %70'inde ItemTouchHelper kullanılır.

Swift ve Kotlin'de kod örnekleri

Örnek 1: iOS'ta sola kaydırma (Swift)

Önceki ekrana dönmek için bir görünüme UISwipeGestureRecognizer ekler. Kod, .left yönüyle minimum tanıyıcı yapılandırmasını gösterir.

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ı, denetleyicinin kök görünümüne eklenir. navigationController.viewControllers.count kontrolü, pop'un yalnızca yığında önceki bir ekran olduğunda gerçekleştirilmesini sağlar. Modal denetleyiciler için dismiss kullanılır. Kod, durum kontrolü gerektirmez — UISwipeGestureRecognizer ayrıktır ve eylemi yalnızca başarılı tanımadan sonra çağrır.

Örnek 2: Android'de kaydırma (Kotlin) özel OnSwipeTouchListener ile

Kaydırma yönünü belirleyen ve onSwipeLeft/Right geri çağrılarını çağıran basit bir GestureDetector sarmalayıcısı uygular.

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, onFling'i uygulayarak SimpleOnGestureListener'ı genişletir. diffX/diffY yönü belirler, SWIPE_THRESHOLD (100px) ve SWIPE_VELOCITY_THRESHOLD (100 px/s) eşiklerdir. Kullanım: view.setOnTouchListener(OnSwipeTouchListener(context).apply { onSwipeLeft = { dismiss() } }).

Örnek 3: iOS'ta SwipeActions (UITableView)

Bir tablo hücresinde sola kaydırırken bir silme düğmesi ekler. Manuel hareket tanıma olmadan yerleşik iOS 11+ API'sini kullanır.

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
}

Yöntem, bir UIContextualAction dizisiyle UISwipeActionsConfiguration döndürür. style: .destructive otomatik olarak kırmızı arka planı ayarlar. performsFirstActionWithFullSwipe = true, ek bir dokunma olmadan tam bir kaydırmayla eylemin yürütülmesine izin verir. IT Sectr'da, eylemler içeren tüm listeler için bu API'yi kullanıyoruz — standartlaştırılmıştır, VoiceOver'ı destekler ve özel GestureRecognizer gerektirmez.