This workshop will be retired on May 31, 2020.
Safe Area Layout Guides4:44 with Pasan Premaratne
Like plain layout guides we can do a bit more with a safe area layout guide in code as opposed to Interface Builder. In this video let's explore how.
Speaking of layout guides and things you can't do in Interface Builder, 0:00 let's go back to yet another topic we learnt about earlier. 0:04 With iOS 11, Apple introduced the concept of safe areas, which is a layout guide 0:07 inside of which are content is guaranteed to not be obscured by system elements. 0:13 When we used safe area layout guides in Interface Builder, 0:18 the only thing we could do was pin to it. 0:21 In code however, we can modify safe area layout guides to allow for 0:24 some additional customization. 0:28 To start, when working with code, we can figure out where the safe areas begin and 0:31 end on a device, by querying the safe area inset's property on a view. 0:36 The property returns an instance of UIEdgeInsets. 0:41 EdgeInsets, if you're unfamiliar with the concept, are values that are applied to 0:46 a view rectangle to shrink or expand the area occupied by the view's frame. 0:50 Positive values cause the frame to be inset, or shrunk by the specified amount, 0:56 while negative values cause the frame to be outset, or 1:01 expanded by the specified amount. 1:04 The safe areas we use are obtained by applying the inset values 1:07 on the view's bounds rectangle. 1:11 Why does this matter? 1:14 By default, the safeAreaInsets account for 1:15 the status bar and any additional bar such as the navigation and tab bars. 1:17 But what if we wanted to exclude other areas as well? 1:22 For this we have a setable property on UIView called additional safe area insets 1:26 that takes an instance of UI edge inset. 1:31 So I've gone ahead and added a new file to this project named SafeAreaInsets. 1:34 And in here I have a view controller sub class and some basic starter code. 1:39 Side note, you can get all of this code in a link in the teacher's notes. 1:43 So once you pasted in, navigate to main.storyboard, 1:47 and as always we're gonna change the backing class of this view controller, 1:50 the scene rather, to our new SafeAreaInsetsController. 1:55 Let's see what we have when we run the app. 2:01 Okay, so as you can see, nothing complicated. 2:11 We've created a custom view. 2:13 And if you inspect my constraint code, you can see what we've 2:15 pinned the leading anchor of the view to the safeAreaLayoutGuide.leadingAnchor, 2:18 as well as the topAnchor to the layoutGuide.topAnchor. 2:22 We've also given it a height and a width. 2:26 Now back in the viewDidLoad method, let's create an instance of UIEdgeInsets. 2:29 So we'll say let insets = UIEdgeInsets and 2:34 the Initializer takes values for top, left, bottom, and right. 2:38 So the top and the left, we'll say 50 and then we'll pass in 0 for the rest. 2:44 Remember that positive values cause the frame to be shrunk or 2:50 inset by the amount we specified. 2:54 Since we've specified positive values for the top and 2:56 left insets, we're trying to shrink the top and 2:59 left inset of the safe area while leaving the right and bottom unchanged. 3:02 That actually change the SafeAreaLayoutGuide by this amount, 3:07 we're going to assign this value to the additional SafeAreaInsets property. 3:10 Unlike SafeAreaLayoutGuide which is a property on UIView, 3:15 specifically the root view of a view controller, 3:19 additional SafeAreaInsets is a property in UIViewController. 3:22 So additionalSafeAreaInsets, 3:27 this is equivalent to saying self., and to that we'll assign insets. 3:30 Now if we run it, you'll see that we're able to modify the safe area 3:36 because the view controller is taking into account our additional insets. 3:40 The redView has been shifted to the left and down, 3:44 because we've shrunk the top and the left insets or the left frame. 3:48 Now has the views frame actually changed though, or has the safe area changed? 3:54 You can verify this by doing something as simple as changing the background color 3:58 of the rootView. 4:02 So if we do something like view.backgroundColor = yellow and 4:04 run it, You can see that 4:10 the view actually has not changed position at all, it's still in the same place. 4:16 So its bounds rectangle remains the same. 4:20 So in this way, 4:23 we can modify the safeAreaLayoutGuide to include any custom views. 4:24 So let's say that we had a view here that we permanently wanted 4:28 the SafeAreaLayoutGuide to exclude, so 4:33 that anything else we append wouldn't obscure it. 4:35 We can modify the SafeAreaLayoutGuide using this 4:37 additionalSafeAreaInsets property to achieve what we want. 4:40
You need to sign up for Treehouse in order to download course files.Sign up