Xcode 14 adds support for keyboard layout guides to Interface Builder.

Apple introduced the keyboard layout guide in iOS 15. By creating constraints with the keyboard guide you build layouts that adapt to the keyboard without listening for keyboard notifications. Unfortunately, it was badly broken when first introduced. It was also not available in Interface Builder.

Apple fixed the bugs in iOS 15.4 and now in Xcode 14 it’s also available in Interface Builder:

You can now enable the keyboard layout guide on a scene’s UIView through the size inspector. Constrain views to the layout guide so they adjust during layout when the keyboard shows on screen.

Let’s see what that means.

Showing the Keyboard Layout Guide

Interface Builder hides the keyboard layout guide by default. To show the keyboard layout guide for a view in Interface Builder:

1. Select the view in the document outline to the left of the Interface Builder canvas:

   

2. In the size inspector, enable the Keyboard Layout Guide for the view (at the bottom, below the safe area guide):

   

3. You should then see the Keyboard Layout Guide in the document outline:

   

Beta Bugs?

When the keyboard is not visible the guide should be at the bottom of the screen with a height matching the safe area insets. On an iPhone 13 pro that makes the guide 34 points high. The top of the keyboard layout guide then matches the bottom of the safe area layout guide.

I’m writing this using the first beta release of Xcode 14 which seems to show the keyboard layout guide at the bottom of the screen with zero height in the Interface Builder canvas:

The keyboard guide has the right height at runtime, but Interface Builder shows it incorrectly. I’m assuming that’s a bug in the Xcode 14 beta that Apple will fix (FB10356441).

Note: I’ve also seen a problem with existing projects where the keyboard guide has a zero frame (FB10375112) which leads to layout warnings in Interface Builder.

Adding Constraints

Control-drag between the guide and a view in the document outline to create constraints with the guide. I’ve added a content view and constrained it to the safe area layout guide on all sides except the bottom where I’ve constrained it to the top of the keyboard layout guide:

Note: As mentioned above, Interface Builder has the wrong size and position for the guide so the content view extends to the bottom of the screen. You need to run it on the simulator to see the correct layout:

Showing the Keyboard

I’ve added a text field to the top and a button to the bottom of the content view. Then with the view controller selected, use the attributes inspector to simulate showing the keyboard:

The Interface Builder canvas shows the keyboard layout guide now covers the on-screen keyboard. The content view moves upward keeping the button visible.

Floating Keyboards

On an iPad you can undock the keyboard and move it around the screen. You can have the keyboard layout guide follow the undocked keyboard by setting the option in the attributes inspector:

Unfortunately this doesn’t seem to do anything in the first beta of Xcode 14 (FB10373958). You’ll need to fall back to setting the property in the view controller:

override func viewDidLoad() {
  super.viewDidLoad()
  view.keyboardLayoutGuide.followsUndockedKeyboard = true
}

Adaptive Constraints

Using the keyboard layout guide in Interface Builder should be fine, when the bugs are fixed, if the main concern is to avoid the keyboard. When you want to do more you’ll likely want to create your constraints programmatically.

For example, in my original post on the keyboard layout guide I pinned a toolbar to the top of the keyboard. With the keyboard undocked on a split-screen iPad you need to adapt the active constraints depending on the position of the keyboard:

Interface Builder doesn’t have a way to build these adaptive constraints. For that you’ll need to fall back to programmatic constraints.

See Also

For a recap and an example of building adaptive constraints with the keyboard layout guide:

• Keyboard Layout Guide