How to Create a Custom iOS 8 Keyboard

Hey Guys,

In this post I’m going to show you how to create a custom keyboard in iOS 8. Now you’ll probably ask, why do we need a custom keyboard, why not just use the stock iOS keyboard?

Well, there’s a number of reasons why a custom keyboard is better than the stock iOS keyboard. For starters:

•    You can use it to input text that is not supported in the stock iOS keyboard.
•     You can implement your own custom keyboard UI
•     You can add functionality to it that can otherwise never be achieved from the normal keyboard

However the most basic functionality that should be implemented in any keyboard is the ability to respond to tap gestures and provide text in the form of an attributed string, and also, the ability to switch to another keyboard if you wish to do so, something that’s missing in the stock iOS keyboard.

Some of the most common keyboard features that iOS users expect include:

• A way to switch to another keyboard by tapping on the globe key in the iOS 8 keyboard (shown below).
• Auto correction and suggestion
• Auto capitalization
• Automatic insertion of a period on tapping double space
• Caps lock support and

 

 

The ability to change the keyboard according to the UIKeyboardType.

• UIKeyboardTypeNumberPad
• UIKeyboardTypePhonePad
• UIKeyboardTypeEmailAddress
• etc.

At the moment, there’s no APIs available that you can use to add the above features to the stock iOS keyboard, so you need to build a custom keyboard if you want to avail these features.

Custom keyboards do have their limitations however, as there a number of stock iOS keyboard features that won’t be available to you in a custom keyboard. Features like:

• General keyboard settings in the Settings app.
• Access to the Securetext input object ( secureTextEntry).
• Phonepad objects.
• A list of keyboards.
• Inline auto correction controls near the insertion point.
• No access to the device microphone, so voice input is not possible.
• The ability to display key artwork above the top edge of the custom keyboard’s primary view

So if those are features you use quite frequently or simply must have, then you should probably stick with the sock iOS keyboard. Otherwise have a look at the tutorial below to build your very own custom keyboard.

To build a custom keyboard you’ll first need to create an API for it. The illustration below depicts the various components that you’ll need to create as part of the custom keyboard API.

 

 

UIInputViewController – this is the primary view controller of your custom keyboard that controls the keyboard and responds to user events. It utilizes the following properties, functions, methods and controllers:

Properties

• inputView – this is the view used for the keyboard, it is the same as the view property
• textDocumentProxy – this is the object that you’ll use to interact with the current text input
• primaryLanguage – is the primary language for your custom keyboard.

Text Document Proxy

• documentContextBeforeInput – this is the textual context before the insertion point in the current text input object
• documentContextAfterInput – this is the textual context after the insertion point in the current text input object

Functions

• (BOOL)hasText; – this is a Boolean value that indicates whether the text-entry objects has any text
• (void)insertText:(NSString *)text – this function inserts a character into the displayed text.
• (void)deleteBackward; – this deletes a character from the displayed text

 Methods

• dismissKeyboard – this is the method that is called to dismiss the keyboard.
• advanceToNextInputMode – this method is used to switch between keyboards

Controllers

• UIInputViewController – this controller conforms to the UITextInputDelegate protocol and notifies you when the text or text selection changes through the selectionWillChange, selectionDidChange, textWillChange and textDidChangeevents

Oh and if you want to disable the custom keyboard interaction in your app and just want to use the stock iOS one instead, you can use the following app delegate.

- (BOOL)application:(UIApplication *)application shouldAllowExtensionPointIdentifier:(NSString *)extensionPointIdentifier

{

if ([extensionPointIdentifier isEqualToString:UIApplicationKeyboardExtensionPointIdentifier]) {

return NO;

}

return YES;

}

Creating a Custom Keyboard

Alright, let’s get started with our tutorial for creating a custom keyboard. Here’s the steps you’ll need to follow.

Step 1: Create a New Project

Open XCode 6 and create a new Single View Application (as shown below)

 

 

Step 2: Add a Text Field

Next, open the Main.storyboard and drag a text field from the Objects Library (this is the text field you’ll use to test the keyboard later). Now, center the text field and add the necessary layout constraints as shown below.

 

 

Step 3: Add the Keyboard Extension

Now, select the project file in the Project Navigator and add a new target by clicking the ‘+’ button at the bottom.

 

Next, select the Application Extension on the left and choose the Custom Keyboard template as depicted below.

Now lets run the Application. When you do that you’ll notice the following screen.

When you select the text field on this screen, you’ll see the standard iOS keyboard appear. Press and hold the globe key on the iOS keyboard to display the list of keyboards. When you do that you’ll see the following screen.

You’ll notice that the custom keyboard you created is not visible in the list. That’s because you need to first install it through the settings App before you can access it from the iOS keyboard’s globe key.

To do that go to go to Settings > General > Keyboard > Add New Keyboard. And then select the Folio3Keyboard App, as depicted in the screenshots below.

 

Now go to your app again and try tapping the the Globe key in the iOS keyboard.

You’ll notice that your custom keyboard is now showing in the list of available keyboards. Please note that this keyboard only has the ability to switch to a custom keyboard if you have one. You will have to add other functionalities like typing, backspace etc. yourself.

Explore our blog

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.