Layout Guides

When we learned about the basics of auto layout we covered some aspects of 0:00 layout guide. 0:04 If you're unfamiliar with that content follow the link list below. 0:05 A layout guide, as we previously discussed, 0:09 is an empty rectangle that we can use to help build layouts. 0:12 In Interface Builder we're restricted 0:16 to only being able to use the predefined layout guides, like the top and 0:19 bottom layout guides available on a view controller, but only prior to iOS 11. 0:24 In code, however, we can do a bit more with layout guides. 0:29 So, let's attempt to build a layout here with three views. 0:34 The goal is to space the three views out vertically 0:38 with equal spacing between the views, like so. 0:41 This sort of layout is achievable using stack views, but 0:45 stack views are a fairly new thing, and 0:48 if you're targeting older versions of iOS, you won't be able to use them. 0:50 Plus, it's always good to know all the tools you have on hand. 0:54 So in my project I've added a new swift file named LayoutGuides, and 0:58 in here we have a view controller named LayoutGuidesController. 1:03 Inside the class I have defined three views, 1:08 added it to the view hierarchy, and given it some constraints. 1:11 You can find this set up code in a link in the teacher's notes to this video. 1:16 Now to create the layout we want, the first thing we need is layout guides. 1:21 So I'm going to add a comment here. 1:26 // Layout Guides, and we'll define four stored properties and 1:28 assign a layout guide to each of them. 1:33 So, let firstLayoutGuide = UILayoutGuide, 1:35 and then I'm just going to copy this three times, paste it here. 1:43 I'll say, second. 1:48 Third and four. 1:51 Using layout guides is pretty straightforward. 1:58 You instantiate a new layout guide as we just did, and 1:59 add the layout guide to the view. 2:03 Let's do that now. 2:05 Layout guides function sort of as dummy views, but they aren't views, so 2:07 we don't add them as sub views. 2:11 We don't want them in our view hierarchy. 2:12 Instead, we have a method on UI view named 2:15 view.addLayoutGuide that allows us to add a layout guide, but 2:18 not involve them in the view hierarchy so that we don't have to draw a view. 2:22 So here we'll say firstLayoutGuide and we'll do this for all of them. 2:27 AddLayoutGuide(secondLayoutGuide), view.addLayoutGuide(thirdLayoutGuide), 2:31 and the last one. 2:37 Next we need to define the position and 2:40 size of each layout guide using auto layout. 2:43 If you, again, think of a layout guide as an invisible rectangle, 2:46 or a dummy view, much like regular views, they need to have a position and size. 2:50 We'll add these constraints in the activate method on NSLayoutConstraint. 2:57 So, right at the bottom, after all these, so these constraints here, 3:02 they simply give each of our views a height and a width, and 3:06 then position them or align them to the center x-axis. 3:09 So, we can add the rest of our constraints here in a new activate method, 3:13 NSLayoutConstraint.activate, and we'll start by placing 3:18 the first layout guide at the very top of our column of views. 3:23 So firstLayoutGuide.topAnchor.constraint(equ- 3:27 alTo: -- view.safeAreaLayoutGuide, 3:31 and obviously now you know that the safeAreaLayoutGuide is also 3:35 a layout guide, which is an empty rectangle, topAnchor. 3:40 It's just a pre-defined one. 3:44 Next, we'll pin the bottom of this layout guide to the top of the first 3:47 view we want to place, so view A. 3:52 So firstLayoutGuide.bottomAnchor.constraint(- 3:54 equalTo: viewA.topAnchor). 4:00 Each of these layout guides is going to go in between a view, so above and below it. 4:04 So now step two is to place the seond layout guide in between view A and 4:10 view B, and to do that, we'll take the topAnchor, of the secondLayoutGuide, 4:14 and pin it to viewA.bottomAnchor. 4:19 Then, next we'll do secondLayoutGuide.bottomAnchor and 4:24 this one we want to pin to viewB.topAnchor. 4:28 If this is confusing, you can put comments in between these things to say 4:33 which layout guide or which view is going in between what. 4:38 In between view B and view C we'll place the third layout guide. 4:42 So, thirdLayoutGuide.topAnchor.constraint(equ- 4:45 alTo: viewB.bottomAnchor), and then the layout guides, 4:49 so we're still on the third one, 4:54 it's bottom anchor is going to be pinned to viewC.topAnchor. 4:57 So just basic pattern here, and 5:02 finally we'll place the fourth layout guide after viewC. 5:04 So fourthLayoutGuide.topAnchor.constraint(eq- 5:09 ualTo: viewC.bottomAnchor), and finally the last anchor here, so 5:14 the fourth layout guide's bottom anchor is going to be pinned 5:20 back to the view.safeAreaLayoutGuide, and this time we want the bottomAnchor. 5:25 The trick to get this to work out is to set all the layout guides to have equal 5:32 heights. 5:36 This way after deducting all the heights of the views that we care about, 5:37 auto layout can take the remaining space and evenly divide it between the four 5:41 layout guides resulting in equal spacing above and below the views. 5:46 So a few more constraints here. 5:51 We'll say fourthLayoutGuide.heightAnchor.constraint- 5:52 (equalTo: thirdLayoutGuide.heightanchor). 5:58 Then we'll say thirdLayoutGuide.heightAnchor(equalTo: 6:02 secondLayoutGuide.heightAnchor, and we'll just walk up the chain this way. 6:06 SecondLayoutGuide.heightAnchor.constraint- (equal to: 6:12 firstLayoutGuide.heightAnchor), and then for the last one we'll 6:17 say firstLayoutGuide.heightAnchor(equalTo: fourthLayoutGuide.heightAnchor). 6:22 Okay, let's see what this looks like, Oops, 6:29 this is constraint equalTo, not constraint equalToConstant. 6:34 Okay, so to run this, we're going to go back to Main.storyboard, 6:38 and we'll set this backing class on 6:44 this default seen here to LayoutGuidesController, and 6:47 we'll run the app, And now you can see the end result. 6:52 So here we have three views that are equally spaced in the main view. 6:58 Now the benefit of this approach, 7:02 since the heights of the layout guides are determined by just dividing the available 7:04 space, is that we're not dependent on knowing the heights of any of the views, 7:07 nor do the views have to be of equal heights. 7:12 You can modify the height of either one of these views, 7:15 and we'll still get equal spacing above and below. 7:18 In addition, this layout can easily adapt to different device sizes and 7:21 orientations. 7:25 So to summarize, in Interface Builder you have access to some 7:27 predefined layout guides that you can use, like the safe area layout guides or 7:30 the previously named top and bottom layout guides. 7:35 But in code layout guides are much more flexible. 7:37 You can define any number of layout guides and 7:40 use them as dummy views to position your real views. 7:43 You cannot do this in Interface Builder. 7:46