This workshop will be retired on May 31, 2020.
Layout Margins5:36 with Pasan Premaratne
When working with views that display content Auto Layout provides margins to control the amount of whitespace between the view's edges and its content. In this video let's explore how we can use these margins.
Now, the third boundary we need to be aware of are layout margins. 0:00 Layout margins provide a visual buffer between a view's content and 0:05 any content outside of the view's bounds. 0:09 The layout margins consist of inset values for each edge, so 0:12 the top, bottom, leading, and trailing of the view. 0:16 The point of a land margin is to create a space between the edges of a view's 0:19 bounds rectangle, and the content inside the view. 0:24 This gives a nice padding all around so we don't pin content to the edges. 0:28 Now earlier, we added two new labels to our view. 0:33 And as you drag those labels around, 0:35 you notice that they snapped to certain positions. 0:37 Let's try that again. 0:40 So, I'm gonna grab a label and drag it around. 0:41 And you'll see here that they snap to certain positions, and 0:43 there are these guides that appear. 0:46 So these dotted blue lines are layout margins. 0:48 From the Editor menu, navigate to Canvas and select 0:51 Show Layout Rectangles to permanently show the layout rectangles for given views. 0:56 There are quite a few lines in here. 1:02 So there's an inner box here that you can see this faint blue line, and 1:04 there are two blue lines on either side over here. 1:09 So you can see one and two, and then a line at the top. 1:12 The two margins on either side that are not part of the box, so to speak. 1:16 And let me move this label around so you can see this better. 1:22 So these two lines that are not part of the box are the margins on the root view. 1:24 By default, 1:30 the superview's margins are offset by 20 points on the left and the right. 1:31 The inner box right here is the red view's 1:36 content margins and they are offset by eight points on all sides. 1:41 Only the root view has a 20 point offset. 1:46 The default for any other view is eight points. 1:49 The primary rule of layout margins are simply to provide some white space on 1:53 either side of your content. 1:57 To set up constraints that respect layout margins in Interface Builder, 1:59 it's as simple as checking a box. 2:04 So if we drag this label around and put it, let's say over here, 2:06 you'll notice it snaps to that inner box. 2:10 When we go to the Pin menu to add a constraint, 2:13 I can add a leading constraint. 2:15 And there is a box here that says Constrain to margins. 2:17 Now, when I select it, when you constrain it, notice that it's gonna be 2:21 eight points away, not from the edge of the red view, but from its margins. 2:26 So right there, you can see that faint blue line. 2:32 I can't really select it. 2:34 This is now, because it considers the red view's margins as the edges 2:36 when you checked that box. 2:40 0 points relative to the margin is 8 points relative to the edge of the view. 2:42 But 8 points relative to the margin is 16 points from the edge of the view. 2:48 Margins can be changed, both in Interface Builder and in Xcode. 2:53 So as you select the red view, and at this point, 2:58 that might be difficult because it's pinned all around. 3:00 So you can go to the document outline and select the root view. 3:02 And then in the size inspector you should see a section labeled Layout Margins. 3:06 By default, this is set to Default, 3:11 which is eight points on any view other than the root view. 3:14 We can change this to Fixed and now you can manipulate any of these margins. 3:17 So I can bump up the left margin, and you'll see that it moves in our seam. 3:24 And because the label is pinned to the margin, it moves it along with the margin. 3:28 The advantage here is that by constraining content-based views to the margins, if we 3:34 want to manipulate white space, instead of repositioning all our views individually, 3:38 we can simply change the offset value for each margin. 3:43 Now, before we wrap this up, 3:47 I want to point out something that might be confusing you already. 3:48 On the left edge, we have two vertical margins, the superviews margin and 3:52 the red views margin. 3:57 When we check the box that says Constraint to margins, it adds constraints 3:59 that are relative to the current views immediate super views margins, right? 4:03 So it's pinning it here, as you can see, not to that inner box, but 4:08 to the vertical lines that are part of the superview. 4:12 The immediate superview of the label is the red view and 4:15 it is relative to the red view's margins that constraints are created. 4:18 What if we wanted to create constraints relative to the root view's margin? 4:23 The solution here is to ask the red view to inherit, so 4:27 to speak, the root view margins. 4:31 We do that by selecting the red view, navigating to the Size Inspector. 4:33 Let's change this back to Default again. 4:39 And then checking the box that says Preserve Superviews Margins. 4:42 And now you'll see that the red view, 4:46 that inner box, snaps to the superviews margins. 4:47 So now this red box is spaced 20 points offset from either side. 4:51 Now the red view's left and right margins, or the leading and trailing margins, 4:57 are the same as the root views, this does not affect the top and bottom margins. 5:02 In doing this, the label we pinned relative to the margin has moved, 5:07 it is now 20 points from the left edge. 5:11 Okay, at this point, I think we have a sufficient base in our knowledge of 5:13 auto-layout to work through a few examples. 5:17 In the notes section of this video I've linked to a few other videos. 5:20 I want you to take some time and 5:24 work through those before continuing on through this series, pretty important. 5:27 This way you'll get some practice in before you learn any new concepts. 5:32
You need to sign up for Treehouse in order to download course files.Sign up