Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

After the view size is configured, it is time to add your keyboard buttons. I will add 4 UIButton in the view.

Image for post
Image for post

Now with File’s Owner selected you must set KeyboardViewController.swift as custom class.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

Tutorial produced by Vinícius Cano Santos and Guilherme Gatto

Image for post
Image for post
Vinícius Cano Santos
Image for post
Image for post
Guilherme Gatto

Apple Developer Academy | Mackenzie

Laboratório de Ensino e Pesquisa especializado em iOS /…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store