Custom Keyboard Tutorial
Creating your own keyboard for iOS in Swift 4
Introduction
In this tutorial you will learn how to create your own keyboard for iOS Applications using Xcode and Swift 4.
Custom Keyboard isn’t allowed to do and access a lot of things, to know what is allowed and what isn’t allowed I strongly recommend reading the Apple documentation available at the following link www.apple.com.br .
Let’s start
First you must create a new Xcode project and choose a single view application. I named my project as custom keyboard tutorial.
In the Main.storyboard you must add a UITextField. After that you must create an outlet for this UITextField in ViewController.swift.
With the outlet connected with UITextField you must add a line of code in viewDidLoad(). With this following line the app will present the keyboard when open.
The steps above aren't necessary to create a custom keyboard. We are doing these steps because we need to test the keyboard, so now there is an app with only one feature: present a keyboard.
To create a custom keyboard we need to click in our project and add a new target. To do that you just need to click in the plus button in the bottom-left. When clicked, a few templates are shown. We will chose custom keyboard extension. Click the Next button, chose a name for this product, I choose Keyboard, and after that just click finish.
If Xcode shows a popup asking about Keyboard scheme, just click the activate button.
Xcode will then create a new folder in your project with the chosen product name. There are two files, KeyboardViewController.swift and info.plist.
T here is some code in KeyboardViewController. To start creating our own keyboard lets clean the code on the method viewDidLoad.
Now, it is time to create our keyboard layout. RIght click the keyboard folder and choose New File… and choose View. Enter a view name and create.
Xcode will then add a new xib file to the keyboard folder.
You will create your keyboard layout within that file.
For this tutorial we will change Size in inspector > simulated metrics from Inferred to freeform, and change the width to 320 and height to 160 as the following images.
After the view size is configured, it is time to add your keyboard buttons. I will add 4 UIButton in the view.
Now with File’s Owner selected you must set KeyboardViewController.swift as custom class.
Going to KeyboardViewController.swift, there is a outlet named nextKeyboardButton, you must set the button titled change keyboard as reference to this outlet and them create an IBAction to the another buttons.
With outlet and action configured, let’s create a global variable responsible for providing textual context to a custom keyboard.
In viewDidLoad, let’s instantiate this variable and set a target in the nextKeyboardButton outlet, this target will allow the change of keyboards.
Let’s now configure the buttonPressed action, to do that we will just add 2 lines of code in this function.
In this moment our outlet and action are already configured, but we aren’t presenting our keyboard on the screen. To solve this we will create an outlet representing the keyboard view and a function that loads a xib file and adds the file into the view.
After that you just need to call this function in viewDidLoad to present the keyboard.
Now your keyboard is totally configured, you can finally test your keyboard on your device. To do that you must first run the project and after run again with Keyboard scheme selected to install the keyboard on your device.
To add your custom keyboard in your device, you must to go to settings — general — keyboard — keyboards — add new keyboard and select your keyboard.
Tutorial produced by Vinícius Cano Santos and Guilherme Gatto
