Creating a Custom Keyboard In IOS…

PART -1

Apple has come up with a great future like App Extensions, Which are giving an option to replace system functionalities by your own creations. One of them is “Keyboard Extension”

• Custom keyboard extension let the users add additional keyboards to the list of available keyboards(system keyboards). Once user added this keyboard to his list on his device, it can be used by not only your application, but all other applications on user’s device except some which restricted the extensions from their bundles(APP Delegate).
• Every keyboard in IOS must provide a button to change the keyboard. We can see on default keyboard, a globe button at the bottom. By tapping it, next keyboard(the next one from available keyboards from device) will replace by the existing one. If you long press on it, it shows the all existing ones, then you can choose as well.
• Your custom keyboard extensions need to 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.
• your custom keyboards must be with user trust, means what they type, it should pass the same to host’s view.

Success ?? “How can”:

The success of your keyboard, depends on ability you provide features, expectations of users. There is no room for errors in keyboard. the default iOS keyboard is responsive, clean, responds dynamically depending on the type of text entry, provides autocorrection and text replacement, and just works. Try to maintain those features as well in addition to your features or services.

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.

There are some limitations as well for the custom keyboards…

1. They can not be used for the secure text entry fields, and phone number fields like which have keyboard types of UIKeyboardTypePhonePad and UIKeyboardTypeNamePhonePad due to carrier character limitations. In those cases, System keyboard will be replaced by custom keyboard automatically, upon resigning responder from them, custom keyboard will be back.
2. Like in default keyboard , highlighted popups can not be shown above the toolbar line, while interacting with keys.
3. Every keyboard must provide a key to switch to other keyboards.
4. If an app author declines the use of external keyboards in his app’s app delegate class, by using a method :

application(_:shouldAllowExtensionPointIdentifier:),

Custom keyboard doesn’t show up for that particular app.

Requirements:

Just like standard iOS apps, there are certain requirements that your keyboard must fulfil 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. For IPhone X, we do not need to show this in the keyboard view, as in Iphone X Apple showing this button on extra space right below the keyboard view(At bottom right corner. At bottom left, mic button is there).
• App Purpose: Every keyboard extension must have bundled within a host app. This app must actually serve a purpose and provide the user with acceptable functionality. Yes, that measurement is subjective, 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 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! You can let your user know that what information you want to use for what purpose, to get the full access from user.

For the custom keyboard that is used outside the containing app, we need set the key “Request to Open Access” to YES.

By doing that, Your Custom Keyboard can have ability ,

1. Access to location services, address book data base, etc. These are helpful to provide lexicons.
2. Can be used shared container for UILexicon.
3. Send Key-strokes or input events to server side Processing.
4. Access to iCloud to share shortcuts, keyboard settings on all iOS devices of the user
5. Access to game centre and in-app purchase via containing app.
6. If keyboard designed as of MDM’s(Mobile Device Management) design, can have ability to work with managed apps.

Note :

The App, which has your custom keyboard extension is know as Containing app, as it contains your keyboard extension.All Other apps which allowed app extensions, in their apps are called as Managed apps.

The below image will help you understand some important objects in a running keyboard and where they come from in a typical development workflow. Credits : From Apple Documentation.

Let’s start to make it:

We create the custom keyboard now, With My example Code. I will Provide this source code, so you can download and experiment with that to learn more.

Creating a Custom Keyboard In IOS…

PART -2

First, select your Project(In blue colour) which is at the top in the Xcode navigation pane, then “File”, New -> Target -> IOS-> Custom Keyboard Extension.

• Whatever the name you give here, it will show up in the keyboards list on user’s device. You can change it in the Plist file.
• When you create keyboard extension, Xcode creates a sub-folder with two files. one is “KeyboardViewController” and second one is “Info.Plist” file.

If you want, you can change the Bundle display name, in Info.Plist file so that value is shown up in the keyboards list. If you want to provide your keyboard out of your app, need to set “RequestToOpenAccess” to “YES”. And the remaining values are basic, like your keyboard’s primary language, is ASCII capable, and supporting languages like left to right languages or right to left languages, etc.

In this Tutorial, we are going to move focus from the managing app to our KeyboardViewController, and back. This functionality I had achieved through Notification Centre.

1. I had created My Custom button class, named KeyBoard Button for keyboard button appearance. Please Check my full source code by clicking on the link provided at the bottom of this tutorial.

2. You can see the variables are self descriptive, for variables showing, letters showing, if it is false means need to show numeric keyboard. isContainershowing is used to show an additional view on top of the keyboard, to process some payments from keyboard it-self. See over there whenever it shows the container, I activated Notifications, and if not removed the notifications observers.

3. User Lexicon object is used to provide some suggestions while user typing, so with the help of it we can show first and last names from the address book, short cuts from user’s device, etc. Container text is a string type object, to carry the typed text to the container when it shows. I did this with the help of a userInfo dict passing through notification. More over whenever I switch to a new screen I need to make the Container text empty, as User doesn’t need what he typed in the previous screen. for this also I used notifications. Please go through my code, hope you get it. Current word is also a string type, which is helpful in deleting by backspace button, when you long press on it.

4. the following variable helps, when to show the number pad.

5. In the following screen shot, I added buttons on keyboard with a helper function. setNextKeyboardVisible(Bool:) is a helper function, to tell wheather Next button is needed or not on view. By giving the variable “needsInputModeSwitchKey”, it shows depend on its value. For IPhone X models, it gives “false”. the remaining overriden methods helps, to change the theme and return key type of the keyboard, based on input field’s given values.

5. The following are helper methods, to set colour themes, buttons, button layouts, notification observers, removing observers, etc.

After finishing your coding, running the app on Simulator with the target -> we need to activate/add your keyboard from the device settings. Then only it shoes up on available keyboards list.

Debugging your code with an app extension is a little tricky, as when you run with your target your break points do not hit. So, To debug your keyboard extension files, Run the scheme by selecting from right to the navigator pain, with the help of any existing application on simulator or device. Whatever you choose, that app will be open and you can debug your code with that.

I wrote this article with the help of many Online articles, Particularly with the help of RayWenderLich Team, APP Coda, many others.

I am sharing those links here, So you can understand more clear way.

Resources :

1. RayWenderlich
2. App coda
3. My Github For source code of the above tutorial.

Credits: Mr. Eric Cerney, From RayWenderlich Team, Who helped me in order to achieve my requirement. And many other great developers across the world, for their suggestions, open source files and tutorials.

If you like my tutorials please follow me on medium. You can contact me through my-twitter or linkedIn accounts.

Thanks for reading. Will get better soon with more tutorials.

See you!!!