Constraints

[00:00:00]
>> Now let's actually learn how to do some layouts and fun stuff like that. Let's talk about constraints. Constraints are not just the deadline is in two weeks and it's easily six weeks worth of work, so let's not write unit tests, right? That is one set of constraints.

[00:00:17]
These are constraints in terms of like how your layout works. By default, things are, if you make a new frame, the constraints are to the top and left, right? And so if I look at these, you can say top and left. So what does that mean? Well, it means that if I grab this corner and I drag it, they stay to the top and to the left, which is, that's what you want, that's great.

[00:00:53]
If it's not what you want, that's frustrating, right? Especially, that's not really how the web works a lot of times. Yeah, if you just have like a div with some absolute width and height, you can change the browser window and it will stay to the top of the left, great.

[00:01:13]
But if you have something like a nav bar, you might want that to, stretch with the browser window. A sidebar, white stretch with the browser window, a lot of vertical axes. We would like to do a lot of the stuff the same way so that when we're kind of working on responsive designs or just our general sanity, we can have the same things in place.

[00:01:35]
And so that's kind of what we use constraints for in this example, right? And so let's grab, so I don't have to change a whole bunch of stuff at once. Let's take a look at this very simple example. Here we've got a box, and if we look the constraints at the top and left, it will do exactly what we saw before, and we, cool.

[00:02:00]
So what happens, however, if I put it hypothetically in the center, and I always want it to be in the center, that's it's job. Maybe I'm making the world's worst radio button, right? I would like the little dot in the radio button to be in the center, right?

[00:02:17]
And so if I resize the thing, that is arguably not what I want. Could I then also resize the box in the middle or could I recenter it? I could, but you can imagine that doing that at scale is going to, make you not want to do it anymore, right?

[00:02:32]
It's gonna make you want to go outside and do something else. So, let's actually just adjust the constraints and get a sense of how all this might work, right? So we can grab this, let's put it back in the center. If I change the constraints to Center and Center, right, and I grab this frame, hey, it's doing what I want now, right?

[00:02:55]
Similarly, if I do it to the right, let's say if I was building this toolbar, some of these I would want constrained to the right, some of these I'd have constrained to the center, some of these I would have constrained to the left, right? And so that if this expander contracted, they would all follow whatever bound they're supposed to follow, right?

[00:03:13]
The other one is in my world's worst radio button example, because when I put in the center, it looked like a bad radio button. If I set this to scale, Right, then I can go ahead and it will scale with the container. The other kind of interesting one that's really useful, Is to, let's say, let's make it like a pseudo navbar.

[00:03:43]
Up top, Right, if I do, in this case, we'll say, Be constrained to the top, cuz you're a navbar now little box, you're no longer a bad radio button. And then, four, if I set it to scale, let's just leave that for a second. That's not, yeah, scales, but really, in this case, what we want is left and right.

[00:04:11]
That just happened to work, but trust me, it's not what we wanted. So now, if we make it bigger on a horizontal axis, it's constrained on both the left and right so it will grow and shrink on that axis as well. And now kind of feels like almost like the Apple Notes application, right, or a little notepad, right?

[00:04:33]
And so depending on what you want to do, you can see various different options, right? And so, we've got something that, I took the iPhone SE frame here, what we wanna do is make that work, right? So we've got this idea of a bottom nav, a top nav, future Instagram posts, something along those lines.

[00:04:54]
Also here as well, we grabbed this, you can see that's not responsive. That's not what I want, as I'm like, adjusting for different viewports this is gonna drive me slowly insane. What I would like is for it to be a little bit more like, this hidden one down here, right?

[00:05:16]
What if I drag it? Everything kind of grows and manipulates as we would expect, right? This makes the designer's life easier and you'll notice the image shrinks, but my sidebar stays the same, but kind of the, if the three lines is a hamburger menu, I've decided that these are street tacos.

[00:05:36]
So this is a street taco menu, you can see the bookmarks kinda stay where they're supposed to go, everything kind of adjusts. Even this picture in the middle kinda fills it out and is bound appropriately.