Move View Behind Keyboard iOS Tutorial

When a user begins editing a text object the keyboard is diplayed. It is possible for the keyboard to be placed on top of the text object that the user wanted to edit. When this happens, you must adjust your content so that the target object remains visible. In this tutorial a Text Field will be edited, when the keyboard appears the Text Field will move upwards to keep it visible. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSMoveViewKeyboardTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and drag a Text View to the main view so the whole text view will be the size of the main view. Select the text view and copy the sample text. Paste the sample text twice so the text view will be filled with text by two-thirds. Select the text view and select the “Resolve Auto Layout button”. Choose “reset to suggested constraints.”.

The Storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Text Field to the ViewController class  and create the following Outlet.

Go to the ViewController.swift file and change the viewDidLoad method 

override func viewDidLoad() {
    super.viewDidLoad()
        
    let notificationCenter = NotificationCenter.default
    notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name: UIResponder.keyboardWillHideNotification, object: nil)
    notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name: UIResponder.keyboardWillChangeFrameNotification, object: nil)
}

Notifications are an way to send messages between objects. iOS broadcasts various notifications related to the keyboard on the screen. In this tutorial we will use the keyboardWillHideNotification and keyboardWillChangeFrameNotification. To listen for notifications, an object must add itself as an observer. When the notifcation is send the adjustForKeyboard method is called.

@objc func adjustForKeyboard(notification: Notification)
{
    // 1
    let userInfo = notification.userInfo!
     
    // 2
    let keyboardScreenEndFrame = (userInfo[UIResponder.keyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
    let keyboardViewEndFrame = view.convert(keyboardScreenEndFrame, from: view.window)
        
    // 3
    if notification.name == UIResponder.keyboardWillHideNotification {
        textView.contentInset = UIEdgeInsets.zero
    } else {
       textView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: keyboardViewEndFrame.height, right: 0)
    }
    textView.scrollIndicatorInsets = textView.contentInset
        
    // 4
    let selectedRange = textView.selectedRange
    textView.scrollRangeToVisible(selectedRange)
}
  1. userInfo is a Dictionary with notification information

  2. UIKeyboardFrameEndUserInfoKey gives back the size of the keyboard frame

  3. adjust the insets of the text view

  4. Scroll the text view so the text entry cursor is visible

Build and Run the project, click inside the Text Field and watch the Text Field animate up when the keyboard appears. When the  Enter key is pressed the Text Field moves back to its original locations. 

You can download the source code of the IOSMoveViewKeyboardTutorial at the ioscreator repository on Github.