Add the animated emoji to your text input.
- [Narrator] I love the animated emoji on the Apple watch. However, I didn't talk about it when I did the text input video for the Apple watch OS 4 App Development Essential Training. So here's my chance to correct that. There's some good news and bad news about the implementation of this fun feature. Good news is it's easy to do. The bad news we'll get to. If you download the example file, you'll find a fully implemented text input control that consists of two labels, a button, and an image view. Heading over to the code, I set this up for getting text input.
Take a look at the Apple watch OS 4 course for details. But just to review, text is a separate modal view with the ability to use several options, including a list of suggested responses. You make an array of of your suggestions and send them to the modal. I'll add one more just for fun. Just after the No here, I'm gonna put a comma, and then two quotes, and then control command space bar, and that gets you the emoji screen. And I have the frequently used one here, the smiley face.
I'm just gonna click the smiley face guy here with the sunglasses. And that gets you an emoji. Underneath that you'll find there's the present text input controller. And it has suggestions, which are these suggestions, and those will show up on the watch. You'll also see that it has an allowed input mode, and there are three options here. The first one is plain, which just gives you text. Allow emoji gets you text emoji. And we'll talk about the third one in a minute. Underneath that you get a closure that comes with this.
That sends an array to results here of various types of responses. This is of type Any. It could be of one of two types here. What you're gonna do is look at this because it is optional, and see if it's nill. If it's nill, it's canceled, which is what I got here in the guard. And right here, if it's a string, I'll send it as text. Now, I've got my simulators running already. So I'm gonna go ahead and run this as a watch kit app series three.
My app will load. So now it runs. I can hit the text button. And I can look down here, and I could see that I've got my little smiley face guy down there. But I can hit the emoji button here, and I get a series of buttons to go to different emoji. I can use the crown to find the correct emoji, and I can put it in that way. Okay, stop the app. Now the other way to get emoji is to get those animated emoji.
And to do that we're gonna change a few things here. We allowed input mode. I'm gonna change this from allowed emoji to allowed animated emoji. And that gets the allowed animated emoji. That's all you need to do here at the top. There's one more step you need to do inside here. And of course, you need to make sure that you have an outlet. The first emoji was a text. This will be an image. And I've actually set you an image outlet already. So we don't have to do that. So underneath this code here for if let text, in the closure we're gonna do this.
If let data equals responses, and you could use first here or zero. It doesn't really make a difference. As, and now we're gonna look for data. If you get a response that is of type data, then you've got an image. But you've got it as a bit of data. So what you're gonna do next is you're gonna change that over to an image. And here's where the bad news is.
Let emoji equal UI image. And you're gonna take the data initializer and make that data. You'll notice something interesting here. There's only one image. Apple, at this point, only gives you one image. It doesn't give you a series of images so that you can animate. So you get a still image if you use this. And so, I'm gonna just put this to the image I have.
And set image. Self image, set image, and I'm gonna make that emoji. Okay, with all that in place, we can run this and try it out. The app loads. Click Text. This time, hit the emoji button. You'll see that you've got some little buttons on the bottom here now. So you could swipe, and you get the animated emoji.
And if you move the crown you get the different characters. I'll get the guy with the sunglasses like I did before. Hit Done. And there he is as an image. And you can see he's much bigger than the other one. I can hit Text one more time, and go down to my suggestions. And now you can see that the two are different sizes, and a little bit different looks to them. Now, as you saw, that responses results was an array.
So given that's an array, I'm assuming that someday we'll get more than one image, and therefore, we can have animation. We don't yet. I'd also love to add my own images here like we do the suggestions, which we can't yet. For now, you got the one image, which might be useful somewhere. This isn't the most Earth shattering innovation on the Apple watch, but you can have some fun with it.