This workshop will be retired on May 31, 2020.
Layout Guides & Safe Areas13:19 with Pasan Premaratne
In addition to the attributes defined on a view object, there are certain boundaries we need to be aware of that determine where we pin content and other views to.
In addition to the attributes defined on a view object, there are certain boundaries 0:00 we need to be aware of that determine where we pin content and views too. 0:05 With iOS 11, Apple added to UI kit, the concept of safe areas. 0:10 A safe area helps you place your views within the portion of the user's 0:16 interface that's visible on the screen, and not obscured by system elements. 0:21 If you take a regular view controller that's embedded in a navigation 0:27 controller, since iOS 7, the view controller edges extend beyond the edge 0:30 of the navigation bar, such that the navigation controller sits on top of it. 0:35 In such a scenario, if we were to position our view offset from the top 0:41 by five points, it would be obscured by the navigation controller. 0:45 In addition, different portions of the user interface maybe drawn in 0:49 different ways, depending on the device. 0:53 The iPhone X, for example, has a notch on the top 0:56 with the edge of the view extending above it on either side. 0:59 If we were to handle these situations manually, it'd be terribly complicated, 1:03 because we'd need to check for a device, orientation, and 1:08 the presence of navigations bars, tab bars, and so on. 1:11 Safe areas make this much easier by defining 1:16 the visible portion of the overall user interface. 1:18 By defining constraints in relation to the safe area rather than the edge of a view, 1:22 we can be sure that our content won't be obscured by UI kit components. 1:28 So what is a safe area? 1:33 Well a safe area is defined as a layout guide. 1:35 Okay, well what's a layout guide? 1:39 A layout guide is defined as a rectangular area that can interact with auto layout. 1:41 Now, while this definition is quite vague, there is no better way to put it. 1:47 Think of a layout guide as sort of an empty fake view. 1:53 It is a rectangular area that takes up space in your interface, but 1:57 is not visible. 2:01 Layout guides exist solely for the purpose of defining layout. 2:02 By having this invisible rectangle on screen, we can pin other views to it and 2:07 define areas of the screen that we should not place content in, 2:12 which is exactly what a safe area is. 2:16 A safe area layout guide is an invisible rectangle 2:19 created by the system that sits on top of an area 2:23 where we can be guaranteed that no system UI obscures the content underneath. 2:27 It is safe to put content in this area. 2:32 By pinning to the edges of this layout guide, we can size and 2:35 position our views accordingly. 2:39 Now, it's important to know that safe area layout guides are not 2:41 available in iOS SDKs below or prior to Version 11. 2:45 For that, we need to fall back to top and bottom layout guides. 2:49 But it's a bit tricky and best explained visually. 2:53 So to recap, iOS 11 introduced the concept of safe area layout guide, 2:56 which is an empty rectangle that looks like this. 3:01 Inside this rectangle, it's safe to place content. 3:04 We can layout content inside this area and use the leading, trailing, top and 3:08 bottom edges to constrain views. 3:13 In contrast, prior to iOS 11, we had a top layout guide and bottom layout guide. 3:15 Unlike safe areas, which define the area you can place content in, 3:22 these layout guides define areas that the system elements occupy and 3:26 are not safe to position content in. 3:30 So safe area's are defined on the route view in a view controller. 3:34 The top layout guide is a rectangle that covers the navigation bar portion 3:38 of the view controller. 3:42 While the bottom layout guide defines the area occupied by 3:44 the system UI on the bottom, like a tab bar. 3:47 Views don't know about navigation bars and tab bars, view controllers do. 3:50 So when using the older version of these layout guides, 3:55 the layout guides are defined on the view controller itself, but 3:59 safe areas are defined on the root view in a view controller. 4:03 So back in our Xcode project here, let's add a new storyboard file, so 4:08 we can play with this. 4:12 We're gonna right click on our group. 4:12 Add a new file. 4:14 And this time we're going to go to the user interface section and 4:17 select storyboard, hit next, and we'll call this layout guides. 4:21 Okay, when this appears, there shouldn't be any scenes in here. 4:30 The default storyboard has a view controller scene, so lets go ahead and 4:36 add an empty scene to start out. 4:39 We'll also set this as the initial view controller. 4:42 Okay, now with this scene selected, if you navigate to the file inspector, 4:46 you can see that you can turn on and off safe area layout guides. 4:51 And if you turn it off, it returns to the older previous way of handling things. 4:55 So we have an empty scene here and we want to do something fairly simple. 5:00 I want to add a sub view that fills up the entire space. 5:03 So let’s scroll down to the bottom here and grab a basic view 5:07 And again, we'll change the background color so we can see this better. 5:15 Now, with this view selected, we're going to head to the pin menu at the bottom, 5:23 which is the second option in the Auto Layout submenu from the right. 5:28 In here, we're going to add four constraints, two vertical spacing 5:32 constraints and two horizontal spacing constraints with a constant value of zero. 5:36 Okay, so let's select this. 5:41 Once you enter zero for the constant value, 5:44 notice that it'll automatically add that constraint as well. 5:47 It'll select it here. 5:50 So you can just tab through and select zero for all. 5:51 Now, with these four constraints linked, let's add four. 5:57 And once you add the constraints, the system should adjust the views frame and 6:01 it expands to fill up the view. 6:05 Notice, however, that the view doesn't go all the way to the top edge of the screen 6:07 despite setting that constant value, the spacing to zero. 6:12 Now again, with the view selected, navigate to the size inspector. 6:16 And you'll notice that, by default, all the constraints we added were pinned from 6:20 the edges of the view to the edges of the safe area instead of the super view. 6:24 When pinning from one view to another, 6:30 if one of the views is the root view in the scene, 6:32 then instead of pinning to the superview, constraints are pinned to safe areas. 6:36 So over here, 6:42 the red view is being pinned to a view that is a root view in this scene, 6:43 so this white view behind it, belongs to the view controller, it is the root view. 6:48 So in such cases, when the relationships are between a view that we've added and 6:52 the root view, we pin to the safe area and not to the view or super view. 6:57 Remember, that a safe area helps us avoid areas of the interface 7:02 that would be obscured by system components. 7:07 In our case, 7:10 the view doesn't extend all the way to the top of the screen because all views have 7:11 a status bar and the safe area prevents us from placing content underneath it. 7:15 The safe area, being a layout guide, is an invisible rectangle that, 7:20 in this case, covers the area occupied by the status bar. 7:25 By pinning to the bottom edge of this layout guide, 7:29 we avoid overlapping with the status bar. 7:32 To see what this looks like, we can run the app, and 7:35 you'll see exactly what we talked about. 7:38 But note that we added this custom storyboard scene, 7:40 it's not the main .storyboard file. 7:43 So to get that to run, we need to go the project settings here. 7:45 And under Main Interface, for 7:48 Deployment Info, from the drop down we're going to select LayoutGuides.storyboard. 7:50 And now, if you run, it should load that custom storyboard and not the default one. 7:55 So you an see here, the red view extends all the way up to the top, but 8:00 stops just under the status bar. 8:04 Now the advantage of using safe AR layout guides is that we don't have to change 8:07 a thing to accommodate for other potential content obscuring areas. 8:10 So to highlight this, I'm gonna stop this. 8:15 And let's add two labels to our scene. 8:20 So head back to layoutguides.storyboard, and from the object library, 8:23 look for label and drop two in here. 8:28 Let's add the first label to the top of the scene. 8:33 So when you drag it around, a guide should appear, or a few guides should appear. 8:36 Let's use these guides that appear to align it with the top edge and 8:40 then using the pin menu right there, let's pin the leading and 8:44 top edges by eight points and add constraints. 8:50 Now quickly inspect the constraints we added by selecting that label and 8:57 then navigating to the size inspector into the constraints area. 9:01 You'll notice that the two constraints we just added define a relationship 9:05 between the label and its' superview, not the label and a safe area. 9:09 Again, this is because the label's superview, 9:14 the red view, is not the root view in the scene. 9:17 It is only when one of the views in the constraint relationship is the root view 9:20 does the safe area layout guide come into play. 9:25 Okay, let's add another label. 9:28 So the second one, let's drag it to the bottom. 9:31 Again, we'll use the guides to align it. 9:34 And we'll pin it just like before, but this time to the leading and 9:35 bottom by eight points. 9:40 Now, let’s go ahead select this view controller, and from the editor menu, 9:44 we’ll embed this in a navigation controller. 9:48 The beauty of safe areas is that we don’t have to make any changes 9:55 to accommodate any other system UI elements. 10:00 So you'll notice here in the modified scene that, while there's some 10:03 additional space being blocked off now by the navigation controller, 10:08 our label seems to be just fine. 10:12 It's 8 points from the top where we positioned it. 10:13 Our red view has adjusted, because it is pinned to the safe area. 10:16 If we run the app now, you'll see that the addition of a navigation bar to the top 10:21 of the interface did not change the positioning of our label. 10:26 Similarly, if we were to embed the view controller in a tab bar controller, 10:30 you'll notice that the bottom label is still positioned eight 10:34 points away from the bottom and leading edges, it won't be obscured. 10:37 The system automatically adjusts the size and position of the safe area layout 10:41 guides to accommodate any interface components we add that obscures content. 10:46 So another example of this, is if you select view as here from the auto layout 10:52 sub menu, and you switch to an iPhone X, obviously, this label as not going to be 10:57 in the top left corner where the notch is but bumped all the way down, because 11:02 the safe area is accounting for both the notch and the navigation controller. 11:06 Okay, let's go back to our regular device. 11:11 And I'm going to hit Undo, well I'll stop the app first. 11:13 But I'm gonna keep hitting Undo until we're back to just the view controller, 11:18 no labels either. 11:22 So this begs the question, what if we didn't wanna pin to that safe area? 11:28 So I like my background views filling up the entire screen, 11:33 including under the status bar. 11:35 How do we achieve that? 11:37 So here, we're gonna select the red view. 11:39 And in the size inspector, we'll go to the constraint section and 11:41 we'll find the Align top to safe area constraint. 11:44 Then we'll click this to see the detailed view. 11:49 Here, we can see that the first item is View with the top attribute selected. 11:52 And the second item is the safe area's top attribute. 11:57 From the dropdown, you can edit a few aspects of the second item, including 12:01 the item itself and the attribute we're forming the relationship with. 12:05 So at the bottom, 12:10 let's switch from pinning to the Safe Area to pinning to the Superview instead. 12:11 Now once you'll do this, if you look back at the storyboard scene, 12:15 the layout hasn't changed at all. 12:18 And that's because the system is trying to maintain the layout defined in the earlier 12:20 scene, even though we've changed the second item that we're using. 12:24 Despite changing to the super view, 12:29 it still thinks that we want to position the red view 20 points from the top. 12:30 It does this by adding a constant value of 20 points to the top constraint, 12:35 as you can see here. 12:40 This leaves the red view the same amount of distance away from the top edge as 12:42 the height of the status bar. 12:46 So if we edit this constraint to have a value of 0, 12:48 now the view extends all the way to the top. 12:51 So that's safe areas, and a bit about layout guides. 12:54 We'll revisit these topics in subsequent content, 12:57 particularly when we learn how to write code for auto layout. 13:01 While we can use built in layout guides in interface builder, 13:04 we can actually define our own layout guides in code. 13:07 In addition, safe areas can also be modified and 13:11 extended by manipulating an insets property. 13:13 But again, we'll look at all of that later. 13:17
You need to sign up for Treehouse in order to download course files.Sign up