Keyboard management in iOS Swift - Mini App: Build & Ship

Build: Keyboard Management Screen

This screen has a text field that moves up when the keyboard appears so it is not hidden. It also dismisses the keyboard when tapping outside the text field.

Target UI

-------------------------
| Keyboard Management   |
|-----------------------|
|                       |
| Enter text: [       ] |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
-------------------------

Add a UITextField near the bottom of the screen.

Move the view up when the keyboard appears so the text field is visible.

Move the view back down when the keyboard disappears.

Dismiss the keyboard when tapping anywhere outside the text field.

Starter Code

iOS Swift

import UIKit

class KeyboardManagementViewController: UIViewController {

    let textField = UITextField()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Setup text field
        textField.borderStyle = .roundedRect
        textField.placeholder = "Enter text"
        textField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textField)

        NSLayoutConstraint.activate([
            textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textField.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
            textField.heightAnchor.constraint(equalToConstant: 40)
        ])

        // TODO: Add keyboard notifications and tap gesture recognizer
    }

    // TODO: Add keyboard show/hide handlers
    
    // TODO: Add tap gesture handler to dismiss keyboard
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import UIKit

class KeyboardManagementViewController: UIViewController {

    let textField = UITextField()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Setup text field
        textField.borderStyle = .roundedRect
        textField.placeholder = "Enter text"
        textField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textField)

        NSLayoutConstraint.activate([
            textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            textField.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
            textField.heightAnchor.constraint(equalToConstant: 40)
        ])

        // Register keyboard notifications
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(notification:)), name: UIResponder.keyboardWillShowNotification, object: nil)
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(notification:)), name: UIResponder.keyboardWillHideNotification, object: nil)

        // Add tap gesture recognizer to dismiss keyboard
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
        tapGesture.cancelsTouchesInView = false
        view.addGestureRecognizer(tapGesture)
    }

    @objc func keyboardWillShow(notification: Notification) {
        guard let userInfo = notification.userInfo,
              let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }

        let keyboardHeight = keyboardFrame.height

        // Move view up by keyboard height
        if self.view.frame.origin.y == 0 {
            self.view.frame.origin.y -= keyboardHeight
        }
    }

    @objc func keyboardWillHide(notification: Notification) {
        // Move view back to original position
        if self.view.frame.origin.y != 0 {
            self.view.frame.origin.y = 0
        }
    }

    @objc func dismissKeyboard() {
        view.endEditing(true)
    }

    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

We add observers for keyboard show and hide notifications to know when the keyboard appears and disappears. When the keyboard shows, we get its height and move the whole view up by that height so the text field stays visible above the keyboard. When the keyboard hides, we reset the view position back to normal.

We also add a tap gesture recognizer to the main view. When the user taps anywhere outside the text field, this gesture triggers and dismisses the keyboard by ending editing on the view.

This approach keeps the UI simple and user-friendly by preventing the keyboard from covering the text field and allowing easy dismissal.

Final Result

Completed Screen

-------------------------
| Keyboard Management   |
|-----------------------|
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
| Enter text: [       ] |
|                       |
-------------------------

When the user taps the text field, the keyboard appears and the whole view moves up so the text field is not hidden.

When the user taps outside the text field, the keyboard dismisses and the view moves back down.

Stretch Goal

Add smooth animation when the view moves up and down with the keyboard.

💡 Hint

Use UIView.animate with the keyboard animation duration and curve from notification userInfo.