Mobil ilovalarda Swip — jest turlari va amalga oshirish

Mobil interfeyslarda swip nima

Swip (swer) — bu foydalanuvchi barmog'ini ekran bo'ylab ma'lum bir yo'nalishda harakatlantirib, amalni boshlaydigan jestdir. Tegishdan (qisqa teginish) farqli o'laroq, swip butun jest davomida harakat va ekran bilan aloqani o'z ichiga oladi.

Swip tarixi 2007 yilda birinchi iPhone bilan boshlandi — „slide to unlock” qulfni ochish jesti mobil interfeyslarning tashrif qog'oziga aylandi. Bugun swip navigatsiya, tarkibni boshqarish va ma'lumotni tashkil qilish uchun minglab ilovalarda qo'llaniladi.

UX Planet (2025) ma'lumotlariga ko'ra, jest boshqaruvi (shu jumladan swip) bilan ilovalar foydalanuvchilarning 18% yuqori jalb qilinishini ko'rsatadi. Swip tugmani bosish bilan solishtirganda tabiiyroq harakat sifatida qabul qilinadi, chunki u jismoniy ob'ektlarning harakatini taqlid qiladi.

Swipni aniqlash parametrlari

Asosiy parametrlar jestning swip ekanligini aniqlaydigan: minimal masofa (odatda 30–50 piksel), to'g'ri chiziqdan maksimal og'ish (15–20 darajadan ko'p bo'lmagan) va maksimal aloqa davomiyligi (500 ms gacha). Agar barmoq ekranda uzoqroq qolsa, jest tortish (drag) yoki uzoq bosish (long press) sifatida tasniflanadi.

Yo'nalish bo'yicha swip turlari

Harakat yo'nalishi bo'yicha swiplar to'rtta asosiy turga bo'linadi: chapga, o'ngga, yuqoriga va pastga. Har bir turning o'z maqsadi va qo'llanish konteksti bor.

Gorizontal swiplar (chapga/o'ngga) ko'pincha alohida elementlarni boshqarish uchun ishlatiladi — o'chirish, arxivlash, aylantirish. Vertikal swiplar (yuqoriga/pastga) — ekranlar o'rtasida navigatsiya va tarkibni yangilash uchun. Material Design Guidelines (2024) ga ko'ra, gorizontal swip o'ng qo'llar uchun qulayroq: bosh barmoq bilan chapga harakat o'ng qo'lda tabiiyroq.

Ko'p barmoqli swiplar

Ikki va uch barmoqli swiplar ilg'or harakatlar uchun ishlatiladi. Ikki barmoq bilan — iPad da ish stollari o'rtasida o'tish, amalni bekor qilish (three-finger swipe). Uch barmoq bilan — ba'zi qurilmalarda skrinshot. Biroq, ko'p barmoqli jestlar kamroq intuitiv va foydalanuvchidan o'rganishni talab qiladi.

iOS da swipni amalga oshirish

iOS da jestlarni boshqarish UIGestureRecognizer — teginish hodisalari ketma-ketligini tahlil qiladigan va uning ma'lum bir jestga mos kelishini aniqlaydigan mavhum sinf asosida qurilgan.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("Chapga surish")
    }
}

UISwipeGestureRecognizer yo'nalish (direction) va barmoqlar soni (numberOfTouchesRequired) sozlamalarini qo'llab-quvvatlaydi. Odatiy bo'yicha bitta barmoq va o'ng yo'nalish talab qilinadi. Boshqa yo'nalishlarni aniqlash uchun direction: .left, .up, .down ni aniq ko'rsatish kerak.

Yuqori darajadagi API — UICollectionViewLayout swip harakatlarini qo'llab-quvvatlaydi. iOS 11 dan boshlab, jadvallar va kolleksiyalar UISwipeActionsConfiguration orqali o'rnatilgan swip harakatlarini qo'llab-quvvatlaydi, bu qo'lda jestlarni boshqarmasdan o'chirish yoki arxivlash tugmalarini qo'shish imkonini beradi.

Android da swipni amalga oshirish

Android da swiplarni boshqarish GestureDetector — MotionEvents ni tahlil qiladigan va tegishli callback metodlarini chaqiradigan sinf orqali amalga oshiriladi.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

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

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("O'ngga surish")
                }
                return true
            }
        })
    }
}

GestureDetector da onFling metodi foydalanuvchi barmog'ini ekran bo'ylab tez harakatlantirganda chaqiriladi. U boshlang'ich va tugash koordinatalarini (e1, e2) va harakat tezligini (velocityX, velocityY) oladi. Yo'nalishni aniqlash uchun X yoki Y o'qidagi koordinata farqi taqqoslanadi.

AndroidX kutubxonasi qulayroq API ni taqdim etadi: pull-to-refresh uchun ViewCompat.setSwipeRefreshLayout, ro'yxatlarda swip harakatlari uchun ItemTouchHelper bilan RecyclerView. ItemTouchHelper vizual qayta aloqa — ikonka, fon rangi va animatsiya bilan swip funksiyasini qo'shish imkonini beradi.

Veb ilovalarda swip

Veb ishlanmada swiplarni boshqarish uchun Touch Events API hodisalari (touchstart, touchmove, touchend) va Hammer.js yoki Swiper.js kabi yordamchi kutubxonalar ishlatiladi.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "O'ngga surish" : "Chapga surish");
    }
});

Touch Events API — brauzerda jestlarni boshqarishning mahalliy usuli. Touchstart hodisasi boshlang'ich koordinatalarni qayd qiladi, touchmove harakatni kuzatadi, touchend natijani aniqlaydi. Chegara qiymati (threshold) tasodifiy teginishlarni filtrlash imkonini beradi.

Can I Use (2026) ma'lumotlariga ko'ra, Touch Events API brauzerlarning 98% tomonidan qo'llab-quvvatlanadi. Murakkab jest stsenariylari (ko'p swiplar, yo'nalishni aniqlash) uchun Hammer.js kutubxonasidan foydalanish tavsiya etiladi, u past darajadagi ishlov berishni abstraktsiyalaydi va tushunarli API ni taqdim etadi.

Swip bilan UX namunalari

Muvaffaqiyatli UX namunalari mobil interfeyslar evolyutsiyasi davomida shakllangan. Ularning qo'llanilishi foydalanuvchi qo'shimcha o'rganishsiz jest qanday ishlashini tushunishini kafolatlaydi.

„Swipe to Delete” namunasi — eng keng tarqalgani. Ro'yxat elementini chapga surish o'chirish tugmasini ochadi. iOS (SwipeActionsConfiguration) va Android (ItemTouchHelper) da standartlashtirilgan. Foydalanuvchilar chapga swip elementni o'chirishini yoki arxivlashini kutishadi.

„Swipe to Go Back” namunasi — oldingi ekranga qaytish uchun ekranning chap chetidan swip. iPhone X dan keyin iOS da standartga aylandi. Android da o'xshash navigatsiya tizim jesti orqali ishlaydi. O'z ilovalaringizda bu tizim jesti bilan ziddiyatga yo'l qo'ymaslik muhim.

„Pull to Refresh” namunasi — tarkibni yangilash uchun pastga swip. Loren Brichter tomonidan Tweetie (2008) uchun ixtiro qilingan, hozir millionlab ilovalarda qo'llaniladi. Ikkala platformaning standart komponentlarida amalga oshirilgan.

• Qayta aloqa — element barmoq bilan birga harakatlanib, swip tugashidan oldin natijani ko'rsatishi kerak
• Jest konfliktlari — bir elementda gorizontal swip va aylantirishni bir vaqtda qo'llab-quvvatlashdan saqlaning
• Aniqlanish — birinchi swip harakatlari vizual ko'rsatma bilan birga bo'lishi kerak
• Bekor qilish — foydalanuvchi barmog'ini boshlang'ich holatiga qaytarib, swipni bekor qilish imkoniyatiga ega bo'lishi kerak