[MUSIC] Hi everyone. This lecture we're going to finally build out a UI for our watch app. And we're going to start again within a single scene and check out the elements and how we can lay them out. Now, everything is much simpler here. There's no more auto layout. There's very limited components. You can't even change the size. First thing, if you look at the storyboard, if you click on any controller, there's no more size inspector. That whole tab is gone. There's only the properties. There's this class, looks the same as before. There's these new sort of properties. No more sizes. You can't even change the sizes of the things. And we'll see how that fits together soon. Luckily this is very very similar to the stack view that you learned in course two, that iOS has. So if you recall when you put things into a stack view, they stack. They either go vertically or horizontally and it sort of stacks that way. That is very much like how the watch works. But first of all, the first thing you need to know about the watch is if you have a watch, or if you looked at the watch, the digital crown is the main sort of navigation UI. So of course you can tap on the watch but that's not very accurate. You can swipe on the watch, that's not very accurate either. You can scroll up and down but you block a lot of the content. So the navigation paradigm, a lot of it is by rotating the digital crown on the side of the watch which allows you to see the whole screen while you're doing that. And so since the digital crown is sort of in a vertical position, most UIs scroll vertically, or rather all UIs in the watch, either take up one screen, or if you want, if there's extra content, it's sort of a vertical scroll. Now how that translates is it's, you can think of it like a vertical stack view. So, remember if you have a vertical stack view, everything you put into it sort of stacks one by one downwards. And we're going to see how we can do that. But first, let's look at our options. In this object library, which is the same, looks similar to the eyeless one, but very limited set of items you have here. You have the Interface Controller. Basically what you have here, the UI view controller equivalent, and you have the Gladson notification controllers which you're not going to cover, and again one creates the interface controller for the the glance, and one for the notification controller. We have the story board reference which allows you to point to different story boards same as iOS, and now we get to the group. The group is basically the stack view, and it's also sort of the equivalent to the view. It's the only thing that can contain other views. So as a stack view. Say I put in a group and we just going to do this. We're just going to drag it in and we have a group. Notice I didn't set its size and there it is. I can try changing it. It becomes smaller, but now you sort of have an awkward group here. because we put another group, notice I can only put it above or below this group, and again it goes full width. So it's very interesting like how these things lay out. There's not too much you can do. And you can put, like I said, a group is like a view. So I can put a group within a group. And what's interesting, now, changing the contents automatically changes its superview. Again, there's no auto layout. Everything wraps tightly. Everything is like, you can have spacing, but basically everything touches each other. If you change the outside you change the inside. There are definitely ways you can customise it. It's very much like a stack. You can lay out things horizontally or vertically within a group. So once I have a group, I'm going to delete the second group because it is getting confusing. So we have a group and we're going to put an image inside it. So we are going to drop it in and the image will have a default size. And the group will just, it will just go into the group since the group can have multiple images. Now we'll just throw in a separator, and this is a horizontal group, so as you see, our separator goes to the right. Can't really see it yet, but we're going to drop in a button. And now our buttons to the right of the group. So that's very interesting. So we have a horizontal group and we have things that. And this sort of, it has a layout, which is, it has the layout but then it also has the mode, not the mode. The alignment. So the alignment is like the properties on the stack view. So it's horizontally aligned to the left and vertically, everything's taking to the top. So we can have that centered. Sorry, this is its own alignment. And everything sort of has their own alignment. So now that it's vertically centered, it's now vertically centered within its super group. So let's change that back. We want this to be top, and left so it's sort of aligned to the top left of its, the group that's containing it. Now this guy, instead we can make it aligned to the center. [INAUDIBLE] center. So now it's at the center of its super group and the button we can do that as well. And that's basically the control you have to layout your view. And if you build this on the watch, you basically get what you built which is image which has no button and a button. Notice now, that you can't actually scroll horizontally. That's not a thing. So even though your button is this big, you're actually never going to be able to see like the full of that button without shrinking this view more. And notice how nothing is, so there are ways you can do this but nothing really sizes automatically for you. On iOS with our outer layout this image view that does not have an image would just go to zero and you'll see your button. That's not the case here. Your button is just off to the side, image view is obviously still taking up the space. And like the layout engine, that's all it does, it just lays out everything as a stack. All right, so we're going to make it look a bit nicer, going to lead everything here, because we don't really need a group as the first thing. So for the Filter app, right. Just before we jump into that, we're going to look at the rest of the options we have. So we saw a Group, we have a Table. Tables are very different from iOS. It's not a Table view, it's a Table and actually displays static data which means instead of the nice sort of delicate reused of cells, you just set it up once in code. You set up your data and you insert the rows. Tables are a little bit more complicated. We're actually just going to brush over them here. What you do with the table that's different is just in your code you just create all the cells from the beginning. Like when the app launches, when you're in the View All query, just quit your cells and you show them in the table. From that point on it's displayed and you can touch on the cells and you can perform actions like in iOS. So we have the image and the separator. The separator is just an interesting addition, just for the watch, because since everything is in a stack, it's very convenient to just have a line that separates things. And so in our filtering app, we're still going to the image, date and the filter. And our image we can do it in a line to separate it from the rest of the UI. Now, With a button. As you saw before, we're going to have a button here called say like New Photo, just like our app. And we can have a switch and slider. So in terms of controls, you can have a switch that does sort of on off, but look how it's like a whole UI. It has a text label and a switch. And the settings are very limited. You can obviously have default states and you can change its titles. And you can change the amount of text it has. But really it's just a switch that works like this. There's not too much else you can do. You can have a slider and notice as we add things, this UI just gets longer. The interlace controller doesn't really have bounds and can't change its size. It just displays whatever you want vertically, and if it's bigger than the watch screen then you can scroll by swiping or with the digital crown. So we have this slider which is more like a stepper so you have to choose how many steps it has. And there's a plus and minus button that you just can tap. Remember, this is a really, really small screen. This doesn't really do it justice. It's much smaller than this. These buttons are pretty tiny. So you can tap these. There's definitely no way you can actually slide a slider, and still see it. So there's a sort of make shift way you can slide stuff. You can have a picker selector. Now this is a new thing in watch OS2 and it's very neat. If you add the picker in, you can provide options like it's a group on its own. And it's sort of like the table view, you populate the options and then the users can choose it. But the users don't actually go through the options with a digital crown. And there's many styles. You can present a stack, a sequence, or a list. And I'm going to let you refer to the documentation, again, to use that. We have the label, like always. We'll display some text. We just going to throw these in here, the label. It will sort of try to wrap to its text but it will go to multiple lines. So you would want to make it go to multiple lines since you can't scroll to the right if you add more text. Now the next two are quite interesting. Since this is a watch, lots of functions, and Apple predicts, and probably correctly so, lots of the features will read date related. So you can have a UI called the Date UI that you don't even customize. It just shows the current date, right? Like it just displays the current date and time, so you compare this in UI, where it makes sense to have the current date and time, so you have a timer app. And you would mute that current date and time, because it's hard to, it's expensive not difficult. It's expensive in terms of battery power to be updating a second like if you had, you want to keep track of seconds or minutes. Even for the minutes to sort of keep checking and updating the time, you need a loop and keep updating the UI. Just having this UI here is a cheap method, and the system will handle it for you. And the time will always be current. Again, a timer, so again if you were, a timer would be a common function in a watch app. And instead of you having to update this timer every second, Apple just gives a timer object. You can set the sort of target time, so say you said this timer is set for, a minute from now. Apple will count that down for you, and the system will handle it. And you won't execute too much code in the background, which would drain the battery pretty quickly on the watch. Then the next two Rl's are interesting. There's a map, I've also predicted you can also use maps. And also play movies, which also contains some controls, that those are interesting ones. And finally we have the context menu with the menu and menu item. This one is, you can think of it as sort of the navigation item. If you drag it into your controller, your controller gets a menu. But it's not displayed in the UI. What this is, this is the menu that comes up when you force touch on the watch. If you guys are not familiar with that, when you force touch is when you press down on your watch, and on any screen that has a menu and you force press, the contacts menu will come up. And you press down on the screen, no matter where you press, this menu will come up, and you can choose from it's options. And you can add up to I believe four menu items inside this context menu. Now that we have this interesting collection of stuff, we're just going to run this. See what this looks like. And again, the screen is much shorter than you realize, so it starts off, it cuts off right here. And everything else, you'll have to scroll to see it. But everything is definitely there when the time is updated to the current time. And all these controls are functional. You can turn the switch get a free nice animation. You can do the stepper and everything works. And to access the contacts menu, you actually have to go to hardware, force touch pressure, and use a deep press, and the shortcut is command shift two. When you do that, then all your presses are now deep presses or forced touches. So when you do that, as you see, it doesn't work, and that's because sort of, it's too smart. What I mean, Apple is just, the Watch US is just too smart for us. Even though we added menu items, everything is required. You can't just have a menu item with no image and in this case we haven't set any images. It just ignores them because it rather not display them. Instead, you can choose a custom image if you want, but there's all these default ones. We're just going to have to accept. [INAUDIBLE] accept so we have an accept button. And decline, and we actually have a free decline button as well. So, if you run again, wait for your watch app to come up. Now do that deep press again, we get our buttons. Pretty neat, and what's interesting is now that you're not actually choosing these buttons because you're still deep pressing. That's a little bit annoying thing about the simulator. You have to keep remembering to shallow press. Change back to shallow press once you've activated a menu. In order to actually choose these options as you can see we're finally choosing these options. So that's the context menu. And this is most of the UI stuff. Now we're just going to go back to groups a bit, because groups are sort of the interesting thing. You can lay out your UI like this and say in our filter app we'll just have a series of buttons. We'll just have a lot more buttons in our UI. Maybe you will have dividers dividing them. This is new photo all right so that's pretty important. So I'll have a divider between the, can't get that divided anymore, so we're just going to have a separator after New Photo. Maybe these will be all our filters, like red and blue. And they do have properties. You can change the background color to make it blue. Text blue and the background color to be like a bit lighter. That's pretty ugly so let's change it back. And we can definitely have the text color different if we want. And stuff like that. So you build out your interface. But you might want something more interesting. Like you can have red and blue like this. Wouldn't it be cooler if you say have them sort of next to each other in squares, since they don't really have to be like this. So that's where the group comes in again. And once you are familiar with putting groups within groups, you can achieve some pretty powerful things. Like even though this layout system looks simple, and restrictive, by using groups smartly, you can created pretty complicated UIs. And I'm just going to show you here to create a small grid. So by having a group for the grid, we'll make it vertical, and we'll have two more groups for the rows. Sort of, yeah, the rows. And these will be horizontal. Now when I put my group in, my red into this group, it'll take up the group by default. And what I'm going to do is make it so that. We'll see in a second all right. [LAUGH] All right, so we're going to put in another one. So the blue's all over there. Remember that the button itself defines how it's laid out within its group. So, here you have the size of it. It's usually relative to the container. So, there's three options. You can have size of the content, which means it'll fit what the content has, which is the whole thing apparently. We can make it relative to container. 1 means it's the same. So since we're going to have three buttons in this [INAUDIBLE], we'll just make this 0.33. And there, it nicely wraps around to a third. It goes to a third of its size and the blue comes in. Now, for this outer group, we're going to make its height not fixed, but actually relative, sort of, to fit it's content. So it will always be the height of whatever its content needs. And same for these groups. We don't want any fixed heights, we're going to fit the content. But it's width is going to be relative to the container. Now these guys are going to also have height to fit the content, which means that it's the minimum. Like a button needs a minimum height to be tapped, and that's going to be the minimum. And so for this blue button we're going to do 0.33. And we're going to copy and paste it to create the [INAUDIBLE] button. Instead of actually having text, we're going to make it even cooler, let's just make squares of color. So instead of having the text be red, just going to let the background be red. And here we can just have the background be blue. Oops, that was the wrong one. We'll have the background color be blue. And for this one, I'm going to have the background color be this interesting green color that I just happened to have available. And I'm going to delete this group. And just note how after I delete that group, since this guy's fitting the content, it immediately shrunk to the size of the inside group. We're just going to copy this group and paste it within this group. And now, see, we have two rows. Pretty cool, we have two rows of things. And to make it look nicer, you can adjust the spacing of the items in it. So since this is a vertical group, if you're just spacing it, adjust the distance between different color components. So by default it's around 4. So if you want it custom, maybe have it 2. And for this group, create it to 2 as well. And there, you have a nicely spaced grid of color icons you can use as your buttons for your filters. So as you can see, just with groups and nested groups. And you can nest these further and further infinitely. And buttons can hold groups as well, which is very interesting. Just do a quick demo. A button can either have text as a content or a group. And when you change it to a group, it just effectively becomes a group. So you can create this custom button with say, images, and text, and colors. Anything you want. But the whole thing is a button. So you press the entire group and that's your button. All right, so if you understand groups and everything, the last part of this lecture is pretty straightforward. It's connecting stuff to code. Everything is basically the same at this point to Atlas. You can connect interface elements just like in Atlas. Here's our image. You do actions, similar to Atlas. These are all buttons. So you drag buttons, down here. you can get outlets or actions, this is onBlueFilter. Note that however, you don't actually get a sender here. You don't actually get the blue buttons reference, but you can have it as a outlet. And you can also change properties. You can configure these properties, most of them in code, such as the color, or even it's size, and layout, and alignment. And you can even animate those. And animating those is very, very similar to iOS. It's basically the same. And just to have an example, animateWithDuration, there's no more options I can list, there's five or six options that comes up. Here you just have this one, you can give it a duration and the animation. So an animation is changing the size, the alignment or even the color, such properties that are animatable. You can change them in the block and they will animate. All right, so with that, you're ready to build your own interface. You really just throw things in there and have them stack. All right, so as you can see again, on watchOS everything is just simpler. We covered everything you can do with interface in one lecture, compared to basically a whole module for iOS, which didn't even cover everything. And so for the next lecture, we're going to go on to navigation directly. Moving between phase controllers and how that can be done. So we'll see you then.
