The course is part of this learning path
This course focuses on iOS special features including face recognition, custom keyboards, sticker packs, and more.
This course is designed for anyone who wants to:
- Learn about iOS development and coding
- Move into a career as an iOS developer
- Master Swift skills
To get the most out of this course, you should have some basic knowledge of iOS.
Hi. Within this lecture, we're going to see how to create customized keyboards. So, as you know when user taps on a text field in our app, they get to see a keyboard and this is automatically shown by iPhone itself but we can actually customize this keyboard and we can create a new keyboard that can user use, and we're going to see how to do that in this lecture. In order to do that, I'm going to go for a regular single view app. Later on, we're going to add an extension for keyboard. So, in here for product name I'm going to go for Hodor keyboard. So, let's just uncheck all of these like Swift UI core data and maybe you know what what a Hodor is or who Hodor is actually if you watch Game of Thrones. So, this is a character from the popular tv series Game of Thrones, and you're going to see why we are choosing this character in a minute. So, let me make this into a full screen and then let me go to my Safari to find a Hodor image. So, let's open Safari and let's go to Google, okay, and in Google I'm going to go for Hodor. So, this is our character, this is the Hodor character from Game of Thrones. And the special thing about Hodor is that he can only say Hodor, so he can only speak the words of Hodor. So, we're going to insert this image in our keyboard. So, whenever a user taps on this keyboard, it will just write Hodor. So, we're going to build this keyboard. So, I'm going to download this image. In my downloads folder, you can just choose whatever image you want. It doesn't matter as long as it's a PNG or Jpeg file. Just select that Hodor image and not bring in your project right now, we're going to do that later on because we're not going to be working on this view controller, rather we're going to add a new extension. So, let me show you how to do that. We were working with this new file before, but now we're going to go for a new target. In order to do that, let's just choose this option here, this general project setting. So, the target will be put in the right place. So, say target from here. If you come over to this tab, you will see we have a lot of extensions in here. Like we have this kid contacts, we are going to work with this custom keyboard extension, but if you browse this a little bit you will see a lot of extensions here, like iMessage extension, we have a core directory extension, and a notification center. In fact a secret back extension. In fact we're going to work some of these later on but we want to start with custom keyboard extension. Because this is a good practice and you have to give a product name to your extension as well, like a Hodor keyboard or Hodor, make sure your project and application is selected from here and just say yeah I want to activate this. After you do that, you will see another folder here called Hodor. So, this is the keyboard view controller. So, this is where we're going to work on. So, right now I have this Hodor keyboard view controller and this defines our keyboard. As you can see Hodor extension is now selected to be run on my simulators. If not, you can just choose it from here and choose one of the simulators as well. Make sure the Hodor extension is selected. And in fact, before we go on and write some code or just explore those codes, I want to run this because it will ask us an application to run on. As you can see, it asks us which application do you want to run this on. So, since we are running a keyboard, we have to choose an application that needs a keyboard, like messages or you can just choose whatever you want actually. I'm going to go with today because after you open this in your simulator, it will pop up a screen like this and you can just close it down in a regular phone because we have to go to settings in order to make sure our keyboard is selected. So, let me show you what I mean. Let me run this with something else like messages or Safari. Let's go for Safari. It will bring up the Safari, but at this moment let's say, okay, and at this moment we cannot see our keyboard. Let me try. If I tap on this keyboard will open and if it doesn't open for you, make sure you go here to hardware, and go to keyboard and say connect hardware keyboard or just tackle software keyboard. And what I'm going to do, I'm going to click on the left, lower side of this keyboard to change the keyboards. And as you can see, we cannot see our custom keyboard here yet, we can only see an English keyboard and I believe a Turkish one is installed here. So, I'm going to close this Safari and I'm going to go for general settings over here. And if I click on keyboard, I will see keyboards and that's where I can add my newly created keyboard. So, this is not different than adding a new keyboard to your general phone. So, as you can see Hodor is now in the list. And now if I go back and if I open the Safari or any other application that requires a keyboard, if I click on this, here we go, and we got a crash but I believe this is just an Xcode bug, so let me stop this, okay, and let me do product clean and let me run this one more time with Safari. It should be a bug because we didn't even write any code here. So, let's make sure this works. Let's open our simulator. It will just bring up the Safari and it will display a keyboard. So, here you go. Let me click one more time. And this is the custom keyboard that we're working on. As you can see there is nothing in here right now because we haven't written any code yet. And let me stop this and let me go to keyboard view controller to see what we got here. So, this has a view did load, and this is the same view did load that we used to see. In here we do what we have to do when this keyboard loads up. So, we're going to write our Hodor code in here as well. So, let's see what else we got here. As you can see, it creates a new button for us. So, it's named Next key button and it should have popped up in our custom keyboard. So, let me check it one more time. Even though we see the custom keyboard over here, we don't see anything as the next keyboard, but this world icon does the same thing. It leads us to the next keyboard. So, I believe we don't have any problem right now and we're going to create our own buttons, so we will see if we have any problem displaying any views at all. So, in here we have a text will change and it indicates a user's typing or not. So, text will change and this is text did change. It actually lets us understand if text has been changed. And as you can see, we are doing this change through a proxy here called text document proxy. And in fact, that is what we're going to use to insert the Hodor text in the tapped place. Okay, I'm going to show you how to do that, don't worry. So, let me write this Hodor so we can understand what we're trying to do. So, I'm going to create my Hodor button and this is exactly the same way that we have done before in the layout section. So, it's going to ask a type if I hit enter and dot, I can just go for a system. And after the system button, this is actually a button. It's not a fancy thing. So, I have to give a frame remember we have to specify where it is going to be located, what width and height it's going to have, so you have to just come over here Hodor button.frame. It will ask you to create a CGRect. Remember open parentheses, and you have to come here to choose XY with height. So, this is the X axis of the keyboard and Y axis of the keyboard. And I'm just going to go for some regular numbers like 100 100, we can always come back and choose a better one here. So, like an example I'm going to go for 150, and for y, I couldn't write it, 150 for Y, I'm going to go for 50. Let's say 100 to 100 for width and height as well. So, let me choose these numbers right now because I don't know how it's going to show up. I'm going to go over here and change this as I want. So, next thing will be the button, the background image of this button, okay? So, if you choose hodorButton.backgroundImage or set background image you can set the hodor jpeg that we have downloaded from the Internet. So, it asks for a UIImage as you can see. So, all you have to do is just come here and take this hodor.png in our Hodor folder. So, I'm not placing this under our hodor keyboard app, I'm just placing this under my extension, okay? Make sure you put this in your extension and not in your app. So, after that you can come over here and say UIImage named, okay? And the name will be hodor.png. So, for state just hit 'Enter' and you can just go for normal here. So, the next thing will be is to tell hodorButton to what we want to do with the hodorButton, right? So, whenever a user taps on the hodorButton, I actually want to display a text. So, I'm going to go for addTarget as you might remember, right? So, that's what we do when we try to add an action to our button. So, it's going to take it from the self as usual and the action will be a selector function as usual, okay? And this event will be touch up inside event as you might remember. So, when a user touchUpInside, meaning that taps on the button, it will get called. So, touchUpInside. Okay, so this is it, of course we have to create a new function over here. So, this is going to be our button tap. So, I'm going to call this keyboard or hodorTapped, okay, hodorTapped. So, open close parentheses and open curly braces. Right now, I'm just going to go for hodorTapped and we will see if this works or not. So, for selector, I'm going to go for hodorTapped as well. And finally, we have to add this to our view. So, let's go for view.addSubview and the view that we want to add is the hodorButton itself. So, here we go. We have created our hodorButton image. So, let's go for Safari one more time and let's see if we can see the hodor image in our customized keyboard. So, let's change. And here you go, the Hodor appeared. So, I believe this is not in an ideal size. Like we have to increase the width little bit, okay? 100 is obviously small for this. And as you can see when I tap on the hodor it says that hodorTapped. So, it's working, very good. We have to add a text here rather than printing out. We're going to see how to do that. But first let me choose this for like 120 or 140, okay you can play with these numbers as I said before to find your optimal height and width, and in the print function I'm going to delete this. In the hodorTapped function, what I want to do is to create a proxy and add this text to wherever user tapped before. So, in order to do that you have to say textDocumentProxy. So, as you can see this is an object that custom keyboard is interacting to insert text, okay? So, we're going to use this text document proxy and you can call this whatever you want. I'm going to call this text proxy, and after that you have to make sure you cast this to be a UITextDocumentProxy at this one. So, you have to cast this as UITextDocumentProxy. After that you can insert your text here. All you have to do is just say textProxy.insertText and just choose whatever you want. So, in our case we're going to say HODOR with capitalized letters of course. So, let me run this one more time and see if we managed to create a customized keyboard. So, here you go, let's tap on here to write something and let's find our customized keyboard by clicking over here. And here you go, we see the Hodor. And the width is better right now as you can see it's perfect what I wanted actually. So, if I tap on this as you can see it writes Hodor. So, I can tap as many as I want and it will write Hodor as many as we want. So, that's how you create customized keyboard for your apps. And of course you can work with a lot of different images or a lot of different letters in here to create your own custom keyboards, and you can make it write whatever you want then user clicks on that. All you have to do is just create and view in here like this and add this subView to your original View, and in the selector function you can just write whatever you want. So, that's how we create customized keyboards. So, let's stop here and within the next lecture we're going to see how to do sticker packs.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.