Overview
With the help of Custom Keyboard Extension you can create your own keyboard and also you can use it outside the app. In this blog we will learn how to create your own keyboard for iOS applications.
Keyboard Extension Concept
Custom keyboard extension allows you to add your custom keyboard to the list of available keyboards.
You can switch the keyboard by tapping the switch keyboard button at the bottom left side.
Custom keyboard extensions provide a UI that handles user interactions like button tap and gives you the freedom to use any of the iOS supported unicode characters. (Here you can find Unicode characters)
Requirements
Your keyboard must fulfill following requirements before applying for Apple’s approval
- 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 switch keyboard key performs this action. For Consistency experts suggest placing the key on the bottom left corner.
- App Purpose : A host app must be bundled within every keyboard extension. This app should actually serve a purpose and provide the user with acceptable functionality. To achieve acceptable functionality for better measurements one needs to put time and thoughts into hosting the app.
- Trust : Constant news of data leaks has made users extremely sensitive about their data. It’s the keyboard author’s responsibility to ensure the safety of users’ keystroke data. Don’t unintentionally create a key-logger! Keyboards are a potentially vulnerable place for user data, as one of the main points where maximum data flows into your apps. Users utilize the keyboard at least 30% of their whole screen time on their smartphone.
Let’s Get Started
Now we will proceed with creating our custom keyboard project.
Create a new project, go to the Xcode -> File -> New -> Project, and select App and click on the next button.
Give the project name “CustomKeyboard” and click on the next button and create a new project.
In Main.storyboard file add a new TextField
Now download the source code of the complete demo project, Link is given at the end of this blog.
Inside the project, you can find the CustomKeyboardView folder. Add this folder in your project.
Inside this folder you can find three files.
Now replace your ViewController.swift file with CustomKeyboardVC.swift and add the asset of close button and change keyboard button into the Assets.xcassets
Here is quick summary of those files:
- CustomKeyboardView.xib/CustomKeyboardView.swift Custom UIView that contains a UI and functionality for custom keyboard. Also it has a protocol CustomKeyboardViewDelegate to notify its delegate to perform certain actions on the text input view.
- CustomButton.swift Contains button press animation and gives a round shape to all buttons.
- CustomKeyboardVC.swift Assign this class to your ViewController inside main.storyboard and connect textField outlet with TextField. You can check our CustomKeyboardView by selecting the text field.
Now let’s use this Custom Keyboard outside our App.
Add Extension
To add keyboard extension, go to the Xcode -> File -> New -> Target and Choose Custom Keyboard Extension after that click on next and name your extension CustomKeyboardView and click on Finish button
If you get the below popup then press the Activate button.
Xcode will create a new folder in project navigator.
Enabling Custom Keyboard
Select the CustomKeyboardView scheme at the top of Xcode and run the app.
Now build and run the app you will get a following popup
Choose the app you want to run with, for example we choose Reminders and click on Run.
After the Reminders app launches on the simulator, minimize it and Go to the Settings -> General -> Keyboard -> Keyboards -> AddKeyboards and Select CustomKeyboard.
You need to add a keyboard once in each of your new devices. Open the Reminders app and select the text field to present the system keyboard. After that press the switch keyboard button to switch to our custom keyboard or Long press switch keyboard button you can see the list of keyboards and select Custom keyboard from it.
Now let’s add our Custom keyboard UI.
Customizing Keyboard
Select the following files from project navigator.
- CustomKeyboardView.swift
- CustomKeyboardView.xib
- CustomButon.swift
- Assets.xcassets
Open the file inspector and click on the CustomKeyboardView checkbox inside the target membership hence custom keyboard extensions can use those files.
Now open the KeyboardViewController.swift file and replace it with the following
The code contains following:
- A property that holds reference to CustomkeyboardView.
- Inside viewDidLoad() we added a CustomKeyboardView to the inputView with some constraints.
- Lastly, we programmatically added an action to the keyboard switch button, This adds HandleInputModeList action which automatically switches to the next keyboard for you.
Now run the app and select CustomKeyboard by clicking on Globe button you can see our custom UI has appeared but still the text field isn’t updating. Let’s fix that now
We must confirm CustomKeyboardViewDelegate for updating the text field. By adding the following line into viewDidLoad() method
Add following code to add delegate methods
Here you can see we have used textDocumentProxy.insertText() to add a new character, UITextDocumentProxy provides textual context to a custom keyboard.
For more information on UITextDocumentProxy you can visit : apple documentation
We have added textDocumentProxy.insertText(newCharacter) method in insertCharacter(_ newCharacter: String) method, It will add new characters for you and same way textDocumentProxy.deleteBackward() will delete character for you. To check how it works, run the code.
Now, it works perfectly, But there are two switch keyboard icons at the bottom right corner. The first one is what we created and the second one is the system’s defaults.
UIInputViewController contains a property needsInputModeSwitchKey that tells if next keyboard button is required to show
Text Replacement Feature
If you want to add this you need to provide your set of words, iOS does not provide it automatically.
Let’s start to add few words into Settings -> General -> Keyboard -> Keyboards -> Text Replacement Add Plus icon on top right corner and add a new world and shortcut for it.
Now we can achieve text replacement using the UILexicon class.
Add the following property into KeyboardViewController.swift file
Add following lines into viewDidLoad() method
The above method requests the supplementary lexicon for the device and you’re given a UILexicon object that you save in the lexicon property that you defined.
Now add the following extension to the end of the file for replace current word:
Let’s understand it step by step:
- First we check that lexicons and current words exist.
- Filter lexicon entries using the current word (ex: if you type “GM” then it filters records “GM” with replacement text “Good morning”).
- If you find a match then remove the current word from the text input view.
- Insert replacement text using textDocumentProxy.insertText() method.
To call this function replace the content of insertCharacter(_ newCharacter: String) method using the following lines.
This code makes sure to only perform a text replacement after entering the space.
Now run the code and check, type “gm” and give space it will be replaced by “Good morning”.
For more information on UILexicon you can check apple documentation
Download Source Code
You can download the complete source code using this link:
Source Code
For more information on Custom Keyboard Extension visit apple documentation
your BusinessGet Expert Assistance
Conclusion
Customizable keyboards are the most essential function of any device. The blog presents a robust guide to customizing your keyboard using iOS mobile app development.
You may also like
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
Flutter v/s React Native: Know the Best Mobile App Development Framework Wins in 2024
It’s 2024 and you can’t afford low-quality apps with poo...
A Detailed Guide: How to Hire Mobile App Development Companies in 2024?
Apps are not a sensation or a trend but a novelty for busine...
