Chuck Norris & Custom Keyboards with Swift 3
If you’ve ever used emojis on your iPhone, you’ve probably downloaded an emoji keyboard and given your phone permission to use it in your Settings. Apple allows developers to create custom keyboards (such as the emoji keyboard) so that users can easily use custom made input (🌮) to enter with their text in iMessages, emails, etc.
The basic functionality of a keyboard is to respond to a tap (or other gesture) and provide content in the form of text, such as “q” or “🖖🏽”. You could even use a keyboard to insert a gif or image (very similar functionality as a sticker pack. The ability to create a custom keyboard came before the iOS sticker packs were introduced.)
In this blog post, I’ll walk through some steps on how to create a keyboard where you can click a button to get your daily Chuck Norris joke.
Step 1: Create a new project.
Step 2: Name your project. I called mine “ChuckNorris”.
Step 3: Add a new target for your custom keyboard extension.
Step 4: Select Custom Keyboard Extension and name it. I named mine CNKeyboard.
Step 5: Active your keyboard scheme.
Step 6: Make sure you select your app as your target (not the keyboard) and run your app. It should be a blank white view.
Step 7: In your simulator, hit ⌘ + Shift + H to go back to your home screen and go to Settings/General/Keyboard/Keyboards/Add New Keyboard…/ChuckNorris.
Step 8: In your file navigator, select the KeyboardViewController.swift file that was created when you created your keyboard extension. Note the (1a) nextKeyboardButton and (1b) nextKeyboardButton code (in viewDidLoad). These lines of code control the navigation from keyboard to keyboard (i.e. your emoji keyboard).
Step 9 & 10: Create a UILabel property for your Chuck Norris Joke text. Create a button. When this button is pressed, the Chuck Norris Joke will be displayed.
Step 11: Programmatically format your label and constrain it to your view. Here is where I entered the Chuck Norris joke text, changed the font and hid the text from view. Make sure to call this createLabel( ) function in viewDidLoad( ).
Step 12: Programmatically format your button and constrain it to your view. Here, I change the button text and font and add a target (method that is called). Make sure to call this createButton( ) method in viewDidLoad( ).
Step 13: Write the method ratingButtonTapped( ) that is called when the button is tapped. This ratingButtonTapped( ) function should unhide the chuckNorrisJokeLabel.
And you’re done!
Here’s a demo of what we created:
You can find the repo for this project here.
Resources:
