Свайп у мобільних додатках — типи жестів та реалізація

Що таке свайп у мобільних інтерфейсах

Свайп (swipe) — це жест, при якому користувач проводить пальцем по екрану в певному напрямку, ініціюючи дію. На відміну від тапу (коротке торкання), свайп передбачає рух і контакт з екраном протягом усього жесту.

Історія свайпу почалася з першого iPhone у 2007 році — жест «slide to unlock» став візитною карткою мобільних інтерфейсів. Сьогодні свайп використовується в тисячах додатків для навігації, керування вмістом та організації інформації.

За даними UX Planet (2025), додатки з жестовим керуванням (включаючи свайп) показують на 18% вищу залученість користувачів. Свайп сприймається як більш природна дія порівняно з натисканням кнопки, оскільки імітує фізичне переміщення об'єктів.

Параметри розпізнавання свайпу

Основні параметри, які визначають, чи є жест свайпом: мінімальна відстань (зазвичай 30–50 пікселів), максимальне відхилення від прямої лінії (не більше 15–20 градусів) і максимальна тривалість контакту (до 500 мс). Якщо палець затримується на екрані довше, жест класифікується як перетягування (drag) або довге натискання (long press).

Типи свайпів за напрямком

За напрямком руху свайпи поділяються на чотири основні типи: ліворуч, праворуч, вгору і вниз. Кожен тип має своє призначення та контекст використання.

Горизонтальні свайпи (ліворуч/праворуч) найчастіше використовуються для керування окремими елементами — видаленням, архівуванням, гортанням. Вертикальні свайпи (вгору/вниз) — для навігації між екранами та оновлення вмісту. За даними Material Design Guidelines (2024), горизонтальний свайп зручніший для правшої: рух великим пальцем ліворуч природніший на правій руці.

Багатопальцеві свайпи

Свайпи двома та трьома пальцями використовуються для розширених дій. Двома пальцями — перемикання між робочими столами на iPad, скасування дії (three-finger swipe). Трьома пальцями — скріншот на деяких пристроях. Однак багатопальцеві жести менш інтуїтивні та потребують навчання користувача.

Реалізація свайпу на iOS

На iOS обробка жестів будується на базі UIGestureRecognizer — абстрактного класу, який аналізує послідовність touch-подій та визначає, чи відповідає вона певному жесту.

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("Провести ліворуч")
    }
}

UISwipeGestureRecognizer підтримує налаштування напрямку (direction) та кількості пальців (numberOfTouchesRequired). За замовчуванням потрібен один палець і напрямок праворуч. Для визначення інших напрямків потрібно явно вказати direction: .left, .up, .down.

API більш високого рівня — UICollectionViewLayout з підтримкою swipe actions. Починаючи з iOS 11, таблиці та колекції підтримують вбудовані свайп-дії через UISwipeActionsConfiguration, що дозволяє додати кнопки видалення чи архівування без ручної обробки жестів.

Реалізація свайпу на Android

На Android обробка свайпів будується через GestureDetector — клас, який аналізує MotionEvents та викликає відповідні callback-методи.

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("Провести праворуч")
                }
                return true
            }
        })
    }
}

Метод onFling у GestureDetector викликається, коли користувач швидко проводить пальцем по екрану. Він отримує початкові та кінцеві координати (e1, e2) та швидкість руху (velocityX, velocityY). Для визначення напрямку порівнюється різниця координат по осі X або Y.

Бібліотека AndroidX надає більш зручний API: ViewCompat.setSwipeRefreshLayout для pull-to-refresh, RecyclerView з ItemTouchHelper для свайп-дій у списках. ItemTouchHelper дозволяє додавати свайп-функціональність з візуальним зворотним зв'язком — іконкою, кольором фону та анімацією.

Свайп у веб-додатках

У веб-розробці для обробки свайпів використовуються події Touch Events API (touchstart, touchmove, touchend) та бібліотеки-обгортки, такі як Hammer.js або Swiper.js.

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 ? "Провести праворуч" : "Провести ліворуч");
    }
});

Touch Events API — нативний спосіб обробки жестів у браузері. Подія touchstart фіксує початкові координати, touchmove відстежує рух, touchend визначає результат. Порогове значення (threshold) відсіває випадкові торкання.

За даними Can I Use (2026), Touch Events API підтримується 98% браузерів. Для складних жестових сценаріїв (множинні свайпи, розпізнавання напрямку) рекомендується використовувати бібліотеку Hammer.js, яка абстрагує low-level обробку та надає зрозумілий API.

UX-патерни зі свайпом

Успішні UX-патерни зі свайпом сформувалися за роки еволюції мобільних інтерфейсів. Їх використання гарантує, що користувач зрозуміє, як працює жест, без додаткового навчання.

Патерн «Swipe to Delete» — найпоширеніший. Свайп ліворуч по елементу списку відкриває кнопку видалення. Стандартизований на iOS (SwipeActionsConfiguration) та Android (ItemTouchHelper). Користувачі очікують, що свайп ліворуч видаляє або архівує елемент.

Патерн «Swipe to Go Back» — свайп від лівого краю екрану для повернення на попередній екран. Став стандартом в iOS після iPhone X. На Android аналогічна навігація працює через системний жест. Важливо не конфліктувати з цим системним жестом у своїх додатках.

Патерн «Pull to Refresh» — свайп вниз для оновлення вмісту. Винайдений Loren Brichter для Tweetie (2008), зараз використовується в мільйонах додатків. Реалізований в стандартних компонентах обох платформ.

• Зворотній зв'язок — елемент повинен рухатися разом з пальцем, показуючи результат до завершення свайпу
• Конфлікти жестів — уникайте одночасної підтримки горизонтального свайпу та скролу на одному елементі
• Виявлюваність — перші свайп-дії повинні супроводжуватися візуальною підказкою
• Скасування — користувач повинен мати можливість скасувати свайп, повернувши палець у вихідну позицію