iOS Managing & Handling the Keyboard [ Tap Gesture Recognizer ]

While making a TODO app on my own, I think it’s good to post a summary of handling keyboards for my study logs. Whether you are a beginner or experts, you will be always dealing with the handling of keyboards. below are the topics that i’m gonna share today!

• Move view when the keyboard is shown
• Handle the dismissal of the keyboard

Move View when the Keyboard is shown

When you are working on the textfield, you will notice that the content of the view will be covered by keyboard when it’s shown

In this case, we also have to manage the keyboard when the editing session begins and ends.

💡 press command + k to show / hide the keyboard on the simulator

when the keyboard overlaps the contents of your app, it’s pretty annoying👿. you can’t type the text on the textfield anymore.. or getting user’s input. then how to solve this problem?

Move the view above to the keyboard

We can’t just move the keyboard because it will probably look weird so let’s move the view instead! To move the View, you have to detect when the keyboard is up or down. In other words, you have to observe the keyboard so that you can change the constraints of the hidden part.

Receiving Keyboard Notifications

when the keyboard is shown or hidden, iOS sends out the following notifications to any registered observers

• UIKeyboardWillShowNotification
• UIKeyboardDidShowNotification
• UIKeyboardWillHideNotification
• UIKeyboardDidHideNotification

Each keyboard notification includes information about the size and position of the keyboard on the screen. you can access this information from the userInfo directory of each notification using the UIKeyboardFrameBeginUserInfoKey and UIKeyboardFrameEndUserInfoKey keys.

I will be using NotificationCenter to make an observer to detect when the keyboard shows up or down.

NotificationCenter : A notification dispatch mechanism that enables the broadcast of information to registered observers.

Objects register with a notification center to receive notifications using addObserver(_:selector:name:object:) or addObserver(forName:object:queue:using:) methods.

NotificationCenter.default.addObserver(self, selector: #selector(adjustInputView), name: UIResponder.keyboardWillShowNotification, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(adjustInputView), name: UIResponder.keyboardWillHideNotification, object: nil)

so when the notification receive notifications from the UIResponder [keyboardWillShowNotification, keyboardWillHideNotification], it will call a method named adjustInputView

For me, The view of bottom Constraint is set to 0 that’s why it sticks to the safe bottom area but if you want to move the view to above the keyboard, drag and drop to connect outlet to the ViewController for you to adjust the bottom constraint.

Here’s my adjustInputView method

@objc private func adjustInputView(noti: Notification) {
     guard let userInfo = noti.userInfo else { return }
     guard let keyboardFrame = (userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else { return }
     if noti.name == UIResponder.keyboardWillShowNotification {
          let adjustmentHeight = keyboardFrame.height -      view.safeAreaInsets.bottom
          inputViewBottom.constant = adjustmentHeight
     }
     else {
          inputViewBottom.constant = 0
     }
     print("\(keyboardFrame)")
}

above code is checking if the notification.name is equal to keyboardWillShowNotification or not. if yes, it means the keyboard showed up, we will get the height of the keyboard and add the height(or add the keyboard’s height) to your outlet(just linked above) to make the view move. otherwise, set the value to 0 or the default value.

then the keyboard won’t hide your contents anymore. 👏🏻

Handle the dismissal of the keyboard

The difference between the two images below is with the Tap Gestures or not.

Handling Tap Gestures : Use brief taps on the screen to implement button-like interactions with your content.

For example, sometimes when you edit something, you want to dismiss your keyboard or you decide not to type it but what if the keyboard stays there forever? it’s also annoying too!

So what i did is add the tap gesture to dismiss the keyboard whenever you are touching somewhere else except the area that you are editing.

Here’s the simplest way to implement it!

1. Go to storyboard and add the Tap Gesture Recognizer to your View Controller

2. From the View, control + drag and drop to Tap Gesture Recognizer. Connect the outlet

3. Go to ViewController, and control + drag and drop to create an IBAction and the write single code

TextField.resignFirstResponder()

resignFirstResponder() : Notifies this object that it has been asked to relinquish its status as first responder in its window. In other words, the textfield is no longer the first priority or responder.

4. When you build and run the code, you will be able to handle the keyboard! 👏🏻

references :

resignFirstResponder()

HandlingTapGestures

Managing the Keyboard

Awesome keyboard library that can be easily implement it with animation:

freshOS/KeyboardLayoutGuide