[MUSIC] So now that you have a basic understanding of the layout. I'm not so sure we're gonna stay in the storyboard, and do a slightly more complex layout, and show some more ways you can set your auto layout constraints as well as some different kinds of constraints they can set. All right, so we still have our Flickr app here and it still looks like this. So what we're gonna do in this lecture is make this bottom bar, instead of have one button, make it maybe have four or five. And that's actually more interesting for formatting reasons. First of all, there's a bit more buttons, and we're gonna use the other layout to make sure that they're sort of spaced out at the bottom properly. So that it doesn't look, on all devices all the buttons are spread out at the bottom and not bunched up in any weird ways. Okay, so we're gonna delete some constraints first. Know how you can do that. We're gonna delete constraints off this guy. And when you take the comment and go to the site inspector, down here you'll see all the constraints. And we're actually gonna delete every single one of these. You double click on it or even just single click on it and hit the Delete button. It will disappear and now we have errors because we have missing constraints because Xcode now doesn't know what we want anymore. We're gonna just move this one away give us some space down here. And while we deleted those constraints as we do this knowing one of the menus, one of the buttons, not the whole bar. And so when building interfaces you can nest views within each other, and that's what we're gonna do here. If you have five buttons on the bottom, it's a lot more convenient if you put them all into a container view. Just a view that contains all five of them. Although you could instead of laying them out down here, I would allow you to move it around you. So you have one whole bar. And to the top now, if you had five buttons down here you would have to move them individually. So we're gonna put them at the bar for maximum convenience. And how you can do that is actually, there's a few ways. Easiest is to find a view here, you type in uiview in this object menu. Here is a view, again we simply drag it into our view here key. And we're gonna just drop it right there. And we're gonna make it the bottom bar, so we're gonna resize it like this, into the sides. That's gonna cover this guy. So we're gonna drag this guy and put it inside this view. And it's going inside when it's highlighted. And continue resizing our view here. And so this bottom view is gonna have the same constraints as our bar head earlier. It's gonna start to take up as much space as it needs on the bottom. And then basically be touching the image here on the top. We do that the same way. We're gonna use this button down here. Not to constrain to margins right now. Add to top. Constrain, and the rest as well. So now again our layout is a little bit ambiguous because we haven't specified how big we want any of these two views to be. Actually right now it is not exactly ambiguous because we'll assume that you want this top view to be the size of the image that currently has it. But that's not really what we want. This time, instead of setting the height of the bar, we're gonna let its contents determine its height. That's very interesting concept, because we could set this height to 44 but then it doesn't make sense. That view doesn't need to know its height and it just needs to be big enough to fit its contents. And other layout lets us do that. For example we're gonna constrain this button to take up two basically. Constrain it so that its top, left and bottom are touching this view and since you remember buttons need a touch base of 44, we're gonna add this height constraint at 44. And when you do that, the fact that this height is constrained to 44 and that its top and bottom constraints are set equal to the super view. That will implicitly constrain this bar to be 44 height as well. And that works out very well for us. And now let's make all of these views look like they should. And there is a very easy way to do this, by clicking this apply to all views in container button. When you press [INAUDIBLE] it will mail your views. Notice that we didn't set the width for this button and that's because it's a button and Xcode knows if a button has text in it, it should be big enough to fit its text. And so you can see, it sort of has an implicit content size which basically the size of its text. And allows us to see it, we don't want it to do that though. I just wanna shorten the name of this button to, we're not gonna have use the show filtered image button anymore, we're gonna rename this one since it's on the left side, we'll use this button to choose a new photo. Right when you change the text agency, you see now it's giving us a warning again that the expected width is not different, because we changed the content. And if we fix it now, it will again now just fit the width of this text. And we're gonna leave that for now. Now we said we're gonna add more buttons, and we're still gonna do that. Let's copy this button, simply Cmd+C and copy it and paste it. Copy it and paste it, we'll get a few more buttons. Looks like we've just got one, gonna paste it again for another one and paste it again for four. When you copy and paste your view it retains its own constraints. But not sort of the ones around it, cuz that wouldn't make sense. So the height is still 44. That's fine for us. Now, we're going to sort of. We want these guys to sort of space out at the bottom, equally. And there's many ways. So so far we've been only constraining heights and widths and the edges. There are actually a lot more things you can constrain. There's a whole menu button here and that lets you align sort of the edges. And there is very nice graphics here telling you what they do. Align edges and align centers and such. But here we actually wanna do something more interesting, which is make all of them equal size. So before we do that, let's align the edges anyways. So we want them to be all, top to bottom, and I'll show you the different ways we can do that. So we're gonna add these constraints. And we're still gonna get errors because they are ambiguous at this point. Xcode has no idea. And we also want to constrain these to each other. And how you can do that is you can actually hold Ctrl and drag. It doesn't very much like how we drag a button into code to create an outlet or an action if you recall. But if you drag it to any other interface element, it becomes a constraint. So for example, in this case we want to make the ending, the right edge of the photo, to be equal to the leading edge of this new photo. So if you let go here, you get these options and you can line up your tops and centers and such. But right now what we want is the equal spacing. And this is something a bit more interesting. You don't get to put in the value. And that's because it takes whatever value is there now which happened to be 46 and set that for you. We don't want that. We want it to be 0. So you can press Edit here. Make it a pop up, click 0, hit Enter. And look, this button just flew right over. That's cool and we're gonna do this again two more times. Set the spacing, this guy, this guy, and change them both to 0. And so far expo is really happy now, cuz actually this is my biggest. You said you wanted these guys to all be touching each other, these lines could be right next to each other and they all have the split widths, expo's like okay, so this is how you want it to look, but that isn't correct. We're going to also constrain this guy to get a super viewing. And notice we can drag out to explain where we edited. And we want the trailing space to continue it to be set. Right now it's gonna be display arbitrate 300. You are gonna have to be zero again. Right when we do that, it's got us confused again. Now again it has no idea what we really want. And we're gonna tell it. [INAUDIBLE] to do here is since we want them to be spaced out and they're buttons, we're gonna just make them equal widths, so they actually are gonna be right next to each other but divide the space equally. And again, you click Ctrl and you drag over. And again, let's try a few different ways just to demonstrate how you can do this. All your buttons and interface elements show up here, and you can actually do the Ctrl+Drag thing here as well, as you can see. I'm gonna choose Equal Widths. Sort of gives you more options because it doesn't know what you want anymore. When you do, when you drag horizontally, goes out to you like this. He knows you want the horizontal spacing. Notice it doesn't even give you the vertical spacing option. But if you were to drag to save this guy, it would give you the vertical spacing option. And the only reason that is, is because you dragged it straight vertically. Since like you might want the vertical distance here and horizontal distance here. In this case we want equal widths and we also want these two guys to be equal. And note you don't have to constrain them all to each other because if you constrain this guy to equal this guy, and this guy to equal this guy and so on then they'll all be constrained to equal to each other. And now Xcode is just telling us that you're not laid out properly and again, if we just update the frames. We now have these four buttons all perfectly spaced out at the bottom. I'm gonna rename them app we're making. You can choose New Photo where I can apply a filter. I can compare before and after photo, which is pretty much what we had before the toggle. And we probably want to share the photo. So Share. And yes so here we have a much nicer UI, we're gonna run it in iPhone, just to show that they're indeed spaced out. And, there we are. And that's it for this lecture.
