Swipe sa Mobile Apps — Mga Uri ng Gesture at Pagpapatupad

Ano ang swipe sa mobile interfaces

Swipe ay isang gesture kung saan inililipat ng gumagamit ang kanyang daliri sa screen sa isang tiyak na direksyon, na nagpapasimula ng aksyon. Hindi tulad ng pag-tap (maikling pagpindot), ang swipe ay may kasamang paggalaw at kontak sa screen sa buong tagal ng gesture.

Nagsimula ang kasaysayan ng swipe sa unang iPhone noong 2007 — ang gesture ng pag-unlock na „slide to unlock” ay naging tanda ng mobile interfaces. Ngayon, ginagamit ang swipe sa libu-libong apps para sa nabigasyon, pamamahala ng nilalaman, at organisasyon ng impormasyon.

Ayon sa UX Planet (2025), ang mga app na may kontrol ng gesture (kabilang ang swipe) ay nagpapakita ng 18% mas mataas na pakikilahok ng gumagamit. Ang swipe ay itinuturing bilang mas natural na aksyon kumpara sa pagpindot ng button, dahil ginagaya nito ang pisikal na paggalaw ng mga bagay.

Mga parameter ng pagkilala ng swipe

Mga pangunahing parameter na tumutukoy kung ang isang gesture ay swipe: minimum na distansya (karaniwan 30–50 pixels), maximum na paglihis mula sa tuwid na linya (hindi hihigit sa 15–20 degrees) at maximum na tagal ng kontak (hanggang 500 ms). Kung ang daliri ay manatili sa screen nang mas matagal, ang gesture ay nauuri bilang pag-drag o mahabang pagpindot (long press).

Mga uri ng swipe ayon sa direksyon

Ayon sa direksyon ng galaw ang mga swipe ay nahahati sa apat na pangunahing uri: kaliwa, kanan, pataas, at pababa. Bawat uri ay may kanya-kanyang layunin at konteksto ng paggamit.

Pahalang na swipe (kaliwa/kanan) ay kadalasang ginagamit para sa pamamahala ng indibidwal na elemento — pagtanggal, pag-archive, pag-scroll. Patayong swipe (pataas/pababa) — para sa nabigasyon sa pagitan ng mga screen at pag-update ng nilalaman. Ayon sa Material Design Guidelines (2024), ang pahalang na swipe ay mas komportable para sa kanang kamay: mas natural ang paggalaw pakaliwa gamit ang hinlalaki sa kanang kamay.

Multi-daliri na swipe

Swipe gamit ang dalawa at tatlong daliri ay ginagamit para sa mga advanced na aksyon. Dalawang daliri — paglipat sa pagitan ng mga desktop sa iPad, pag-undo ng aksyon (three-finger swipe). Tatlong daliri — screenshot sa ilang device. Gayunpaman, ang multi-finger gestures ay hindi gaanong intuitive at nangangailangan ng pag-aaral ng gumagamit.

Pagpapatupad ng swipe sa iOS

Sa iOS ang pagproseso ng gesture ay batay sa UIGestureRecognizer — isang abstract na klase na sumusuri sa pagkakasunod-sunod ng touch events at tinutukoy kung ito ay tumutugma sa isang partikular na gesture.

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("Mag-swipe pakaliwa")
    }
}

UISwipeGestureRecognizer sumusuporta sa pag-configure ng direksyon (direction) at bilang ng mga daliri (numberOfTouchesRequired). Bilang default, kailangan ng isang daliri at direksyong pakanan. Upang matukoy ang iba pang direksyon, kailangan mong tahasang itakda ang direction: .left, .up, .down.

API ng mas mataas na antas — UICollectionViewLayout na may suporta para sa swipe actions. Simula sa iOS 11, ang mga table at collection ay sumusuporta sa built-in na swipe actions sa pamamagitan ng UISwipeActionsConfiguration, na nagbibigay-daan sa pagdagdag ng mga button para tanggalin o i-archive nang walang manu-manong pagproseso ng gesture.

Pagpapatupad ng swipe sa Android

Sa Android ang pagproseso ng swipe ay ginagawa sa pamamagitan ng GestureDetector — isang klase na sumusuri sa MotionEvents at tumatawag ng kaukulang callback methods.

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("Mag-swipe pakanan")
                }
                return true
            }
        })
    }
}

Ang pamamaraang onFling sa GestureDetector ay tinatawag kapag ang gumagamit ay mabilis na nag-swipe ng daliri sa screen. Ito ay tumatanggap ng mga panimula at panghuling coordinate (e1, e2) at bilis ng galaw (velocityX, velocityY). Upang matukoy ang direksyon, inihahambing ang pagkakaiba ng coordinate sa X o Y axis.

AndroidX library ay nagbibigay ng mas maginhawang API: ViewCompat.setSwipeRefreshLayout para sa pull-to-refresh, RecyclerView na may ItemTouchHelper para sa swipe actions sa listahan. Pinapayagan ng ItemTouchHelper ang pagdagdag ng swipe functionality na may visual na feedback — icon, kulay ng background, at animasyon.

Swipe sa web apps

Sa web development para sa pagproseso ng swipe ay ginagamit ang Touch Events API (touchstart, touchmove, touchend) at mga pantulong na library tulad ng Hammer.js o 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 ? "Mag-swipe pakanan" : "Mag-swipe pakaliwa");
    }
});

Touch Events API — ang native na paraan ng pagproseso ng gesture sa browser. Ang touchstart event ay nagtatala ng panimulang coordinate, touchmove ay sumusubaybay sa galaw, touchend ay tinutukoy ang resulta. Ang halaga ng threshold ay nag-filter ng mga aksidenteng pagpindot.

Ayon sa Can I Use (2026), ang Touch Events API ay sinusuportahan ng 98% ng mga browser. Para sa mga komplikadong sitwasyon ng gesture (maraming swipe, pagkilala ng direksyon) inirerekomenda ang paggamit ng library na Hammer.js, na nag-aabstrak ng low-level processing at nagbibigay ng malinaw na API.

Mga pattern ng UX na may swipe

Ang mga matagumpay na pattern ng UX na may swipe ay nabuo sa mga taon ng ebolusyon ng mobile interfaces. Ang paggamit nito ay ginagarantiya na mauunawaan ng gumagamit kung paano gumagana ang gesture nang walang karagdagang pag-aaral.

Ang pattern na „Swipe to Delete” — ang pinakakaraniwan. Ang pag-swipe pakaliwa sa isang elemento ng listahan ay nagbubukas ng delete button. Na-standardize sa iOS (SwipeActionsConfiguration) at Android (ItemTouchHelper). Inaasahan ng mga gumagamit na ang pag-swipe pakaliwa ay tumatanggal o nag-aarchive ng elemento.

Ang pattern na „Swipe to Go Back” — pag-swipe mula sa kaliwang gilid ng screen upang bumalik sa nakaraang screen. Naging pamantayan sa iOS pagkatapos ng iPhone X. Sa Android, ang katulad na nabigasyon ay gumagana sa pamamagitan ng system gesture. Mahalaga na hindi sumalungat sa system gesture na ito sa iyong mga app.

Ang pattern na „Pull to Refresh” — pag-swipe pababa upang i-update ang nilalaman. Inimbento ni Loren Brichter para sa Tweetie (2008), ngayon ay ginagamit sa milyun-milyong apps. Naipatupad sa mga standard na bahagi ng parehong platform.

• Feedback — ang elemento ay dapat gumalaw kasama ang daliri, na nagpapakita ng resulta bago matapos ang swipe
• Mga salungatan ng gesture — iwasan ang sabay-sabay na suporta ng pahalang na swipe at pag-scroll sa parehong elemento
• Natutuklasan — ang unang swipe action ay dapat may kasamang visual na pahiwatig
• Pagkansela — ang gumagamit ay dapat magkaroon ng kakayahang kanselahin ang swipe sa pamamagitan ng pagbabalik ng daliri sa orihinal na posisyon