Add launch complication images and symbols - watchOS Tutorial

- [Instructor] Many apps don't need to display information on the watch face. The complication is a quick way to launch the application from the watch face. Examples are the heart rate and maps, exercise, and breathe apps. Let's set up a launch application for the Huli Pizza app. For a launch complication, the most critical part is the icons. So we're going to go ahead and close all this up for now. And once we've got everything closed up, I'm going to go over here to the assets.xeassets, that's in the extension, which we haven't been in yet. And you'll see in here that there is one folder with complications and there is all of your complication families. And you will make up icons for each one of these families for each one of the faces. Now that's a lot of icons. Now you can see here, I've already set up for you, a whole bunch of them. There are two types that you'll be using here. For the modular utilitarian circular, you'll be using an opacity type. And if you go into the folder in the code and assets for this video, you'll see a couple examples of those, which you could actually just drag right in here. But the big deal here is if you look real carefully and the best part to see it is right here on this pizza is it's grayed out. This is actually based on the opacity, not the color. So it's all going to be different shades of gray based on opacity. On the other hand, if you go to the color ones here, these are all pretty much color. And if you zoom in on that pizza, you'll see that the pizza itself, right there, is very colorful because it can use all the colors that are necessary. And this is opaque and just has colors. Those are used in the graphic families here. So bezel, circular, corner, extra large, and large rectangular. So we're going to use all of that here. Now, we can spend all our time trying to get these things in, but we're going to cheat. And there's a neat cheat that you can use. I'm just going to go here to graphic bezel, and I'm going to go to show in finder. They can't delete these directly because they are mandatory fields. But what you can do is pull up their folder here and then select those. So we'll do the graphic bezel, and graphic circular, graphic corner, and utilitarian are the ones that we're going to be playing with here. And I'm going to just move to trash and then select the ones from our code folder, and then just copy them in here. And as you can see, it's popped them right in there. And now I can close both those up and I've got my icons in place. The next step we're going to do is look at where we're going to configure all this. And you'll see down here just above the assets.xeassets is a complication controller. So go into there and you'll see that there's a lot of code already written here. Much of it's just stubbed code. Doesn't have a lot in it yet. And this is the place that does all the work for complications. The good news right now is this is set up so that it will work perfectly the way we are for launching complications. As long as you have the icon, you're in good shape. Everything else is set up right here. So the last step I have to do is go up to the top here and change my scheme. Right now I'm using the menu watch scheme, and I'm going to go down to the bottom here, the one that says complication, and I'm going to continue to use a 44 millimeter watch for my simulator. And I'm going to use that scheme. This will launch us directly into the watch face instead of watch app. So we can see the complications right away. All right. So let's go ahead and run that and see what happens. Okay. And nothing exciting happens right now because we haven't actually put the complication in. I'm going to go to the watch and we can actually get rid of the phone because it's just in the way. So I'm just going to hit the minimize on the phone for now. And I'm going to deep press on the watch face, go to edit, and I can go to complications and I'll go up to this upper corner here and click on that. And if I scroll, you'll find Huli Pizza menu and there's our surfboard. So I can click on there and it's going to put a surfboard up there. I can also put one down here if I wanted to, and let's see if we can find it. There it is. This one doesn't have an icon. So it's only going to have words on it. And so it's got the whole words there and that's a lot of words so we may want to change our target to make that a little less wordy, but I can now go ahead and click home here and click it again. And you can see there's our icon and there's our wording here, which I'll just change in a minute. So we'll click that and we go right into the app. Let's make sure this gets a little smaller now. And I can do that by going up to here to Huli Pizza menu and making sure my display names are correct. And so I'm going to go here and you can see in the extension, it's got a really long name. So I'm just going to change this to Huli Pizza. And I'm going to get rid of the rest of that. So it's easy to read. And so we now have a much easier to read display name. So I can stop this, run it again. And once it's all set up, it will put this in here on my next time that I put a complication in. So if I were to go a different one, we'd put a complication in. We'll find out why this is not changing very shortly, but it will eventually change on some of the ones we did later. This is the simplest use of a complication. You used a launch in another application. Our complications can be more interactive and we'll start with this set of complications right here and see how to make these work well.