This workshop will be retired on May 31, 2020.
Layout Guides7:50 with Pasan Premaratne
In Interface Builder layout guides are no more than predefined objects we interact with to set up our views but in code we can do much more. In this video let's explore what layout guides have to offer.
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
You need to sign up for Treehouse in order to download course files.Sign up