[MUSIC] So now we've built this app, that's not really an app. It doesn't do much. It doesn't really look nice. And so, in this module, we're gonna make it look a lot nicer. It might not do that many things, but at least let's try to work on interface. And have our users like it. All right, so in this module we shall look at the interface builder and doing a bit more with it. And let you see things a bit better. We'll go back in. Here is our interface builder we set up from the last module. As you remember, as we continue it's really not interface, it's just some things stuck here in the top left corner, the status bar is blocking our image, and there's all this space wasted. If you think there's space wasted here, if you try it on the iPad, you can only imagine how much more space is wasted. As we can just build that here. And remember you can use the menu under window and scale, to change the scale of iPad. Or use these convenient hot keys, command one to five. Because by default your iPad has a way higher resolution than your monitor, most likely. So by scaling it down, you can see it a bit better. And here we can see just how much space is wasted on the iPad. And so, that's kind of a challenge, because iPad has a much bigger screen than the iPhone. But the story board actually allows us to handle all these sizes, just with this one scene. And we talked about how it is square, and that allows us to set up the user interface for all these different screen sizes. But the tool that actually allows us to do this is called auto layout. And auto layout is a way, so you can move your views around. And doing that you're really just setting it's frame, it's position. And it's frame is just a rectangle, which is defined by it's origin. Right now it would be .00, which is in the top left, and its size. And if you go to this property inspector up here, you can see this is its width and height and it's origin X and Y. And that defines where it is. And when you change the size and move it around, that should change. Okay. Setting a view's height, like this, wouldn't allow it to adapt to different screen sizes. If you set it to 300 and 300, it will be 300 and 300 and as we saw would waste a lot of space on iPad. What allows us to fix this is auto-layout. And auto-layout really means that instead of setting its absolute frame, now you set everything relative to each other and ultimately relative to the screen size. Which allows things to hopefully resize themselves and sort of dynamically adjust to the screen size. And this includes not only different devices, as an iPad or an iPhone, but even when the users rotate the phone and it becomes landscape versus portrait. So how does that work? Start with a various simple case, which we're going to still have this, our image view here and this one button. We want to sort of, so how do we look? It looks right now, bring it back up to simulator. It looks, squishing the corner now, and let's have it so that we want the image to take up as much space as possible, but still leave enough room for the button, maybe down at the bottom center, to be clickable. All right, so let's place our button down here. And just setup everything to sort of roughly look like I would want to make this bigger. All the way, edge to edge. So it's really nice. And so, to actually set constraints, there's a few ways to do this. The first way you should try is this button down here, on the bottom right of the interface builder. This third one here allows you to add new constraints. And as you can see, these are the edge constraints which constrain the sides, the left, right, top and bottom, to what ever is nearest to them. In this case, we're going to make it basically attached to the image view and its super view, which is this root view. The encompassing view in this view controller. So if you check all of these constraints, and each of these is a constraint. We're not gonna use the margins for now, those allow us to add the views. And type in zero to all of these, and hit add. This will add these four constraints, which basically there's one constraint down here saying that the space between my bottom edge and the bottom edge of this view should be zero, and same as the left, right and top. And now you get all these warnings and even an error in your storyboard, and that's because with these constraints in place, this view really shouldn't look like this anymore. But right now the view is sort of unknown how it should look, because you've constrained it to this top view, but this top view itself is not constrained to anything, so that's why it's complaining. And so we're going to do the same thing with this top view, going to open up this constraints menu, turn off constrain the margins, and add the left, top and right constraints. And when you add them, you'll still complaining and that's because, so what have we set up here? We've told expert that we want this button to stick to, basically, the edges of the screen, and the top stick to this view. And we told this view that basically, the same thing. We want it to stick to the edgings of its super view. But there's one missing piece here, which is how big are these two views individually? And so, it's going to warn us that we need to set that. And how we do that is we're just going to add a hyphen tray for the button. Since in this case, we want the button to just be clickable, tappable, which in Apple's design guidelines, means it needs to have a height of at least 44. So we're gonna use a height of 44 here. And that will constrain this button to be a height of 44. And there are all these warnings are telling us that we have these set up, but our views frames right now aren't where they're supposed to be. You can fix that by pressing this button here. Expanding this a little bit, pressing on this warning sign. And choose update the frames, which would set the frame of the views to match the constraints. Fix that one, move a bit, and then this one, and look, that's basically what we wanted. Now the button is down here with a height of 44, and you can see the constraints here in the size inspector as well. It will show you all the constraints we've set up so far. And image view, notice how the image view doesn't specify its height or its width? But it's actually set, because we know that its width will be equal to its super view. And the height will really just be equal to its super view minus the height of this button. So let's see how that works. So if your building on an iPad, we will see that, here it goes. Re-sizing to iPad a bit. You can see that this view is now this big, which is pretty big, and is blind down here. Here is a more regular size. And that looks very different from what we see here, because it's not square and it's an iPad. And just to confirm this works, we're going to check it out using iPhone 6. And as you can see as well, this view takes up all the space up here, and this one takes up all the space down here. That's very convenient. That basically allows this view to render correctly, no matter what device, and even if we turned it. We turn the device on its side, and you can do that by going to, you can press command left and right button to hardware menu up here, you can rotate using rotate left and right. And we don't support some down, but we support all the other modes. And that's pretty cool. So that's basically the first introduction to auto layout and feel free to go play with it a bit.
