Equal Width Views: Interface Builder

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