This workshop will be retired on May 31, 2020.
Implementing Constraints9:51 with Pasan Premaratne
We still have a few more constraints to add before our layout is complete. In this video, let's use Interface Builder's different menu options to finish our layout.
Let's go back to the different parts of our constraint equation. 0:00 So first there's the equation itself, where an attribute on a view equals 0:03 an attribute on another view times a multiplier along with an offset value. 0:07 Next is the type of relationship. 0:12 When we added our two constraints, we didn't have to specify a relationship. 0:15 And that's because when adding constraints in storyboards, in interface builder, 0:20 constraints automatically default to equality relationships. 0:25 With the View selected, again go to the size inspector in utility's panel, and 0:30 go back to the section labeled to Constraints. 0:35 Here you can see the two constraints that we've added. 0:38 We have center X and a width constraint. 0:40 The first one we added, was a line center X to the safe area. 0:43 We'll talk about safe areas later. 0:48 We can view two levels of details about the constraint. 0:50 For the first level of detail, 0:55 tap on the Edit button that you see on each individual constraint. 0:56 So here we can see that we created an equality constraint, 1:01 as denoted by the equal sign with a value of 0 for the constant. 1:05 There's a field named Priority here, we'll get to that soon, ignore it for now. 1:09 But below that you see the multiplier value. 1:14 The next constraint is the width constraint. 1:17 This again is an equality relationship with a constant value of 200. 1:20 Note that in this case, the multiplier is grayed out. 1:26 Why is that? 1:30 When we were discussing the linear equation and 1:31 attributes, we said that there was an odd type of attribute called not an attribute. 1:33 Since the width constraint is a relationship on a single view, 1:39 our linear equation looks like this. 1:43 Because the system knows that the multiplier has no role to play here, 1:46 it is grayed out, right? 1:51 We're not establishing a relationship between two views, so 1:52 you can't multiply that relationship. 1:55 Now back to this list of constraints. 1:58 If you double-click on any of these, you should go into a more detailed view. 2:00 And here you'll notice that it's set up exactly like the constraint equation. 2:05 Because the lines in the scene are actual constraint objects, 2:11 you can also click on them here to get this inspector view, right? 2:15 So you can go to each constraint and double-click, and 2:19 you'll get these details. 2:23 Or you can select them in the document outline. 2:25 So now, where you've previously only seen a view, now you have each 2:29 constraint that is attached to the view as a subview listed below it, right? 2:33 So here we have the 200 width constraint. 2:38 And then here we have the center-X constraint. 2:41 This is outside of the nesting of the view, 2:43 because it is added to the superview, and not to that view itself. 2:46 Okay, back in our view, most of the constraints are blue, but 2:50 there is some red. 2:53 This red is because we've only provided half the info we need. 2:55 We also need to inform auto-layout about the Y origin and the height. 2:59 To add a height constraint, go to the Pin menu. 3:04 So select the view, go to the Pin menu, select the Height constraint, and 3:07 we're going to add a value of 100, and hit Enter. 3:12 Okay, so we have a new type of line. 3:16 Again, this is an I bar. 3:20 And you might not be able to see it clearly in the video, but 3:22 you probably can see clearly on your screen if you're following along. 3:24 This is orange. 3:28 Now orange means that the representation of the view that you see here in the scene 3:30 doesn't match the view that is generated by the constraints that we've defined. 3:37 So what this orange line is saying is that you set a height constraint. 3:42 You said the width or the height should be 100 points. 3:46 But this height here isn't 100. 3:50 So your constraint is valid, but the frame being generated that you see here, isn't. 3:53 There's a button for that to solve that. 3:58 It is the leftmost button, that's called Update Frames. 3:59 And if you select it, it should, once you select the view, 4:03 it should update the frames. 4:07 Now the reason it doesn't when you click that is because we don't have a Y origin. 4:09 We're almost there. 4:15 So we have a height and a width so the system can size it appropriately. 4:15 It can determine the S origin because we've specified that it should 4:19 always be centered. 4:23 But because it cannot determine the Y origin, 4:24 it defaults to giving it a Y coordinate of 0 which isn't what we want. 4:28 So let's add one final constraint to satisfy the system. 4:33 We're going to pin the view 50 points from the bottom of the screen. 4:37 Now how would that satisfy our layout requirements? 4:41 Well, we already know the X value for the origin and we have a height value. 4:44 This system knows what the Y value is for the bottom of the screen. 4:49 By subtracting 50 points, that is the space that we're adding, 4:54 from the Y coordinate of bottom edge of the containing view, 4:58 we should get the position where the bottom of our view is. 5:02 And then if we subtract the height of the view, we now have a Y coordinate for 5:07 the origin point. 5:12 So at this point then, we have the origin and size information, and 5:13 Auto Layout can position the view. 5:17 So again, with the view selected, go back to the Pin menu, 5:19 the second one from the right. 5:23 At the top, there's a section with a white box surrounded by four I bars, 5:25 just like we have I bars in our actual scene. 5:30 This section allows us to pin the edge attributes of one view 5:33 to the nearest edge attribute of its superview. 5:38 So this white box it represents the view that we're working with. 5:41 If we want to pin the bottom edge of our view to the bottom edge of the superview, 5:45 we would select this I bar. 5:50 Because it represents the bottom edge of our view 5:51 to the edge of the nearest superview or the nearest neighboring view. 5:54 So we select this I bar, and then in the text field specify a constant value 5:59 of 50 points to indicate that we want to space it out by 50 points. 6:04 Right below this diagram is a check box that says constraint to margins. 6:08 Let's ignore this for now, we'll come back to it. 6:14 Since we're pinning our view to the superview, 6:16 the outermost view in our hierarchy, by default, 6:19 we're going to pin not the edge of the view, but an area known as a safe area. 6:22 This is something we'll come back to, so don't worry about it for now. 6:27 But it's an area that is guaranteed to not be obscured by system elements. 6:30 Our linear equation will look like this. 6:34 So we have a view's bottom pinned to the edge of the superview's safe area bottom, 6:37 rather than the superview's bottom directly. 6:42 And then we have an offset of 50 points. 6:45 If we were to pin to the bottom of the superview itself 6:48 rather than the layout margin, our constraint equation would look like this. 6:51 Okay, so let's go ahead and add this constraint. 6:56 Now once we do that, 7:00 everything turns blue, just like we did with the other constraints. 7:01 We could have created this one by control dragging from the view to the superview. 7:06 From the model that pops up, we could select a vertical space constraint. 7:10 But just like with the width constraint, or 7:15 really any constraint where you need to add a constant, 7:17 this needs to be done after the fact from the constraint attributes. 7:20 Okay, so I'll show you how you do that. 7:25 I'm gonna hit Ctrl+Z to undo that, right? 7:27 So we've removed that constraint, so 7:30 we can Ctrl+drag now from the view to the bottom. 7:32 We'll select Bottom Space to Safe Area. 7:35 You'll notice that obviously because there's a textual description to this 7:39 model, you see more about what you're pinning to, whereas 7:42 with the I bar in the Pin menu, there's no description of what we're doing. 7:46 We're just assuming. 7:50 So we hit Bottom Space to Space Area. 7:52 And then we would double-click on here, and 7:54 select the constant as 50 points to position it. 7:57 Now there is an advantage to doing it this way. 8:01 When we use the Pin menu, and select the I bars to specify spacing constraints, we 8:04 don't get an opportunity to select which view we're setting this relationship with. 8:09 Now imagine we had multiple views and we did it that way. 8:14 By default, the system will pick the nearest neighbor. 8:17 Most of the time the choice made is the right one, but 8:20 by control dragging, we can be explicit about the two views. 8:23 To see what this looks like on different devices, to see whether Auto Layout 8:28 solves the problem that we looked at in the first video, 8:32 we can go to the bottom where we can select the different devices. 8:35 Let me change this again back to red so that we can see it better. 8:39 And now we can click through the different devices and you'll see that it's sized and 8:44 positioned accurately in both different device orientations and 8:49 different, or different devices, and different orientations. 8:53 So it always maintains that size and positioning. 8:57 Pretty cool, right? 9:01 In the example without Auto Layout, we had to modify the frame and 9:02 specify hard-coded origin and size values 9:05 to maintain a layout across orientation changes just on a single device. 9:09 But here with four simple constraints, we're letting all our layout do all 9:13 the heavy lifting, and have a layout now that works across many devices and 9:17 orientations, and most importantly is future proof. 9:22 Apple can release a new device with a different science, 9:26 possibly a different orientation, and our layout should still work. 9:30 Okay, so this was a very long video, but 9:34 you've worked through how to apply what you know about the constraint equation 9:36 to actually building a layout using Auto Layout. 9:41 In the next video, let's learn about some fundamental concepts, margins, 9:44 layout guides, and safe areas. 9:49
You need to sign up for Treehouse in order to download course files.Sign up