Điều hướng Cử chỉ — cách hoạt động, loại và triển khai

Điều hướng Cử chỉ là gì

Điều hướng Cử chỉ là phương pháp tương tác của người dùng với thiết bị di động thông qua các chuỗi chạm, chuyển động và nhấn được màn hình cảm ứng nhận diện. Không giống như các nút truyền thống, cử chỉ không có vị trí cố định trên màn hình và được nhận diện theo mẫu chuyển động: vuốt từ cạnh, chụm hai ngón tay, nhấn giữ.

Quá trình chuyển đổi sang điều hướng cử chỉ bắt đầu với iPhone X (2017), khi Apple loại bỏ hoàn toàn nút Home, thay thế bằng vuốt từ cạnh dưới. Google đã theo xu hướng này trong Android 10 (2020), cung cấp cho người dùng lựa chọn: điều hướng ba nút, điều hướng hai nút và điều hướng cử chỉ đầy đủ. Theo StatCounter (2025), hơn 75% thiết bị Android và 95% thiết bị iOS sử dụng điều hướng cử chỉ.

Về mặt kiến trúc, nhận diện cử chỉ bao gồm ba giai đoạn: Thu thập (thu thập sự kiện chạm), Nhận diện (xác định mẫu chuyển động) và Hành động (thực thi hành động được chỉ định). Ở cấp độ hệ thống, Android và iOS có các trình xử lý tích hợp cho các cử chỉ điều hướng cơ bản — vuốt lui, về màn hình chính, mở bộ chuyển đổi ứng dụng. Nhà phát triển chỉ cần tích hợp đúng cách các cử chỉ của riêng mình vào hệ thống này.

Các loại cử chỉ trong điều hướng di động

Tất cả cử chỉ chạm có thể được chia thành ba loại dựa trên mục đích và phương pháp thực hiện. Mỗi loại có quy tắc xử lý và khuyến nghị sử dụng riêng trong giao diện.

Cử chỉ điều hướng

Cử chỉ điều hướng điều khiển việc di chuyển giữa các màn hình: vuốt từ cạnh trái để quay lại (iOS), vuốt lên để mở bộ chuyển đổi ứng dụng, vuốt từ cạnh dưới để trở về màn hình chính. Các cử chỉ này được hệ thống xử lý ở cấp độ cửa sổ và không nên xung đột với các cử chỉ tùy chỉnh bên trong ứng dụng.

Cử chỉ thao tác

Cử chỉ thao tác thay đổi vị trí, kích thước hoặc hướng của các đối tượng trên màn hình. Chụm (thu phóng hai ngón tay), xoay, kéo, vuốt nhanh — tất cả các cử chỉ này được xử lý ở cấp View hoặc Composable và không ảnh hưởng đến điều hướng hệ thống.

Cử chỉ ngữ cảnh

Cử chỉ ngữ cảnh kích hoạt các chức năng bổ sung mà không cần điều hướng đến màn hình khác. Nhấn giữ (cho menu ngữ cảnh), chạm đúp (cho like hoặc thu phóng), vuốt cạnh (để mở Drawer). Các cử chỉ này yêu cầu triển khai cẩn thận nhất vì chúng có thể chồng chéo với cử chỉ điều hướng hệ thống.

Điều hướng Cử chỉ trên Android: GestureDetector và MotionEvent

Android SDK cung cấp hệ thống xử lý cử chỉ đa cấp, từ MotionEvent cấp thấp đến GestureDetector và GestureOverlayView cấp cao. Việc chọn đúng cấp phụ thuộc vào độ phức tạp của cử chỉ và yêu cầu hiệu suất.

GestureDetector — Lớp cơ sở

GestureDetector là lớp cấp cao chuyển đổi chuỗi MotionEvent thành các cử chỉ cụ thể: onDown, onShowPress, onSingleTapUp, onScroll, onLongPress, onFling. Nhà phát triển ghi đè các phương thức cần thiết của GestureDetector.SimpleOnGestureListener và nhận được sự kiện đã được nhận diện. GestureDetector được khuyến nghị cho tất cả cử chỉ tiêu chuẩn ngoại trừ thu phóng — cho việc đó có ScaleGestureDetector.

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

TouchDelegate cho Mục tiêu Tùy chỉnh

TouchDelegate là cơ chế mở rộng vùng chạm của View. Nó được sử dụng khi phần tử mục tiêu nhỏ hơn kích thước chạm tối thiểu 48dp. Ví dụ, một nút "Đóng" nhỏ ở góc màn hình nhận được TouchDelegate mở rộng vùng va chạm mà không thay đổi kích thước hiển thị. Google khuyến nghị TouchDelegate cho tất cả phần tử tương tác nhỏ hơn 48x48dp.

Cử chỉ trong Jetpack Compose

Compose cung cấp các bổ từ để xử lý cử chỉ: clickable, draggable, swipeable, combinedClickable (cho chạm đúp và nhấn giữ). Bên trong, Compose sử dụng PointerInputScope cho xử lý cấp thấp, nhưng hầu hết nhà phát triển chỉ cần các bổ từ cấp cao. Cho cử chỉ tùy chỉnh, sử dụng pointerInput với awaitPointerEvent.

Điều hướng Cử chỉ trên iOS: UIGestureRecognizer và SwiftUI

iOS SDK sử dụng kiến trúc UIGestureRecognizer — một lớp cơ sở trừu tượng phân tích chuỗi UITouch và xác định xem nó có khớp với cử chỉ đã biết hay không. Apple khuyến nghị sử dụng các bộ nhận diện tiêu chuẩn bất cứ khi nào có thể và chỉ tạo lớp con tùy chỉnh cho các cử chỉ độc đáo.

UIGestureRecognizer trong UIKit

UIKit cung cấp một tập hợp các bộ nhận diện có sẵn: UITapGestureRecognizer, UISwipeGestureRecognizer, UIPanGestureRecognizer, UIPinchGestureRecognizer, UIRotationGestureRecognizer, UILongPressGestureRecognizer. Mỗi bộ nhận diện có trạng thái (possible, began, changed, ended, cancelled, failed) — nhà phát triển theo dõi trạng thái để phản ứng ở các giai đoạn khác nhau của cử chỉ.

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

Cử chỉ trong SwiftUI

SwiftUI sử dụng các bổ từ cử chỉ khai báo, tương tự Compose: onTapGesture, onLongPressGesture, MagnificationGesture, RotationGesture, DragGesture. SwiftUI tự động xử lý xung đột giữa các cử chỉ thông qua simultaneousGesture, sequencedGesture và exclusiveGesture — các bổ từ xác định ưu tiên cử chỉ khi được kích hoạt đồng thời.

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizer là bộ nhận diện hệ thống điều khiển cử chỉ vuốt lui trong UINavigationController. Theo mặc định, nó hoạt động cho tất cả màn hình ngoại trừ màn hình gốc. Nếu ứng dụng của bạn sử dụng NavigationBar tùy chỉnh, interactivePopGestureRecognizer có thể ngừng hoạt động — cần kích hoạt nó bằng lập trình thông qua navigationController.interactivePopGestureRecognizer?.delegate.

Xung đột giữa cử chỉ hệ thống và tùy chỉnh

Xung đột cử chỉ là một trong những vấn đề khó khăn nhất trong điều hướng cử chỉ. Khi một cử chỉ tùy chỉnh (ví dụ: mở Drawer bằng cách vuốt từ cạnh trái) trùng với cử chỉ hệ thống (vuốt lui trên iOS hoặc Android), hệ thống phải xác định cử chỉ nào có ưu tiên. Xử lý đúng xung đột này rất quan trọng cho trải nghiệm người dùng.

Giải pháp trên Android: Insets và SystemGestureExclusionRects

Android 10+ cho phép ứng dụng dành riêng các vùng màn hình cho cử chỉ riêng của mình thông qua WindowInsets. Sử dụng ViewCompat.setSystemGestureExclusionRects để chỉ định các khu vực mà cử chỉ hệ thống không nên kích hoạt. Ví dụ, cho Drawer bên trái, bạn có thể loại trừ cạnh trái màn hình (rộng tới 200dp) khỏi vuốt lui hệ thống. Google đã đặt giới hạn: có thể loại trừ tới 200dp mỗi bên.

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

Giải pháp trên iOS: UIGestureRecognizerDelegate

iOS cung cấp phương thức gestureRecognizerShouldBegin trong UIGestureRecognizerDelegate, cho phép bộ nhận diện tùy chỉnh quyết định có nên bắt đầu nhận diện hay không. Cho vuốt Drawer từ cạnh trái, bạn có thể kiểm tra vị trí chạm: nếu người dùng đang kéo Drawer (khoảng cách vượt quá ngưỡng), cử chỉ tùy chỉnh sẽ giành quyền điều khiển. Nếu cử chỉ không được nhận diện, hệ thống trả quyền điều khiển cho InteractivePopGestureRecognizer.

Lỗi thường gặp và phương pháp tốt nhất

Điều hướng Cử chỉ đòi hỏi thiết kế cẩn thận, đặc biệt trên các thiết bị có điều hướng cử chỉ hệ thống. Hãy xem xét các lỗi thường gặp và khuyến nghị khắc phục.

Lỗi: Bỏ qua vùng xung đột ở cạnh màn hình

Lỗi phổ biến nhất là đặt phần tử tương tác hoặc triển khai vuốt tùy chỉnh trong vùng cử chỉ hệ thống (cạnh trái và phải, cạnh dưới). Người dùng cố gắng thực hiện hành động nhưng thay vào đó điều hướng hệ thống lại kích hoạt. Luôn cung cấp khoảng đệm cho cử chỉ hệ thống và xử lý xung đột qua exclusion rects.

Lỗi: Tốc độ nhận diện khác nhau trên Android và iOS

Tham số cử chỉ (ngưỡng vận tốc, khoảng cách tối thiểu) khác nhau theo mặc định giữa các nền tảng. Nếu ứng dụng của bạn đa nền tảng, đừng sao chép tham số từ nền tảng này sang nền tảng khác — hãy kiểm tra từng cử chỉ riêng biệt trên Android và iOS. Flutter và React Native tự động điều chỉnh một số tham số, nhưng không phải tất cả.

Phương pháp tốt nhất: Phản hồi trực quan

Mọi cử chỉ cần được kèm theo phản hồi trực quan: thay đổi màu sắc, biến đổi, hoạt ảnh. Người dùng phải hiểu rằng cử chỉ đã được nhận diện và hành động đang được thực thi. Trên iOS, bộ nhận diện hệ thống tự động cung cấp phản hồi xúc giác; trên Android cần thêm qua HapticFeedbackConstants.

Phương pháp tốt nhất: Khả năng tiếp cận cho cử chỉ

Không phải tất cả người dùng đều có thể thực hiện cử chỉ — những người có khả năng vận động hạn chế sử dụng VoiceOver và TalkBack để điều hướng. Mỗi cử chỉ phải có một phương án thay thế bằng nút bấm. Google và Apple yêu cầu tất cả hành động cử chỉ phải được sao chép bằng các điều khiển có sẵn cho khả năng tiếp cận.