Keyboard Avoidance — bản chất, phương pháp triển khai và dịch chuyển giao diện

Keyboard Avoidance là gì

Keyboard Avoidance là tập hợp các kỹ thuật đảm bảo khả năng hiển thị của trường nhập liệu đang hoạt động khi bàn phím hệ thống xuất hiện trên iOS. Vấn đề cơ bản: bàn phím chiếm tới 50% màn hình và che phủ nửa dưới của giao diện, bao gồm các trường văn bản, nút gửi và các thành phần khác.

Có ba cách tiếp cận chính để triển khai: quản lý thủ công qua Keyboard Notifications (phương pháp cổ điển, hoạt động từ iOS 3.0), sử dụng UIScrollView với cuộn tự động (Apple khuyến nghị) và Keyboard Layout Guide (phương pháp hiện đại với iOS 15+). Lựa chọn phụ thuộc vào phiên bản iOS tối thiểu được hỗ trợ và độ phức tạp của giao diện.

Theo Apple, việc thiếu Keyboard Avoidance là một trong những nguyên nhân phổ biến nhất dẫn đến từ chối ứng dụng trong quá trình xem xét nếu các trường văn bản bị bàn phím che hoàn toàn. App Store Guidelines yêu cầu rõ ràng rằng tất cả các thành phần tương tác phải luôn có thể truy cập được trong khi nhập liệu.

Tại sao iOS không tự động làm việc này

iOS không thể tự động xác định thành phần nào cần duy trì hiển thị vì nó không biết ngữ nghĩa của giao diện. Trong một biểu mẫu đơn giản với một trường văn bản, chỉ cần di chuyển toàn bộ màn hình lên trên là đủ. Trong giao diện phức tạp với bảng tùy chỉnh, nút nổi và nhiều phần, cần có logic hành vi khác nhau.

Ngoài ra, một số ứng dụng cố tình không dịch chuyển nội dung — ví dụ, máy tính bàn phím hoặc trình soạn thảo nơi bàn phím là một phần của không gian làm việc. iOS để quyết định cho nhà phát triển, cung cấp các API linh hoạt cho mọi tình huống.

Thông báo khung bàn phím

UIKeyboardWillShowNotification là thông báo chính mà iOS gửi trước khi bàn phím xuất hiện. Nó chứa CGRect với vị trí cuối cùng của bàn phím trong từ điển UIResponder.keyboardFrameEndUserInfoKey, cũng như thời gian hoạt ảnh trong UIResponder.keyboardAnimationDurationUserInfoKey.

Trình xử lý thông báo cần tính toán phần chồng lấp giữa trường văn bản đang hoạt động và bàn phím, sau đó thay đổi lề dưới (contentInset hoặc frame) của vùng chứa. Nếu trường nằm dưới mép trên của bàn phím, nội dung sẽ dịch chuyển lên trên bằng phần chồng lấp. Khi bàn phím ẩn, lề trở lại giá trị ban đầu.

@objc func keyboardWillShow(_ notification: Notification) {
    guard let keyboardFrame = notification
        .userInfo?[UIResponder.keyboardFrameEndUserInfoKey]
        as? CGRect else { return }
    
    let keyboardHeight = keyboardFrame.height
    scrollView.contentInset.bottom = keyboardHeight
    scrollView.verticalScrollIndicatorInsets.bottom = keyboardHeight
}

Khi sử dụng thông báo, điều quan trọng là xử lý hoạt ảnh đồng bộ với bàn phím hệ thống. iOS cung cấp đường cong hoạt ảnh (UIResponder.keyboardAnimationCurveUserInfoKey) và thời gian. Sử dụng UIView.animate với các tham số này để nội dung dịch chuyển mượt mà, đồng thời với sự xuất hiện của bàn phím.

Keyboard Layout Guide trong iOS 15+

UIScrollView.keyboardLayoutGuide là API hiện đại cho Keyboard Avoidance, được giới thiệu trong iOS 15. Nó tự động theo dõi vị trí của bàn phím và cập nhật các ràng buộc Auto Layout kết nối phần dưới của giao diện với mép trên của bàn phím.

Để sử dụng, chỉ cần kích hoạt layout guide trên UIScrollView hoặc UIStackView và gắn ràng buộc dưới của nội dung vào nó. Không cần thao tác thủ công với thông báo, tính toán chiều cao hay hoạt ảnh — hệ thống tự động làm mọi thứ, đồng bộ hóa hoạt ảnh với việc xuất hiện và ẩn bàn phím.

// Bật Keyboard Layout Guide (iOS 15+)
scrollView.keyboardLayoutGuide.followsUndockedKeyboard = true

// Ghim ràng buộc dưới vào đầu bàn phím
contentView.bottomAnchor.constraint(
    equalTo: scrollView.keyboardLayoutGuide.topAnchor
).isActive = true

followsUndockedKeyboard là thuộc tính xác định liệu guide có phản ứng với bàn phím có thể tách khỏi mép dưới (trên iPad) hay không. Chỉ đặt true nếu giao diện hoạt động chính xác với bàn phím nổi. Đối với iPhone, thuộc tính này bị bỏ qua — bàn phím luôn được gắn vào mép dưới.

UIScrollView và bàn phím

UIScrollView là vùng chứa mà Apple khuyến nghị sử dụng làm nền tảng cho Keyboard Avoidance. Khi bàn phím xuất hiện, scroll view tăng contentInset.bottom, cho phép cuộn nội dung lên trên và làm cho trường đang hoạt động hiển thị.

Phương thức chính là scrollRectToVisible, cuộn scroll view theo chương trình để hình chữ nhật được chỉ định (trường văn bản đang hoạt động) nằm trong vùng hiển thị. Kết hợp thay đổi contentInset với lệnh gọi scrollRectToVisible đảm bảo trường không chỉ được hiển thị mà còn ở phần trên của vùng nhìn thấy.

func adjustScrollForKeyboard(
    keyboardHeight: CGFloat,
    activeField: UIView
) {
    scrollView.contentInset.bottom = keyboardHeight
    scrollView.verticalScrollIndicatorInsets.bottom = keyboardHeight
    
    var visibleRect = view.frame
    visibleRect.size.height -= keyboardHeight
    
    if activeField.frame.origin.y > visibleRect.maxY {
        scrollView.scrollRectToVisible(
            activeField.frame, animated: true
        )
    }
}

Đối với UIViewController với UITableView, Apple khuyến nghị sử dụng UITableViewController, tự động điều chỉnh contentInset khi bàn phím xuất hiện. Nếu bạn sử dụng UIViewController với một bảng được thêm vào, bạn cần triển khai Keyboard Avoidance thủ công — UITableViewController không cung cấp hành vi này cho các bộ điều khiển tùy chỉnh.

Auto Layout và Keyboard Avoidance

Auto Layout cho phép triển khai Keyboard Avoidance mà không cần lập trình hoạt ảnh — chỉ cần thay đổi hoạt tính (isActive) của một ràng buộc cụ thể hoặc cập nhật hằng số của nó để phản hồi lại thông báo bàn phím.

Một sơ đồ điển hình: tạo IBOutlet NSLayoutConstraint cho lề dưới của scroll view hoặc nội dung, và trong trình xử lý keyboardWillShow đặt constraint.constant = keyboardHeight, và trong keyboardWillHide đặt lại thành 0. Cập nhật bố cục qua layoutIfNeeded bên trong khối animate để có sự chuyển tiếp mượt mà.

Khi sử dụng UIStackView, việc thay đổi các ràng buộc lề dưới cũng hoạt động: stack view tự động phân phối lại các thành phần con. Tuy nhiên, nếu stack view nằm bên trong UIScrollView, tốt hơn nên quản lý contentInset của chính scroll view thay vì các ràng buộc bên trong nó.

Giải pháp bên thứ ba cho Keyboard Avoidance

IQKeyboardManager là thư viện phổ biến nhất (hơn 16.000 sao trên GitHub) triển khai Keyboard Avoidance tự động mà không cần một dòng mã nào trong bộ điều khiển. Nó sử dụng method swizzling để theo dõi các trường văn bản và tự động nâng nội dung khi bàn phím xuất hiện.

Thư viện cung cấp cài đặt linh hoạt: bạn có thể chỉ định khoảng cách giữa trường và bàn phím, bật/tắt cho các bộ điều khiển cụ thể và cấu hình hành vi cho UITextView và các chế độ xem nhập tùy chỉnh. Tuy nhiên, method swizzling có thể xung đột với các thư viện khác và Apple không khuyến nghị cách tiếp cận này cho mã sản xuất do các tác dụng phụ không thể dự đoán.

Các lựa chọn thay thế bao gồm TPKeyboardAvoiding (thư viện nhẹ, ~2.000 sao) và KeyboardManager từ cộng đồng. Đối với các dự án hiện đại, Apple khuyến nghị sử dụng các công cụ tích hợp iOS 15+ và đối với các dự án có phiên bản tối thiểu thấp hơn — UIScrollView với contentInset, đây là giải pháp tích hợp đáng tin cậy nhất.