Inequality Relationships

The layouts we've looked at so far have been simple layouts. 0:00 In reality our designs are going to be a bit more complicated 0:04 than a few rectangular views on screen. 0:08 Hopefully you worked through some of the recipes linked to in the previous videos, 0:11 and got some practice in because we're going to explore a few more concepts. 0:15 Let's bring that constraint equation back up on screen here. 0:20 When we talked about this equation earlier, 0:24 we said we were creating a relationship between two views. 0:26 So far we've only seen one type of relationship, an equal relationship. 0:30 There are two more types we can create, a less than or 0:36 equal, and a greater than or equal. 0:39 Where our previous relationships were fixed in that if we said 0:42 one view should be eight points away from another, it always stayed that way. 0:46 Less than or equal and greater than or 0:51 equal relationships can fluctuate to accommodate a layout within a given space. 0:54 This is easier to understand if we just start playing around, so 0:59 let's jump right into a new storyboard scene. 1:03 So we don't want to mess around with main.storyboard or layout guides. 1:06 Gonna right-click, add a new file. 1:10 Again, this is going to be a storyboard file and we'll call this Inequalities. 1:13 We'll add a view controller here to the scene, and 1:20 we'll set it as the initial view controller. 1:24 To illustrate this concept, let's build a seemingly simple layout. 1:31 So we're gonna drag out two labels from the object library. 1:36 And we'll center the first one, and we'll just drop the second one below somewhere. 1:43 So we'll give these labels arbitrary text. 1:49 I'm going to set the first one to first, and the second one to second. 1:52 This is zoomed out a bit too far, let's bring that in, there we go. 2:00 Okay, so make sure you have the first one set to the center of the scene. 2:04 You can drag it around until you get it to snap. 2:07 And then we'll set some constraints to position it here. 2:10 So from the Align submenu and the Auto Layout submenu at the bottom, 2:13 we're going to select horizontally and vertically in container. 2:16 Next, position the second label somewhere below this first centered label. 2:20 Now make sure that it is also horizontally centered so it's aligned. 2:25 And let's just assume that this is the final layout I want for my app. 2:30 So let's go ahead and add some constraints. 2:35 We'll give this label a horizontal center, or 2:37 Horizontally in Container alignment constraint. 2:40 And you can either use the Alignment menu or 2:43 just CTRL + drag from the label to the super view. 2:45 Next let's set vertical spacing constraints from the second label 2:50 to the first and the second label to the super view. 2:54 So I'm going to simply Ctrl drag here and accept whatever 2:57 constant values are automatically selected based on where I've positioned this label. 3:00 So second to first, vertical spacing. 3:06 And then second to bottom, bottom space to safe area. 3:09 Okay, so we've got blue I-bars all around here, 3:14 which means that our layout has been satisfied. 3:17 Let's see how this looks. 3:20 Right now we're previewing this design on an iPhone 8 or 3:22 more specifically the 4.7 inch device. 3:25 So let's see what this looks like on larger devices. 3:28 Now you can do that by clicking on View as at the bottom, and 3:31 then working your way through the devices. 3:34 On larger devices, our blue I-bars, if we click around, 3:38 oops, should still be there. 3:44 At least on the iPhone X over here, because we have plenty of space. 3:48 Now let's go up to the next one. 3:52 And this works here as well. 3:53 Let's work our way down from the iPhone 8 to the smaller devices. 3:56 And here you'll see that now we have red, no more blue I-bars, 3:58 indicating that we do have issues. 4:03 But least over here we can still see the labels, right. 4:06 And even if we go to the smallest device size we can. 4:09 Now if we go back to our original, and let's say I change this constant value. 4:14 I wanna put this a bit lower, I say 50 points, right, so it's closer down. 4:19 And then I'm going to delete this constraint. 4:24 Now it's positioned right here. 4:27 And I'll add that first vertical space in constraint again. 4:28 Now if we go through, it should still be fine on the larger device sizes. 4:32 But let's see what it looks like, okay, so on the second we still have red All right, 4:39 now these issues that you see here, these red values, these red I-bars, arise 4:48 because of the specific constraints that we've chosen at to arrive at our lay out. 4:53 Since we set the vertical spacing constraints in both directions, 5:00 we have one going to the bottom here, and one going to the first label at the top. 5:04 We’ve defined a very specific relationship that doesn’t leave much wiggle room. 5:08 So in the case of this second label, not only do we have a vertical spacing 5:13 constraint between the super view's bottom and the label's bottom, but 5:17 we also have a second vertical spacing constraint from the first label's bottom 5:21 to the second label's top, which is this red I-bar you see here. 5:25 This means that the second label can only occupy a very specific position 5:29 to satisfy the two constraints. 5:34 It cannot move up or down as the size of the device changes 5:36 because of these rigid values that we've set. 5:40 So fixed in between these two, as the views get smaller, 5:43 the system has no way to adjust the constraints to maintain a layout and 5:47 display the second label properly. 5:52 So here there's just not enough space to have this 252 point spacing 5:54 constraint at the top and a 50 point spacing constraint at the bottom. 5:59 We can fix this with the knowledge we already have. 6:04 So if we select the second label, I already have it selected, 6:08 then we'll go ahead and select the top vertical spacing constraint and delete it. 6:11 And now our problem goes away. 6:16 On all screens, we should just have blue all around. 6:19 Okay, let's try and tweak this. 6:23 Let's see how far we can take this, and add one more specification to our layout. 6:25 So back on the iPhone 8, the 4.7 inch layout, we're going to delete any 6:29 vertical spacing constraints on the second label, just so that we can start over. 6:34 And we'll say that we want this second label 6:39 to be 200 points from the bottom here. 6:42 Okay, on this device, that looks okay. 6:47 But let's go to a smaller device, and then an even smaller device. 6:49 So on the iPhone SE size, or the iPhone 4S, well actually let's back up. 6:53 On the iPhone SE, this is not too bad. 6:59 But on the iPhone 4S, this is way too close to the first label, right. 7:01 I don't like how it looks. 7:07 What I would like is for the second label to be below the first like it is now, but 7:09 not too close to it. 7:13 So essentially what we want here are two constraints. 7:15 One that defines a minimum spacing between the first and 7:19 the second label so that it looks decent, the second label doesn't get too close. 7:22 But then I also want a second constraint to pin the bottom at a desired height. 7:27 But we already looked at that, right. 7:32 That's what we started out with. 7:34 Having two constraints, a top and 7:36 a bottom space constraint, makes our layout inflexible. 7:39 To solve this we have two tools or concepts at our disposal. 7:43 The first, as we talked about, is an equality relationship, or 7:48 rather a greater than or equal or a lesser than or equal relationship. 7:53 So let's implement this. 7:57 We'll go back to our base, our iPhone 8 size, and 7:59 again we'll delete the existing vertical constraints. 8:02 Now let's also make sure that, like before, 8:08 we have two sets of vertical spacing constraints on it. 8:11 So we'll do one from the second label to the firs, 8:14 so this will be a vertical spacing constraint. 8:18 Let's adjust the size, there we go. 8:22 And then a second vertical spacing constraint from the second label to 8:25 the super view's bottom. 8:30 And that should be set to 200 points. 8:32 There we go. 8:35 Okay, next we're going to select the vertical space constraint. 8:36 Now really quick, if you go all the way to the bottom, right, 8:40 and you click, we're back at our problem, red I-bars. 8:43 Let's go back now and we're going to select that 8:46 vertical space constraint between the two labels, and then make sure 8:51 in the attribute inspector this section should pop once you select the constraint. 8:55 We're going to modify this relation property. 9:00 Right now it's set to equal. 9:03 Let's change this to greater than or equal. 9:05 By doing this we're indicating that this constraint can be greater than or 9:08 equal to the value of the constant specified. 9:12 Now when I say I don't want the second label to get too close to the first, 9:16 more specifically I want to say that it should be no closer than 32 points. 9:21 So let's specify that as the constant. 9:26 A greater than or equal relation, unlike the equal only relation, 9:29 allows a constraint to grow and shrink as the layout around it changes. 9:34 By specifying a greater than or 9:38 equal relation with a constant value of 32 points, we're stating 9:40 that at minimum the constraint should be no less than 32 points. 9:45 Meaning that the third, or rather the second label, 9:50 should not get any closer to the first than my 32 points. 9:53 Once this bottom constraint has been satisfied, if the space between the second 9:58 and the first label is greater than 32 points, then the constraint can grow, 10:03 so to speak, to position the second label a distance greater than 32 points away. 10:09 This is why it's called a greater than or equal relation. 10:15 We're allowing it to be greater than 32 points if possible, but 10:19 at the very minimum it should be equal to 32. 10:23 The less than or equal to constraint is the opposite of this. 10:26 If we apply a less than or 10:30 equal relation here with a constant value of 32 points, we're indicating 10:31 that we want the maximum distance between the two labels to be 32 points. 10:36 So the constraint can be less, it can shrink if it needs to to accommodate 10:41 other constraints in the layout, but it cannot grow more than 32 points. 10:45 Now with the changes we've made, our layout will work in most cases but 10:50 not all. 10:55 So you can see that it works, is expected to work on the iPhone 8 because here, 10:56 after satisfying the bottom spacing constraint, there's still enough space for 11:00 this to be more than 32 points. 11:04 And this constraint grows, and everything is fine. 11:05 If we go the iPhone SE, you will see that we still have blue I-bars so 11:09 we've solved this problem. 11:13 Now in all but the last device size, this does not work. 11:14 So it seems like it works, right, you still have blue I-bars. 11:18 But in this device size, or at least in all but this device size, 11:22 there's enough space available that after you set the bottom space constraint, 11:26 the vertical space constraint can still be added to the top one without any issues. 11:32 That's because that remaining space is greater than 32 points and can grow. 11:38 For the smallest device though, 11:42 this available space below the first label is really small. 11:44 That means that after setting the bottom space constraint with a constant value 11:48 of 200 points, there isn't enough space to add that top vertical space constraint. 11:52 Or conversely, after setting this minimum 32 point spacing between the second and 11:58 the first label, 12:03 there isn't enough space left below to add a 200 point vertical space constraint. 12:04 Remember that since our top constraint has a greater than or 12:10 equal relation, the minimum value is 32 points. 12:13 It can be greater than that but it cannot be less. 12:18 Since the available space for 12:21 the top vertical spacing constraint on the second label is less than 32 points 12:23 on the smallest device, auto layout cannot resolve this issue. 12:27 And so what it's done here is it starts to reduce the height of the label, 12:31 and in our case the height has dropped below zero and 12:36 you just can't see the second label at all. 12:39 So in a situation like this, 12:42 auto layout can make some decisions on its own in an effort to resolve the layout. 12:43 One decision it can make is to not install a constraint 12:49 when we have defined a layout that cannot be resolved. 12:53 So in the case of this iPhone 4S, we have two constraints competing 12:57 to determine the vertical position of the second label. 13:02 Now to solve this problem, we need to reach into our toolbox for 13:05 another approach. 13:08 But we'll tackle that in the next video. 13:09