[MUSIC] Hello, everybody. In this lecture, we're gonna talk about a brand new view that Apple provided with us in iOS 9 called the stack view. And you can find that inside object library. And you can see it's a view that allows you to very easily stack interface elements vertically or horizontally and how it does that is sort of, exactly like how we did this button bar down here. It helps you do all of that, so you don't have to maintain these constraints. And if you can recall, it took quite a few constraints to get this bar here. And with the stack view, it's gonna be super easy. One thing to keep in mind is, when using something brand new, such as the stack view. Once you use it, your app will need a support iOS 9 and above. So if you're making your own app and you're wondering if you should use it or not, it's good to consider whether or not you want to still support iOS versions before iOS 9. But for this lecture, we are gonna go ahead and use this magical new view that will make our lives so much easier in terms of laying out this interface. And you'll see that not only can it lay out this button bar down here for us, it can pretty much lay out this entire view that we have here. And that's very normal, because most apps, if you think about it, are lots of interface elements, either horizontally aligned to each other or vertically aligned to each other. And by nesting these stack views, like putting stack views within other stack views, you can create any grid layout. And you'll see what I mean when we start using it. Apple's really pushing this feature as well. As you can see with this button here, if you hover over it, it's called Stack. And what that does is it automatically takes what you've selected and puts it into a stack view. So I am going to use that right now. We're going to select these four buttons and remember all these can change that we set up, if you click shows, you can see them all here and we simply press stack. What we'll now do is we'll create a new stack view and put our buttons inside. And of course, the stack view, while it manages the constraints of our limits within itself, it's still a view and you still need to constrain it to the other parts of the interface. And in this case, it's inside our bottom bar and so we will be constraining it to the bottom bar and letting it handle the layout of these buttons. And so let's look at the properties of it first. So in the stack view, you click on the Stack View and you go to its attributes. There's not that many options, but they're all very, very amazing. First of all, you can choose to stack horizontally or vertically. And in this case, you want horizontal. And the alignment centers three, I guess, these two most important properties. One is the alignment and one is the distribution. And what these mean, so for alignment, this is how the elements should line up with each other. And here it doesn't really make sense. What I mean is, since these are stacking horizontally, they're next to each other. Vertically speaking, how they line up with each other in relation to the stack view. And this will be more interesting, say, if we had a, one of these, which was taller than the others, which is a more common case. And if it should, all the elements should line to the bottom or line to the top or line to the center, and we can see those options here, there is all these options. For fill, it's what we're going to use, it means all of them will fill all the space in the same stack. All of the vertical space of a horizontal stack view or all of the horizontal space of a vertical stack view. Or like I said, you can align to the top, center, or bottom. Or if it's text, you can align the baselines of the text, which if you know, that means that if you have different font sizes, the baseline will be aligned. And that's the most effective way aligning text for reading. So we want here is fill and so we're gonna keep that. Next up is distribution, which is how these plans are distributed, within the stack view. Right now it's fill, which means they will basically fill up the stack view and they will constrain the size of the stack view to perfectly let, be filled by all of the buttons. So the other options are fill equally, which is what we're going to use. Which means that each element will take up the same amount of space, no matter how much their intrinsic size is. Or we can fill, and we're going to see that by clicking on it. As you can see, the stack view becomes larger because they now all take on the size of the largest one, which in this case, is this new photo. So they now all equally fill using the slider sets. You can also go back to the stack view, fill proportionally, and the difference between this and fill is now if you were to resize the stack view. The, if the, you can constrain the stack view. And the elements will proportionately take up as much space. So they'll scale based on how big they already are. And then there's equal spacing and centering, which is different, because it won't fill anymore, it will basically equal spacing will, let's check to see the effect of these. We're going to first constrain our bar to be the size of this button bar. And how we do that, just like before is to set these constraints to 0 all around. And it will lay out, and as you can see here, let's go back to fill proportionally. As you can see, the New Photo has the most space. Filter has less space, Compare has quite a bit of space, and Share also has very little space. So the space they are taking up is proportional to their intrinsic size but they're still filling the whole stack here. Now compare that to equal spacing, which means the space between them. So they all maintain their intrinsic size, which is the size that comes as all their content. And the spacing is equally spaced. And finally, there's an option for equal centering, which means instead of having spacing be equal, the centers are equal from each other. And as you can see already, these are very, very powerful layouts and really convenient. And you may think, I mean, these are just very normal ways of laying out views, but if you think back to using auto layout, creating these equal spacing views are actually a huge pain in auto layout. And it's more than you think because to do equal spacing, you have to make the constraints equal to each other. So, we've seen making the view's widths equal to each other using constraints. But this is different. This is making constraints equal to each other, which is actually not supported. So how you would actually do this in auto layout is to create spacer views. So you have to had invisible views between them between these buttons and constrain them to be equal size. So, with that in mind, you can see how good this stack view is, and it really is good. And I'm not exaggerating at all here. So, again, what we want is fill equally. So, with that, we have the exact layout we had before using all those constraints with a single stack view, constraint, job button bar, with all of these buttons equally spaced out. And what's even more amazing about this, say, I wanted to add a new button. Let's drop another button in here, boom. We laid out still equal width. Now we have five buttons. Think back to the other layout. We would have to have broken the connection here between these two and add in more new constraints just to squeeze that guy in. Say we wanted an image view. Maybe like here. Again, everything is handled for us. The image view takes up as much space as the button. Everything just works and that's really beautiful. And the same thing for deleting views, everything is laid out again. This is just so convenient and so good. And let's run to make sure it's still doing the right thing. That's also very important. We don't want this to break our layout. And if we bring up the simulator, which is booting up. We should see that it has no problems laying out our simple button bar which is well within the capabilities of this stack view. And there we are. Oops, going back. Should not have clicked on it because we still have some connections which we're going to deal with the code part of this project very soon in the next module. So, like I said before, you think, okay, well that's cool. That's what we can do with stack views. But no, there's more. We can actually replace this whole thing, this image view and this view. If you think about it, these two views are really stacked as well, our button bar in our image view. And so what we can actually do, instead of having these layout constraints, just like we had before with the buttons constraining these width to each other, we can again stack them. And again, we're gonna have to be a little bit more clear with what we want. In this case, we want the stack view to, again, be constrained to the edges of our entire view. And while that's essentially exactly what we want. Thank you stack view. No options are needed, default ones. We want the alignment to fill so both of these views will fill all their horizontal space in this case, and the distribution is actually is fill as well, and since the bottom bar has constraints for height. It's constrained by its content. Then the top bar, which doesn't, will automatically fill up the rest of the space. And, again, the real beauty about this is if say now we wanted to add a top bar, and as you can expect, we can simply drag one in. And now that the whole interface is different, we can't just put it wherever we want anymore. It either goes, if you can see this little blue line, that's indicating that it's gonna go down there, or if you drag it up, if it's gonna go above here. It's really easy to now lay out this sort of view. Now it's gonna complain, because this guy's not constrained. All we have to do to make this more like a bar is constrain this new top bar to a random height, say 50, and that's all you need. And you get a top bar, a bottom bar, the image, and say we don't want this top bar anymore, boom, it's gone. Right, so I hope you enjoyed this lecture on stack views.
