This workshop will be retired on May 31, 2020.
Differing Height Views: Interface Builder7:27 with Pasan Premaratne
Our goal with this recipe is to build a two column layout. In the first column we have a single view that occupies nearly the entire vertical space available, leaving some room for margins on either side. In the second column we have two views, one of which is 3/4 the height of the first view, and a last view occupying the remaining space with an 8 point margin on all sides.
Our goal with this recipe is to build a two column layout. 0:00 In the first column, 0:04 we have a single view that occupies nearly the entire vertical space available. 0:05 Leaving some room for margins on either side. 0:10 In the second column, we have two views. 0:13 One of which is three quarters the height of the first view, And 0:15 the last view occupying the remaining space. 0:19 All of these having an 8 point margin on all sides. 0:21 So let's add a new storyboard file. 0:26 We'll call this differing height views. 0:31 We'll start with an empty scene, so the view controller scene. 0:38 And in here, we're going to drag out three views. 0:43 So one, we'll arrange that. 0:48 Two. 0:53 And three. 0:57 Okay, let's change the colors so we can see these things. 1:00 First one, we will set it to red or some variation of it. 1:03 The second one, we'll set it to green. 1:07 And the last one to some shade of blue. 1:10 Okay, let's resize them more or less where we want these to end up, so 1:14 that when we use the pin menu, it selects the nearest neighbors. 1:18 There we go. 1:23 Let's start with the first view, and pin it to the left. 1:25 So that's the red view here. 1:29 We'll pin it to the left, top, and 1:30 bottom edges by eight points using the pin menu. 1:34 We'll also uncheck the constraint to margins option. 1:39 At the top there appears to be more than 8 points of space and that's because, 1:45 by default, we're respecting the safe area layout guides here and 1:50 avoiding the potential status bar that appears on the top. 1:54 For the second view, we're not going to give it a vertical space 1:59 constraint to the top edge of the safe area layout guide. 2:01 Instead we're going to align the top edge 2:05 of the green view with the top edge of the red view. 2:07 So, I'm going to Ctrl+drag here and select top. 2:10 The reason for doing this is that I want the spacing between these two views 2:14 to stay constant at 8 points. 2:18 Say if the first view is resized to a different height, 2:21 I'd rather the second view adjust by maybe reducing its height from the top rather 2:24 than from the bottom and increasing the space between the two as a result. 2:29 So we want it pinned to the top, 2:34 pinned to the bottom, maintain some space in between, and then resize accordingly. 2:35 Okay, next from the green view to the blue view, we'll give it 2:40 a vertical spacing constraint which is a bottom space constraint here of 8 points. 2:45 And then to complete the spacing constraints in the vertical direction, 2:51 let's align the bottom edge of the blue view with the bottom edge of the red view. 2:54 Now you can do this by Ctrl+dragging like I just did, or you can select both views. 3:01 So I'll select the blue and the red, and 3:06 then from the align menu you can select bottom edges. 3:08 Now we've provided enough information to determine spacing 3:12 all the way from the top of the second view, to the bottom of the third. 3:15 But the system still doesn't know about any of these heights. 3:19 So we're going to Ctrl+drag from the second view, so the green view, 3:22 to the first. 3:26 And for now we'll select Equal Widths. 3:28 This will immediately change our layout, mess it up, but that's okay. 3:31 To get to the ratio we want, we need to change the multiplier on the constraint. 3:36 So we'll select the green view, go to the size inspector and we'll look for 3:41 that height constraint. 3:45 Actually there was an equal width. 3:47 I need to delete that. 3:48 Ctrl+drag again and select Equal Heights. 3:50 So that immediately puts it at full height, we don't want that. 3:52 So in the size inspector here we have the equal height constraint, 3:56 we're going to edit this. 3:59 And the multiplier field allows us to set a multiplier in different formats. 4:00 So here we can do a decimal value, a ratio, a percentage and even a fraction. 4:05 Let's set ours to three quarters. 4:10 Now when I hit Enter, you'll notice that right now, it says you're equal height but 4:12 when I hit Enter, it'll say proportional height. 4:16 Okay, and that should resolve our vertical constraints. 4:20 So here the red view is the height we want. 4:23 The green view adjusts to three quarters of that height. 4:25 The blue view then fills the remaining space available after accounting for 4:28 that 8 point margin between the two. 4:33 So the blue view isn't exactly a quarter of the height 4:35 because we need to account for that margin. 4:38 We still need to resolve the horizontal constraints. 4:40 We'll keep this simple and we'll set the green view to have the same width, so 4:43 equal width now as the first. 4:47 We'll also set an 8 point horizontal spacing between the two, and 4:50 rather than Ctrl+dragging, I'll actually select the red view and 4:55 add an 8 point right edge or trailing edge constraint. 4:59 And then we're going to add a final 8 point spacing constraint from the green 5:06 view to the root view, or rather the safeAreaLayoutGuide. 5:10 And again, this is easier with the pin menu, so 5:15 let me add a trailing edge constraint here. 5:17 Now the only thing that's left here is the width of the third view. 5:21 And instead of defining horizontal spacing constraints on the leading and 5:24 trailing edges along with an equal width constraint to either of the views, we can 5:28 simply align the leading and trailing edges of the third view with the second, 5:33 ensuring that the width and the position horizontally matches this second view. 5:37 So Ctrl+drag here, and we'll say leading and trailing. 5:41 Okay, and that should be it. 5:49 Now if you edit the height of the first view. 5:51 So we can select it, and we can find that height constraint in here somewhere, 5:53 or what we can do is modify these edge constraints. 5:58 So we'll look for the align top to view here, 6:02 or align bottom, we'll edit. 6:07 And if we manipulate this constant, let's say we make this 200, you'll see that 6:11 the red view's height adjusts but so does everything else, our layout is maintained. 6:15 I'm gonna undo that, or rather just set it back to 8. 6:19 And you'll see that in addition, 6:23 our layout is maintained in all device sizes. 6:27 So it fits here, and in orientations, so it fits here as well. 6:31 Okay, let's go back to regular. 6:38 As with all layouts, there is more than one way to achieve this. 6:41 The important part is the proportional width constraints that we get 6:45 by modifying the multiplier value. 6:49 For other constraints though, 6:51 we could have achieved the same layout in many ways. 6:52 By using spacing constraints instead of aligning edges. 6:55 So that stuff was easy. 6:58 The important part here was this proportional height constraint, 7:00 not width rather. 7:04 So we have a proportional width, proportional height again, and equal width 7:05 constraint here that allows us to maintain a layout relative to the red one. 7:10 As always, 7:16 go with the least amount of constraints you need to get your desired layout. 7:16 Now if you're interested in how to implement this layout in code, 7:21 check the notes section of this video for a link. 7:24
You need to sign up for Treehouse in order to download course files.Sign up