This workshop will be retired on May 31, 2020.
Equal Width Views: Interface Builder6:02 with Pasan Premaratne
In this recipe we're going to create two views that occupy equal widths on screen, regardless of device size.
In this recipe we're going to create two views that occupy equal widths on screen 0:01 regardless of device size. 0:05 Here are the desired end results. 0:08 The views are going to fill the superview vertically. 0:10 The views are going to have equal widths on screen. 0:13 And the views will have fixed margins of eight points on all sides. 0:16 In our AutoLayoutCookbook group, you can start a brand new project. 0:21 There's nothing in here that you need. 0:25 We're going to add a new storyboard file here, so New File. 0:28 And we'll select the Storyboard option, hit Next, and 0:32 we'll name this EqualWidthViews. 0:36 For each of the recipes in this workshop series 0:40 we're going to use a different storyboard file to define the layout so 0:43 you can compare and contrast everything at the end. 0:47 We'll add an empty view controller here to start. 0:50 And in this basic scene now we're going to drop two View objects in 0:54 which is all the way at the bottom, or you can type in view to filter. 0:59 So drag one in here and another one. 1:05 Let's also change the background colors to differentiate. 1:09 So for this one I'm going to use some recently used colors. 1:12 We'll give it that red and a blue here. 1:19 So what were our desired end results? 1:23 Fill the superview vertically, occupy equal widths on screen and 1:26 have fixed margins of 8 points on all side. 1:29 Let's start with the margins. 1:32 Select the first view. 1:34 And from the pin menu in the bottom, in the AutoLayout sub menu, 1:35 give it a top leading and 1:40 bottom edge to superview constraint here with constant values of 8 points. 1:44 Now, if I do this now and select this bottom space constraint, 1:49 it's going to pin it to the blue view because this pin menu, 1:52 this model here, simply pins to the nearest available view. 1:56 So let's rearrange this a little bit so that we can ensure it doesn't happen. 1:59 Okay, so now we'll select the pin menu again. 2:06 And we want this to be 8 points, so 8 on the top, 2:09 8 on the leading edge, and 8 on the bottom. 2:12 We won't be constraining to margins here, so let's uncheck this box and 2:18 hit Add Constraints. 2:22 Okay we'll do the same with the second view, except instead of 2:25 a leading constraint, we need to define a trailing to superview constraint. 2:28 So again, at the top 8, trailing is 8, and bottom is 8. 2:33 And then again, uncheck Constrain to margins, and Add the 3 Constraints. 2:39 At this point AutoLayout has the information 2:44 to determine the vertical positioning and size but 2:46 it can not determine how to size these views horizontally. 2:49 Now, it knows that each of these views should be offset from either side 2:53 by 8, at least on this side, but 2:58 we haven't provided enough information about the horizontal orientation. 3:00 So, to start with, I'm going to add a trailing 3:05 constraint here to the red view and again, set a space of 8 points. 3:10 So we now have some basic information but it's not enough. 3:15 It knows here that each of these views should be offset 8 points from all sides 3:18 at least in the horizontal axis. 3:23 But because it has no information about the widths of each view, 3:25 there's no way to currently satisfy this layout. 3:28 The final layout could be anything from a one point wide red view 3:31 with the blue view occupying the rest of the available space to an inverse of that 3:35 with a one point wide blue view. 3:39 To specify that we want these views to be of equal width, 3:42 we're going to Ctrl+drag from the red to the blue view. 3:46 And then from the model that pops up we're going to select 3:50 Equal Widths and that's it. 3:52 The last bit of the puzzle, if you didn't do it already, 3:56 is to give it that horizontal spacing constraint of 8 points between the two 3:58 views which provides all the information we need in the horizontal axis. 4:01 Now, we can do this either from the pin menu, over here, 4:06 like I did earlier in selecting a trailing space constraint on the red view. 4:10 Or to be more direct, we can CTRL+drag from the red to the blue and 4:15 select a Horizontal Spacing constraint. 4:20 Now, when you do that you might have to then find that constraint in the size 4:22 inspector down here, right, so Trailing Space. 4:27 And you might have to edit the constant value. 4:30 Now, in whatever device or orientation you inspect the view, 4:33 the layout is maintained, and you can check this 4:37 by going to the View as: section below in the AutoLayout sub menu. 4:39 And then cycling through different devices to see how it looks on each one, and 4:44 orientations as well. 4:49 You'll see that it's maintained throughout. 4:51 The important thing to note is that there's more than one way to construct 4:54 this layout. 4:58 For example, rather than setting margins on both views individually, 4:59 we could've set the margins on one of them then aligned the edges of the second view 5:03 to the first one. 5:08 So we could've set an 8 point margin to the top of the red view and 5:09 then simply aligned the top edge of the blue view to the top edge of the red view. 5:13 The advantage of this approach, pinning the edges here, 5:18 is that if we wanted to change the margins, say the top one, 5:21 we only have to do that for one view and the second view automatically adjusts. 5:24 Another approach would've involved setting both an equal width and 5:29 equal height constraint along with a center x constraint. 5:33 So you could have said that the blue view should have the same height as 5:37 the red view. 5:41 And then pinned both these views to the center of the screen. 5:42 So take away, there's always more than one way to handle a particular layout. 5:45 But you should go with what is easiest to understand and maintain. 5:50 If you're interested in how to implement this layout in code, 5:55 check the notes section of this video for a link. 5:59
You need to sign up for Treehouse in order to download course files.Sign up