Tương Tác Người Dùng trong UIKit: Nút Bấm, Nhập Liệu và Sự Kiện

Chào mừng bạn trở lại với series “Lộ trình học Lập trình viên iOS 2025“! Sau khi đã tìm hiểu cách xây dựng giao diện người dùng cơ bản với UIKit và hiểu rõ vòng đời của ViewController, đã đến lúc chúng ta đi sâu vào cách ứng dụng của bạn “lắng nghe” và “phản hồi” lại những gì người dùng thực hiện. Một ứng dụng di động sống động chính là nhờ khả năng tương tác hiệu quả. Trong bài viết này, chúng ta sẽ khám phá các thành phần tương tác cốt lõi trong UIKit: Nút bấm (Buttons), các trường nhập liệu (Text Fields, Text Views) và cơ chế xử lý sự kiện đằng sau chúng.

UIKit và Cơ Chế Xử Lý Sự Kiện Cốt Lõi: Responder Chain

Trước khi đi vào chi tiết các control cụ thể, điều quan trọng là phải hiểu UIKit xử lý các sự kiện tương tác như thế nào. Mỗi sự kiện (chạm, vuốt, lắc thiết bị…) được hệ thống gửi đến đối tượng phù hợp để xử lý. Đối tượng có khả năng xử lý sự kiện này được gọi là Responder. Hầu hết các đối tượng giao diện người dùng (View) trong UIKit, cũng như ViewController và chính đối tượng Application, đều là Responder vì chúng kế thừa từ lớp `UIResponder`.

Khi một sự kiện xảy ra (ví dụ: người dùng chạm vào màn hình), UIKit sẽ xác định Responder đầu tiên có khả năng nhận sự kiện đó (thường là View nơi cú chạm xảy ra). Nếu Responder đầu tiên không xử lý sự kiện, nó sẽ chuyển sự kiện đó cho Responder kế tiếp trong một chuỗi được gọi là Responder Chain. Chuỗi này kéo dài qua các View cha, ViewController quản lý View đó, Window và cuối cùng là đối tượng Application. Sự kiện sẽ tiếp tục đi lên chuỗi cho đến khi có Responder nào đó xử lý nó, hoặc bị loại bỏ nếu không có ai xử lý.

Hiểu về Responder Chain rất quan trọng khi bạn làm việc với các sự kiện phức tạp hơn hoặc cần tùy chỉnh cách xử lý sự kiện trong cấu trúc View phân cấp của mình. Nó là nền tảng cho nhiều cơ chế tương tác khác trong UIKit.

Nút Bấm Là Trái Tim Của Tương Tác Đơn Giản: UIButton

`UIButton` là một trong những control phổ biến và cơ bản nhất để người dùng thực hiện hành động. Từ việc đăng nhập, gửi tin nhắn, đến xác nhận mua hàng, nút bấm luôn đóng vai trò trung tâm.

Tạo và Cấu hình UIButton

Bạn có thể tạo nút bấm theo hai cách chính:

1. **Sử dụng Interface Builder (Storyboards/XIBs):** Kéo một đối tượng Button từ Object Library vào giao diện của bạn trong Storyboard hoặc XIB. Bạn có thể cấu hình hầu hết các thuộc tính như tiêu đề (title), hình ảnh (image), màu sắc, phông chữ… trực tiếp trong Attributes Inspector.
2. **Tạo bằng code:** Khởi tạo một đối tượng `UIButton` và thêm nó vào View cha một cách thủ công.

Ví dụ tạo nút bấm bằng code:

import UIKit

let myButton = UIButton(type: .system) // Hoặc .custom, .detailDisclosure, v.v.
myButton.frame = CGRect(x: 100, y: 100, width: 200, height: 50) // Đặt vị trí và kích thước
myButton.setTitle("Nhấn vào đây!", for: .normal) // Đặt tiêu đề cho trạng thái bình thường
myButton.setTitleColor(.white, for: .normal) // Đặt màu chữ
myButton.backgroundColor = .blue // Đặt màu nền
myButton.layer.cornerRadius = 8 // Làm tròn góc
myButton.translatesAutoresizingMaskIntoConstraints = false // Quan trọng khi dùng Auto Layout

// Thêm nút vào View cha (ví dụ: self.view trong ViewController)
// self.view.addSubview(myButton)

// Nếu dùng Auto Layout
// NSLayoutConstraint.activate([
//     myButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
//     myButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
//     myButton.widthAnchor.constraint(equalToConstant: 200),
//     myButton.heightAnchor.constraint(equalToConstant: 50)
// ])

`UIButton` có nhiều trạng thái (state) khác nhau như `.normal`, `.highlighted`, `.disabled`, `.selected`. Bạn có thể cấu hình hiển thị cho từng trạng thái bằng các phương thức như `setTitle(_:for:)`, `setImage(_:for:)`, `setBackgroundImage(_:for:)`, v.v.

Xử lý Sự kiện Nút Bấm: Target-Action

Cơ chế phổ biến nhất để phản hồi lại thao tác nhấn nút (hoặc các control khác kế thừa từ `UIControl`) là sử dụng mô hình Target-Action. Bạn chỉ định một “target” (đối tượng sẽ nhận sự kiện, thường là ViewController) và một “action” (phương thức cụ thể sẽ được gọi khi sự kiện xảy ra).

Khi sử dụng Interface Builder, bạn có thể kết nối nút bấm với một `IBAction` trong ViewController của mình. Xcode sẽ tự động tạo kết nối Target-Action cho bạn.

Khi tạo bằng code, bạn sử dụng phương thức `addTarget(_:action:for:)`:

myButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

• `target`: `self` ở đây là ViewController chứa nút bấm.
• `action`: `#selector(buttonTapped)` tạo một Selector trỏ đến phương thức `buttonTapped`. Phương thức này cần được đánh dấu `@objc` vì selector là cơ chế của Objective-C mà Swift tương tác qua. Tìm hiểu thêm về `@objc` trong kiến thức Swift cơ bản.
• `for`: Kiểu sự kiện mà bạn muốn phản hồi. `.touchUpInside` là sự kiện phổ biến nhất cho nút bấm, xảy ra khi người dùng chạm xuống và nhấc ngón tay lên *bên trong* ranh giới của nút.

Phương thức `buttonTapped` trong ViewController sẽ trông như sau:

@objc func buttonTapped() {
    print("Nút đã được nhấn!")
    // Thực hiện hành động mong muốn ở đây
}

Bạn có thể tùy chọn thêm tham số `sender: UIButton` hoặc `event: UIEvent` vào phương thức action nếu cần truy cập thông tin về nút hoặc sự kiện đã kích hoạt nó.

@objc func buttonTapped(_ sender: UIButton) {
    print("Nút \(sender.title(for: .normal) ?? "không tên") đã được nhấn!")
}

Thu Thập Thông Tin Từ Người Dùng: UITextField và UITextView

Để người dùng nhập văn bản, số, hoặc các loại dữ liệu khác, chúng ta sử dụng `UITextField` cho nhập liệu một dòng và `UITextView` cho nhập liệu nhiều dòng.

UITextField: Nhập Liệu Một Dòng

`UITextField` thường dùng cho các trường như tên đăng nhập, mật khẩu, tiêu đề ngắn. Nó chỉ cho phép nhập văn bản trên một dòng duy nhất.

Tạo và cấu hình `UITextField`:

let myTextField = UITextField()
myTextField.frame = CGRect(x: 50, y: 200, width: 300, height: 40)
myTextField.borderStyle = .roundedRect // Đặt kiểu viền
myTextField.placeholder = "Nhập tên của bạn..." // Gợi ý cho người dùng
myTextField.keyboardType = .default // Kiểu bàn phím (.numberPad, .emailAddress, .URL...)
myTextField.isSecureTextEntry = false // true cho mật khẩu
myTextField.returnKeyType = .done // Kiểu phím Return trên bàn phím ảo (.next, .go, .search...)
myTextField.translatesAutoresizingMaskIntoConstraints = false // Khi dùng Auto Layout

// self.view.addSubview(myTextField)
// Cấu hình Auto Layout...

UITextView: Nhập Liệu Nhiều Dòng

`UITextView` dùng cho các trường văn bản dài hơn như nội dung email, ghi chú, mô tả sản phẩm. Nó hỗ trợ cuộn (scrolling) tự động khi nội dung vượt quá kích thước hiển thị.

Tạo và cấu hình `UITextView`:

let myTextView = UITextView()
myTextView.frame = CGRect(x: 50, y: 300, width: 300, height: 150)
myTextView.font = UIFont.systemFont(ofSize: 16) // Đặt phông chữ
myTextView.textColor = .black // Đặt màu chữ
myTextView.isEditable = true // Cho phép sửa đổi
myTextView.isSelectable = true // Cho phép chọn văn bản
myTextView.text = "Nhập ghi chú của bạn ở đây..."
myTextView.translatesAutoresizingMaskIntoConstraints = false // Khi dùng Auto Layout

// self.view.addSubview(myTextView)
// Cấu hình Auto Layout...

Xử lý Sự kiện Nhập Liệu: Delegation và Notifications

Không giống `UIButton` chủ yếu dùng Target-Action, `UITextField` và `UITextView` sử dụng mô hình Delegation để thông báo về các sự kiện liên quan đến nhập liệu và chỉnh sửa văn bản.

Bạn cần gán một đối tượng làm “delegate” cho text field/text view. Đối tượng này (thường là ViewController) phải tuân thủ các Protocol `UITextFieldDelegate` hoặc `UITextViewDelegate` tương ứng. Các Protocol này định nghĩa các phương thức tùy chọn (optional methods) mà delegate có thể triển khai để phản hồi các sự kiện.

Mô hình Delegation là một pattern thiết kế phổ biến trong iOS, nơi một đối tượng ủy quyền (delegate) cho một đối tượng khác xử lý một số nhiệm vụ hoặc phản hồi các sự kiện thay mặt nó.

Ví dụ với `UITextFieldDelegate`:

Trong ViewController của bạn, khai báo tuân thủ Protocol và gán delegate:

class MyViewController: UIViewController, UITextFieldDelegate {
    // ... các outlet hoặc thuộc tính khác ...
    let myTextField = UITextField()

    override func viewDidLoad() {
        super.viewDidLoad()
        // ... setup UI ...
        myTextField.delegate = self // Gán ViewController làm delegate
    }

    // MARK: - UITextFieldDelegate Methods

    // Được gọi khi bắt đầu chỉnh sửa text field
    func textFieldDidBeginEditing(_ textField: UITextField) {
        print("Bắt đầu chỉnh sửa text field")
    }

    // Được gọi mỗi khi nội dung text field thay đổi
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // Ví dụ: Giới hạn độ dài ký tự
        let currentText = textField.text ?? ""
        guard let stringRange = Range(range, in: currentText) else { return false }
        let updatedText = currentText.replacingCharacters(in: stringRange, with: string)
        return updatedText.count <= 50 // Chỉ cho phép tối đa 50 ký tự
    }

    // Được gọi khi người dùng nhấn phím Return
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder() // Ẩn bàn phím
        print("Người dùng nhấn Return")
        return true // Cho phép sự kiện Return xảy ra
    }

    // Được gọi khi kết thúc chỉnh sửa text field
    func textFieldDidEndEditing(_ textField: UITextField) {
        print("Kết thúc chỉnh sửa, nội dung là: \(textField.text ?? "")")
    }

    // Đảm bảo delegate không bị giải phóng sớm nếu dùng ARC
    // (Lưu ý về quản lý bộ nhớ, xem thêm bài viết về <a href="https://tuyendung.evotek.vn/quan-ly-bo-nho-trong-swift-arc-tham-chieu-va-cac-thuc-hanh-tot-nhat/">Quản Lý Bộ Nhớ trong Swift</a>)
}

`UITextViewDelegate` cũng có các phương thức tương tự như `textViewDidBeginEditing(_:)`, `textViewDidChange(_:)`, `textViewDidEndEditing(_:)`. Phương thức `textView(_:shouldChangeTextIn:replacementText:)` cũng hoạt động tương tự như của text field.

Ngoài Delegation, sự kiện liên quan đến bàn phím (xuất hiện, ẩn đi) thường được xử lý bằng Notifications thông qua `NotificationCenter`. Các thông báo như `UIResponder.keyboardWillShowNotification` và `UIResponder.keyboardWillHideNotification` cho phép bạn điều chỉnh giao diện (ví dụ: đẩy View lên để tránh bàn phím che khuất text field) khi bàn phím xuất hiện hoặc ẩn đi. Lưu ý việc hủy đăng ký (unregister) các observer khi ViewController bị deallocate để tránh rò rỉ bộ nhớ.

Tương Tác Nâng Cao Với UIGestureRecognizer

Nút bấm chỉ xử lý các thao tác chạm đơn giản. Để xử lý các thao tác phức tạp hơn như vuốt (swipe), kéo (pan), chụm/mở (pinch), xoay (rotation), nhấn giữ (long press), chúng ta sử dụng các lớp kế thừa từ `UIGestureRecognizer`.

Gesture Recognizer là các đối tượng tách biệt với View. Bạn tạo một đối tượng Gesture Recognizer, cấu hình nó, và sau đó thêm nó vào View mà bạn muốn nó “lắng nghe” các thao tác cử chỉ.

Ví dụ thêm một Tap Gesture Recognizer vào một View:

let myView = UIView() // Giả sử đây là View bạn muốn thêm cử chỉ vào
myView.backgroundColor = .red // Đặt màu để dễ nhìn

// ... thêm myView vào subview và cấu hình frame/constraints ...

// 1. Tạo Gesture Recognizer
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))

// 2. Thêm Gesture Recognizer vào View
myView.addGestureRecognizer(tapGesture)

Phương thức xử lý cử chỉ cũng sử dụng mô hình Target-Action và cần được đánh dấu `@objc`. Nó nhận chính gesture recognizer làm tham số:

@objc func handleTap(_ sender: UITapGestureRecognizer) {
    // Kiểm tra xem cử chỉ đã kết thúc chưa (đối với các cử chỉ liên tục như Pan, Pinch)
    if sender.state == .recognized {
        // Xử lý sự kiện tap tại đây
        print("View đỏ đã được Tap!")

        // Lấy vị trí chạm trong View
        let location = sender.location(in: myView)
        print("Vị trí chạm: \(location)")
    }
}

Các loại Gesture Recognizer phổ biến:

• `UITapGestureRecognizer`: Nhận diện các cú chạm (tap). Có thể cấu hình số lần chạm hoặc số ngón tay.
• `UIPinchGestureRecognizer`: Nhận diện cử chỉ chụm/mở. Cung cấp scale và velocity.
• `UIPanGestureRecognizer`: Nhận diện cử chỉ kéo. Cung cấp translation (độ dịch chuyển) và velocity.
• `UISwipeGestureRecognizer`: Nhận diện cử chỉ vuốt theo một hướng cụ thể.
• `UILongPressGestureRecognizer`: Nhận diện cử chỉ nhấn giữ.
• `UIRotationGestureRecognizer`: Nhận diện cử chỉ xoay. Cung cấp rotation và velocity.

Gesture Recognizer cung cấp một cách mạnh mẽ và linh hoạt để thêm các tương tác phức tạp vào ứng dụng của bạn mà không cần tự mình xử lý các sự kiện chạm cấp thấp.

Tóm Lại: Các Cơ Chế Xử Lý Tương Tác Chính

Đến đây, chúng ta đã thấy một số cơ chế chính mà UIKit sử dụng để xử lý tương tác người dùng. Dưới đây là bảng tóm tắt để giúp bạn dễ hình dung:

Thực Hành Tốt Khi Xử Lý Tương Tác

• Quản lý Bàn phím: Luôn cung cấp cách để người dùng ẩn bàn phím khi hoàn thành nhập liệu (ví dụ: nhấn Return, chạm ra ngoài). Phương thức `resignFirstResponder()` trên text field/text view sẽ giúp bạn làm điều này. Phản ứng với các Notification của bàn phím để điều chỉnh UI là cần thiết cho trải nghiệm tốt.
• Trạng thái Control: Sử dụng thuộc tính `isEnabled` của các control để bật/tắt chúng dựa trên trạng thái của ứng dụng (ví dụ: chỉ bật nút “Đăng nhập” khi người dùng đã nhập cả tên và mật khẩu).
• Phản hồi Trực quan: Đảm bảo các control tương tác có phản hồi trực quan khi được chạm (ví dụ: trạng thái `.highlighted` của nút). Điều này giúp người dùng biết rằng thao tác của họ đã được ghi nhận.
• Xử lý trên Main Thread: Tất cả các cập nhật giao diện người dùng và xử lý sự kiện tương tác từ người dùng phải xảy ra trên Main Thread (luồng chính). Nếu bạn cần thực hiện các tác vụ nặng (như tải dữ liệu mạng) sau khi người dùng tương tác, hãy chuyển chúng sang luồng nền để tránh làm đơ giao diện. Tìm hiểu thêm về Đa luồng trong Swift.
• Khả năng Truy cập (Accessibility): Đừng quên làm cho các control tương tác của bạn dễ dàng truy cập cho người dùng khuyết tật. Cung cấp `accessibilityLabel` rõ ràng cho các nút và trường nhập liệu.
• Validate Input: Luôn kiểm tra dữ liệu mà người dùng nhập vào các text field/text view trước khi xử lý (ví dụ: kiểm tra định dạng email, số điện thoại). Sử dụng phương thức delegate `shouldChangeCharactersIn` có thể hữu ích cho việc validate ngay khi gõ. Áp dụng kỹ thuật xử lý lỗi để thông báo cho người dùng nếu nhập sai.

Kết Luận

Tương tác người dùng là yếu tố quan trọng biến một giao diện tĩnh thành một ứng dụng có ích và dễ sử dụng. UIKit cung cấp các khối xây dựng mạnh mẽ như `UIButton`, `UITextField`, `UITextView` cùng với các cơ chế xử lý sự kiện linh hoạt như Target-Action, Delegation và Gesture Recognizers.

Việc nắm vững cách sử dụng và kết hợp các thành phần này sẽ giúp bạn xây dựng những ứng dụng iOS không chỉ đẹp mắt mà còn có trải nghiệm người dùng tuyệt vời. Hãy thực hành bằng cách tạo các ứng dụng nhỏ với nhiều loại tương tác khác nhau để củng cố kiến thức. Đây là một bước quan trọng trên lộ trình trở thành nhà phát triển iOS chuyên nghiệp.

Trong bài viết tiếp theo của series, chúng ta sẽ đi sâu hơn vào cách tổ chức và trình bày dữ liệu phức tạp bằng `UITableView` và `UICollectionView` – những control tương tác cũng dựa rất nhiều vào mô hình Delegation. Hẹn gặp lại!