Tap: nó là gì, xử lý chạm trong iOS và Android

Tap là gì?

Tap (chạm, nhấn) là cử chỉ chạm nhanh vào màn hình cảm ứng bằng ngón tay hoặc bút stylus. Cử chỉ gồm hai giai đoạn: chạm xuống và nhấc lên, xảy ra tại cùng một vị trí mà không di chuyển. Hệ thống nhận dạng Tap khi khoảng thời gian giữa lúc chạm và nhấc không vượt quá giá trị ngưỡng (thường là 300–500 ms). Nếu người dùng giữ ngón tay lâu hơn — cử chỉ trở thành Nhấn giữ.

Tap là nền tảng của UX di động. Trên tất cả nền tảng di động, Tap thay thế nhấp chuột trái được sử dụng trong giao diện máy tính. Không giống như nhấp chuột, Tap không có bộ điều chỉnh (Shift+nhấp, Ctrl+nhấp) và không có di chuột — hạn chế này định hình thiết kế giao diện di động. Để bù đắp cho việc thiếu xem trước, nền tảng di động sử dụng phản hồi trực quan: làm nổi bật khi chạm, hiệu ứng gợn sóng trong Android, thay đổi độ trong suốt trong iOS.

Cấu trúc của Tap bao gồm năm giai đoạn ở cấp hệ thống: đánh thức cảm biến (chạm), xác định tọa độ, lọc nhiễu (ngón tay không được di chuyển quá khoảng cách ngưỡng), chờ hoàn thành (nhấc hoặc giữ), phân loại (Tap, Nhấn giữ, Kéo). Bộ điều khiển cảm ứng hiện đại xử lý chu trình này trong 8–16 ms ở tốc độ thăm dò 60–120 Hz.

Tap và Click: khác nhau thế nào?

Tap và Click là các sự kiện khác nhau với vật lý khác nhau. Click là sự kiện chuột xảy ra khi nhấn và thả nút chuột ở cùng một vị trí. Tap là sự kiện màn hình cảm ứng xảy ra khi ngón tay chạm vào. Trên thiết bị di động, trình duyệt chuyển đổi Tap thành sự kiện click với độ trễ 300–350 ms (để mô phỏng thu phóng chạm đôi). Độ trễ này từng là vấn đề lịch sử của web di động cho đến khi Apple và Google giới thiệu meta viewport với user-scalable=no.

Touch Events là một API riêng biệt với Mouse Events. Sự kiện cảm ứng (touchstart, touchmove, touchend) truyền một mảng các điểm chạm (TouchList), tọa độ, áp lực và kích thước vùng chạm (radiusX, radiusY). Mouse Events chỉ truyền tọa độ con trỏ. Trình duyệt hiện đại tổng hợp click từ touchend nếu không có chuyển động ngón tay và không có sự kiện touchcancel. Pointer Events API kết hợp cả hai cách tiếp cận, cung cấp xử lý thống nhất cho tất cả thiết bị đầu vào.

Tap trong iOS: UITapGestureRecognizer

UITapGestureRecognizer là bộ nhận dạng tiêu chuẩn cho Tap đơn và nhiều lần trong iOS SDK. Hỗ trợ cấu hình numberOfTapsRequired (số lần chạm liên tiếp) và numberOfTouchesRequired (số ngón tay chạm đồng thời). Bộ nhận dạng chuyển sang trạng thái UIGestureRecognizerStateRecognized khi người dùng nhấc ngón tay và lần chạm không vượt quá ngưỡng di chuyển.

// UITapGestureRecognizer hỗ trợ Double Tap
class InteractiveImageViewController: UIViewController {

    private var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Single Tap — hiển thị/ẩn điều khiển
        let singleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleSingleTap)
        )
        imageView.addGestureRecognizer(singleTap)

        // Double Tap — phóng to hình ảnh
        let doubleTap = UITapGestureRecognizer(
            target: self,
            action: #selector(handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2

        // Single Tap chỉ kích hoạt nếu Double Tap không được nhận dạng
        singleTap.require(doubleTap.toFail())
        imageView.addGestureRecognizer(doubleTap)
    }

    @objc private func handleSingleTap() { /* hiển thị điều khiển */ }
    @objc private func handleDoubleTap() { /* thu phóng */ }
}

Mẫu quan trọng: khi hỗ trợ đồng thời Tap đơn và đôi, bạn phải gọi require(_:toFail:). Nếu không, tap đơn sẽ kích hoạt ngay lập tức, không cho hệ thống chờ lần nhấn thứ hai. iOS cũng hỗ trợ nhận dạng Tap qua UIControl.addTarget — cho UIButton, UISwitch và các điều khiển khác. Các điều khiển tích hợp sẵn của UIKit đã có xử lý Tap tiêu chuẩn, và thêm UITapGestureRecognizer lên chúng có thể gây xung đột.

Tap trong Android: setOnClickListener

View.setOnClickListener là phương thức tiêu chuẩn của Android SDK để xử lý nhấp trên View. Khi người dùng chạm vào View và nhấc ngón tay trên cùng một phần tử (touch down → touch up trong View), phương thức onClick() được gọi. Android tự động thêm hiệu ứng gợn sóng (trên API 21+) với hoạt ảnh chạm. Nút được coi là đã nhấn ở trạng thái PRESSED, được hiển thị trực quan qua bộ chọn hoặc RippleDrawable.

// setOnClickListener trong Fragment với Data Binding
class ItemListFragment : Fragment() {

    private var binding: FragmentItemListBinding? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding = FragmentItemListBinding.bind(view)
        binding.submitButton.setOnClickListener {
            submitForm()
        }

        // Trình lắng nghe debounce để ngăn nhấp đôi
        binding.submitButton.setOnClickListener(
            DebouncingClickListener {
                submitForm()
            }
        )
    }

    private fun submitForm() {
        // Gửi dữ liệu biểu mẫu
    }
}

Debounce là một mẫu quan trọng trong phát triển Android. Người dùng có thể vô tình nhấn nút hai lần trong thời gian ngắn, dẫn đến gửi biểu mẫu hai lần hoặc thực hiện hành động hai lần. Giải pháp: một wrapper DebouncingClickListener chặn các nhấp lặp lại trong 500–1000 ms. Google khuyến nghị cách tiếp cận này trong các ví dụ chính thức của Android Architecture Components. Cho RecyclerView, setOnItemClickListener được cung cấp qua ListAdapter với giao diện callback.

Chạm nhiều lần: Double Tap và Triple Tap

Double Tap (chạm đôi) — hai lần chạm liên tiếp với khoảng cách không quá 300–400 ms. Được sử dụng để phóng to hình ảnh (bản đồ, ảnh), thích trong mạng xã hội (Instagram, Twitter), quay lại đầu danh sách (Điện thoại, Tin nhắn). Triple Tap (chạm ba) ít phổ biến hơn — chủ yếu được sử dụng cho các chức năng trợ năng (chế độ toàn màn hình, VoiceOver) và trong trò chơi.

Triển khai Double Tap yêu cầu đồng bộ hóa với Tap đơn: nếu bạn thêm cả hai cử chỉ vào một phần tử, Tap đơn sẽ kích hoạt với độ trễ (hệ thống chờ lần nhấn thứ hai). Trong iOS, độ trễ này được quản lý qua require(toFail:) — Tap đơn bị hoãn lại cho đến khi chắc chắn rằng Double Tap sẽ không xảy ra. Trong Android, GestureDetector.OnDoubleTapListener được sử dụng với các callback onSingleTapConfirmed và onDoubleTap. onSingleTapConfirmed chỉ được gọi sau thời gian chờ khi hệ thống chắc chắn đó là một lần chạm đơn.

// Double Tap trong Android qua GestureDetector
class PhotoViewerActivity : AppCompatActivity() {

    private var gestureDetector: GestureDetector? = null

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

        gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {

            override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
                toggleControls() // hiển thị/ẩn điều khiển
                return true
            }

            override fun onDoubleTap(e: MotionEvent): Boolean {
                zoomToPoint(e.x, e.y) // phóng to tại điểm chạm
                return true
            }
        })
    }
}

Double tap kiểu Instagram là mẫu UX phổ biến cho ứng dụng xã hội. Chạm đôi vào ảnh kích hoạt hoạt ảnh thích (biểu tượng trái tim). Nó được triển khai qua GestureDetector trong Android hoặc UITapGestureRecognizer với numberOfTapsRequired=2 trong iOS. Cho hoạt ảnh, Core Animation được sử dụng trên iOS và ObjectAnimator/AnimatorSet trên Android. Thời gian phản hồi double tap phải tối thiểu — người dùng mong đợi hoạt ảnh ngay lập tức sau lần chạm thứ hai.

Nguyên tắc sử dụng Tap trong giao diện

Human Interface Guidelines của Apple và Material Design của Google có yêu cầu cụ thể cho Tap. Kích thước tối thiểu của mục tiêu chạm: 44×44 pt cho iOS và 48×48 dp cho Android. Điều này tương ứng với ~9 mm trên màn hình — kích thước đầu ngón tay của người trưởng thành trung bình. Khoảng cách giữa các mục tiêu chạm phải ít nhất 8 pt/dp để ngăn chạm nhầm.

Phản hồi trực quan là bắt buộc cho Tap. Người dùng phải thấy rằng lần chạm đã được đăng ký: thay đổi màu sắc, độ trong suốt, hoạt ảnh gợn sóng hoặc làm nổi bật. Nếu không có phản hồi, người dùng có thể chạm lại, gây ra các hành động không mong muốn. Trong iOS, hoạt ảnh làm nổi bật chạm tiêu chuẩn là thay đổi độ trong suốt xuống 0.3 với thời gian 0.15 giây. Trong Android — hiệu ứng gợn sóng Material lan từ điểm chạm. Đừng trì hoãn phản hồi trực quan — người dùng sẽ thấy phản ứng đồng thời với lần chạm.