This workshop will be retired on May 31, 2020.
Layout Basics13:08 with Pasan Premaratne
Let's put our knowledge into practice by starting with a very simple layout.
For this exercise, 0:00 the only thing we're going to assume is that you watched the previous video. 0:01 By not making any assumptions about what you know, 0:05 we can build up our knowledge from the ground up. 0:08 We should now have a basic understanding of what a constraint is, 0:11 a linear equation made up of a few different parts. 0:15 But how do we use it? 0:20 So let's start with a really simple example, an interface builder, and 0:22 work our way up from there. 0:25 I have an empty Xcode project here that I started using the basic, 0:27 single-view application template. 0:31 In the Main.storyboard file, 0:34 I also have a single scene containing a very simple view. 0:36 Now I've differentiated the background color so 0:39 we can distinguish between the base view and the one I've added. 0:41 You can either pause this video and create this Xcode project to yourself or 0:45 you can grab the download files for this video from the notes to get started. 0:49 We want to do a couple of things with this view. 0:53 I want it to be 100 points tall and 200 points wide. 0:56 Want to align the view horizontally with the super view, meaning the horizontal 1:02 center of the view has the same value as the horizontal center of the super view. 1:07 Also want to space it 50 points from the bottom. 1:12 For any view to be displayed on the screen we need to provide 1:16 two main pieces of information, its position and size. 1:21 Each of these can be broken down into two more variables. 1:26 A position requires an x and y coordinate, and a size requires a width and height. 1:30 So our responsibility when using auto layout to position and size our views 1:38 is to create enough constraints to satisfy these four requirements, 1:43 an x and y position, and a size and width, or a height and width. 1:47 Okay, so back to our view. 1:52 I want to position it in the center of the screen, horizontally. 1:54 Let's add our first constraint. 1:58 There are different ways that we can do this depending on the kinds of constraints 2:00 we want to add. 2:04 The first way is to use the auto layout sub-menu. 2:06 So click on the view, make sure you have it selected, and 2:10 then at the bottom of the screen, at the bottom right inside our storyboard editor, 2:14 you should see five icons right here. 2:19 This is the auto layout sub-menu. 2:23 For now, focus on the menu option that's right in the middle here, 2:26 that looks like these sideways bar graph. 2:29 This is the Align menu. 2:32 Actually, before I do any of that, I should point out that this menu might 2:35 change from time to time, between Xcode releases, if and when it does. 2:38 Just hover over the icons to get a description of what they are. 2:44 So if I hover over this, you'll see it says add new constraints, 2:48 this one says align. 2:50 Now these names or 2:52 description of what this menus do should stay more less the same. 2:54 So you should be able to find the relevant menu, 2:58 the one I'm talking about, even if this order is rearranged. 3:01 If you click on this menu, there are several options here. 3:05 So these pertain to the different attributes of our view that we learned 3:08 about earlier. 3:12 The first one, for example, is Leading Edges followed by Trailing Edges. 3:14 So we know what these attributes refer to, but why are they grayed out? 3:18 So right now we only have one view that we're working with. 3:23 If we had two views selected, we could select this first constraint 3:27 to align both views by their leading edges. 3:32 The constraint we want to add is to horizontally center this view on screen, 3:36 and that is specified by the Horizontally in Container constraint, 3:41 or the option in this modal. 3:45 The text field beside it, beside each of these options, 3:48 allows us to specify a value for the constant in our constraint equation. 3:52 So again, making sure you have the view selected, again, otherwise many of these 3:57 options are unavailable, click on the horizontally in container option. 4:01 So for this constraint that we're about to add, 4:07 we're going to leave the constant field blank which should default to 0. 4:09 And that means if you go back to our equation we want both 4:13 the horizontal centers of our view and the super view it's in to be aligned exactly. 4:17 Adding a constant value will offset it by certain amount. 4:23 With this option selected, right below you should see a button that says add 4:27 1 constraint, so go ahead and tap that and click that to add it. 4:31 So, nothing really happened here except that our view is now outlined in red. 4:36 Why is that? 4:41 Remember, we said that we need to provide with enough information 4:42 we need to create enough constraints to determine the x origin, 4:47 y origin, height, and width of the view that we're trying to position and size. 4:52 When we added the horizontally centered and 4:58 container constraint, our linear equation looks like this. 5:00 By connecting the center x attribute of our view to the center x 5:05 attribute of the superview, we're hoping to establish an x-coordinate position. 5:10 Now before we actually move on, 5:15 before I explain why this doesn't work, let's actually delete this constraint. 5:16 And we're going to delete it for two reasons. 5:21 One, you're gonna find out how you can delete a constraint. 5:23 And two, we're going to look at a different way of adding a constraint. 5:26 So, to delete this constraint, 5:30 you are going to select the view that the constraint is added to. 5:32 You're gonna go to the size inspector and then if you scroll down, 5:34 there's now a section with the constraints. 5:39 This diagram here shows the constraints that we added 5:42 along with the edges that we have pinned to or aligned with. 5:45 So here you can see the different edges of our view and 5:49 we've added a constraint that aligns the center x edges. 5:52 Okay, we're going to select the constraint below. 5:57 This is a representation of the constraint and we're going to hit Delete. 6:00 I mentioned that there were two ways to add constraints. 6:04 So the first way was using the auto lab sub-menu, that's this menu down here. 6:07 The second is by holding down Ctrl on your keyboard and 6:12 dragging from the first view to the second view. 6:17 When we do this, a modal pops up. 6:21 This modal lists out the different constraints we can add between two views. 6:24 In the Auto Layout sub-menu, 6:29 when certain constraints didn't apply, they were grayed out. 6:31 Similarly here, this modal is contextual and only displays the constraints that 6:34 are relevant to the two views selected and to the position that you Ctrl and drag to. 6:39 So here, I Ctrl dragged from the view to the top in a vertical orientation, 6:46 so it only says Center Vertically. 6:52 And if I Ctrl drag and drop here, you can see it says, Center Horizontally. 6:55 This modal is really contextual. 6:59 Okay, so let's go ahead and select this Center Horizontally option. 7:02 And again, we've got our same center x constraint again, so we're back to 7:07 the same point, but we've looked at two different ways of adding constraints. 7:11 There are pros and cons to both of these methods, and 7:16 we'll talk about them as we go on. 7:19 Unfortunately, we haven't added enough constraints to determine that information, 7:21 the size and position of our views. 7:26 Now Interface Builder, when you do this, 7:28 tries to help you figure out what's going on with the system of colors. 7:31 So as you can see here, our constraint that we just added is red. 7:35 When you add constraints they're added as full fledge objects in its phase builder. 7:40 This constraint is as much an object as his viewings. 7:45 These objects are depicted differently depending on the type of constraint you 7:49 add and the amount of information you provide. 7:54 When you see a plane line that is a straight one with no end caps, 7:57 that means this constraint is 1. 8:03 So over here we have no end caps. 8:05 I'll show what an end cap is when we actually encounter it. 8:08 Yep, we have none here. 8:11 And this means this is a constraint where two edges are aligned. 8:13 So in our case the center x attributes are aligned with each other. 8:17 In addition, aligns are colored red. 8:22 Red lines mean that one of the items affected by this constraint has an error. 8:25 Either the item has an ambiguous layout or its layout is not satisfiable. 8:31 Essentially auto-layout cannot determine a final position and size for 8:37 this view based on the constraints we've defined. 8:42 So when you see red, that means you need to add more constraints because you 8:45 haven't provided enough information about position and size. 8:49 A frame doesn't work with just a center x coordinate. 8:53 Remember auto-layout doesn't care about a center x coordinate. 8:57 It needs an x origin, and a y origin to determine where to position it. 9:00 To determine the origin from a center x attribute, we also need to define a width. 9:06 This way, the system can cut that width in half and 9:12 determine the x origin by subtracting half the width from the center x attribute. 9:15 So, if this value here is 200, for example, where this position lies, 9:21 the center x constraint is at X200. 9:26 And then, the width over here is 200. 9:29 If we cut the width in half, that means this width over here is 100. 9:32 And then we take the position where the center x constraint is, 9:39 200 minus 100 from that, which would give us our origin position. 9:43 So that's what we're looking for. 9:48 Let's try and sort out the origin's x coordinate and 9:50 width simultaneously by adding in a width constraint. 9:53 So, again, make sure you have your view selected. 9:56 And then back in the auto layout sub-menu, 9:59 this time we are going to look at the second icon from the right, the pin menu. 10:02 When you hover over it it says add new constraints. 10:07 The pin menu has a few different section which we are going to work through. 10:11 Right now we are only concerned with adding the width constraint, 10:16 which is down here. 10:20 Selecting the width constraint isn't enough, 10:22 though, cuz we need to provide a constant value. 10:24 We want this view to be 200 points, so let's specify that as our width. 10:28 So now if you think of the constraint equation, we have specified a value for 10:35 the constant, with the attribute being the width attribute. 10:40 Okay, let's go ahead and add this constraint. 10:43 When we do this, our view and resulting constraints change, albeit subtly. 10:47 So if you weren't looking closely, you might miss it. 10:53 Now instead of there being red everywhere, 10:56 we only have two red lines, which might be really hard to see. 10:58 So there's one above and one below. 11:02 If you can't see it, what you can do is go to the attributes inspector and 11:04 change this background color to something like black. 11:08 And now you can see it at the top. 11:11 But that makes our other lines disappear so 11:13 I'm going to change this to a light gray. 11:17 Here we go. 11:19 Okay, so we have two red lines, one above and one below. 11:20 The rest of the lines are blue. 11:25 In contrast to red lines, blue lines indicate that these items 11:27 have a non ambiguous satisfiable layout, and the item's frame 11:31 is in the correct position as calculated by the auto layout engine. 11:36 That's exactly what we want. 11:40 So notice where the blue lines are here, they're on the leading and 11:42 trailing edges which means that we have a width, but 11:46 we don't have anything pertaining to a height. 11:50 That's why that is red, and because we also don't have a y position. 11:52 You'll also notice that there's a new sort of line here. 11:57 Add the bottom of the view in the horizontal direction. 12:00 There's a line with end caps to it, so this is what end caps look like. 12:03 A line like this with a T shaped end cap is called an I bar and 12:09 shows the size of a space. 12:14 This space can be either the distance between two items or the height or 12:16 width of an item. 12:20 It is also possible to add a width constraint using the contextual model. 12:22 So in this case we would control drive from the view to the view itself and 12:27 select width. 12:31 Downside here and I mentioned earlier that there are pros and 12:33 cons to each approach is that there's no way to select the constant value. 12:36 We'd have to add the constraint, go to the Size Inspector, edit it, and 12:42 then add the constant value. 12:47 But if you look here at this little grayed out section, you can see that there's 12:49 Hold Shift to select multiple option, and Hold Option for alternates. 12:53 And when I hold Option you will see that the modal changes. 12:58 Now the advantage of this is you can quickly add multiple constraints 13:02 if you control drag. 13:05
You need to sign up for Treehouse in order to download course files.Sign up