Custom Keyboard Extensions: Getting Started

Until iOS 8, your ability to create a custom keyboard in iOS was very limited. Your only option was to create a custom input view to UITextField and UITextView, which meant you could only use your custom keyboard from within your own application.

Then like a hero appearing over the horizon, app extensions came to the rescue! These give you the ability to provide content to apps outside of your own. Keyboard extensions specifically allow your custom interfaces to provide input text to any app the user likes.

In this tutorial, you’ll walk through creating a custom keyboard extension that can be used by other apps.

Keyboard Extension Concepts

Custom keyboard extensions let users add additional keyboards to the list of available keyboards. A great example of an additional keyboard is the emoji keyboard built-in to iOS. If you enable this keyboard, you can tap the globe in the lower left corner of the default system keyboard to switch to it (assuming it’s the next one available).

A custom keyboard can fully replace the system keyboard, or act as a supplement like the emoji keyboard.

Your custom keyboard extensions provide UI that handles user interactions, such as button taps. They convert these actions into Strings and send them to the host text input view. This gives you the freedom to use any of the iOS supported unicode characters.

But just because you added a custom keyboard doesn’t mean it will always be available. Here are some examples where a custom keyboard might be forbidden:

• Secure text input fields when the secureTextEntry is set to true.
• Text input with the keyboard types UIKeyboardTypePhonePad and UIKeyboardTypeNamePhonePad due to carrier character limitations.
• An app author declines the use of keyboard extensions through the AppDelegate method application(_:shouldAllowExtensionPointIdentifier:).

Managing User Expectations

Your success as a keyboard maker depends on your ability to meet the high expectation of users. There’s no room for error with keyboards. Most users have learned to expect certain functionality from their Apple devices, and the best way to understand the subtleties behind keyboard design is to study and play around with the system keyboard.

You’ll find that the default iOS keyboard is responsive, clean, responds dynamically depending on the type of text entry, provides autocorrection and text replacement, and just works.

These are just some of the expectations your users will have. Your job is to meet or exceed those expectations. Remember that the keyboard should never get in the way of what the user is trying to do, and you’ve got most of the UX solved right there.

Requirements

Just like standard iOS apps, there are certain requirements that your keyboard must fulfill before Apple will approve it:

• Next Keyboard Button: All keyboards require a way to switch to the next keyboard in the user’s enabled keyboards list. On the system keyboard, the globe key performs this action. It’s recommended to place this key in the bottom left-hand corner, as the system keyboard does, for consistency.
• App Purpose: Every keyboard extension must come bundled within a host app. This app must actually serve a purpose and provide the user with acceptable functionality. Yes, that measurement is subjective, and yes, that means you’ll actually have to put some time and thought into your host app!
• Trust: Constant news of data leaks has made users extremely sensitive about their data. As one of the main points where data flows into your apps, keyboards are a potentially vulnerable place for user data. It’s the keyboard author’s responsibility to ensure the safety of users’ keystroke data. Don’t unintentionally create a key-logger!

With all that background information, you’re probably itching to get your hands dirty.

Getting Started

In this tutorial, you’ll create a Morse Code keyboard. And don’t worry if you’re not already fluent in Morse code… because you will be by the end of this tutorial!

Here’s the scenario: you’ve created an awesome app for teaching people Morse code, but they can only practice while using your app. Now that you’ve learned that keyboard extensions exist, you’ve decided to provide the same great functionality to your users outside of the app!

Download the materials for this project and open the starter project in Xcode; you can find the link at the top or bottom of this tutorial. This is the host app you’ll use to deliver a keyboard extension.

Build and run the starter app. You’ll see the Morse code trainer screen:

This app lets the user practice Morse code using a custom keyboard and cheat sheet.

Morse code uses a series of “dot” and “dash” signals to represent letters. This implementation shows you the current series of signals and the number or letter it represents within the gray bar above the keyboard.

Try tapping combinations of dots and dashes to make letters. To complete a letter and move on to the next one, tap the space key. To enter an actual space, tap the space key twice.

After you’re comfortable with the keyboard functionality, you might be thinking, “My work here is done!” That would be an awesome tutorial, but unfortunately you can only use this keyboard within the sample app — and that defeats the whole purpose of a custom keyboard!

To better understand what’s already provided in the host app and what’s left to do in the keyboard extension, expand the folders in the Project navigator and look around:

Here’s a quick summary of what the files do:

• PracticeViewController.swift: Sets up the demo app UI and functionality.
• MorseColors.swift: Keyboards should support color schemes for both a light and dark display. This file defines color schemes for each type.
• MorseData.swift: Provides a way to convert from a series of “dots” and “dashes” to the equivalent letter and vice versa.
• KeyboardButton.swift: A UIButton subclass to customize the look and feel of keyboard keys.
• MorseKeyboardView.swift / MorseKeyboardView.xib: A custom UIView that handles the layout and functionality of a Morse keyboard. This is where all the Morse-specific logic resides. It declares the protocol MorseKeyboardViewDelegate to notify its delegate to perform certain actions on the text input view. This will allow you to use MorseKeyboardView as both a keyboard input view as well as a keyboard extension.

Now that you’re familiar with the containing app, it’s time to make a keyboard extension!