This workshop will be retired on May 31, 2020.
Build a Form: Interface Builder9:21 with Pasan Premaratne
In this recipe we're going to build a form that contains a series of labels and text fields. Labels are right aligned and fit the length of the label with the longest text.
In this recipe, we're going to build our form like the one you see here. 0:00 The interesting thing is that the labels are all right-aligned and 0:04 fix the length of the label with the longest text. 0:07 You can start a new single view application template for this project. 0:12 I've just added another story board scene to my existing one. 0:15 In here, we have three labels and three text fields. 0:19 Right now none of these are positioned, so we can start working with them. 0:23 Let me zoom in a bit more, there we go. 0:30 Let's start working with this first label and text field pair. 0:36 By now you should have had some practice adding basic constraints, so 0:41 let's work through these quickly. 0:44 We're going to select the label, and we'll add, or rather, 0:46 select the text field first. 0:49 And we'll add a vertical spacing constraint. 0:51 So from the Pin menu, of 16 points, on the top anchor, on the top edge. 0:54 And that's going to go to the safe area, and then we're going to add a trailing 1:02 space constraint to the trailing edge of the safe area with an 8 point space. 1:06 And we'll add the constraints. 1:10 Notice that when we add these two constraints, 1:12 auto-layout is going to consider this view as correctly sized and positioned. 1:15 This is because a text field which contains content 1:20 has an intrinsic content size and can provide a width and height. 1:23 If we provide any constraints that affect the width of the text field, which we will 1:29 in a second, they will override these implicit constraints defined by 1:32 the intrinsic content size and auto-layout will size the view as we've instructed it. 1:36 Now at the moment, the text field does not have any text, 1:41 which is why you get this very compact view as you see here. 1:43 Okay, next let's also add a horizontal space constraint of 8 points from 1:48 the first name labels leading edge to the safe area, so right here. 1:53 So select that label, pin menu, and this is an 8 point horizontal space constraint. 1:58 We'll also add, between these two views, the label and 2:05 the text field, a horizontal space constraint of 8 points. 2:08 So from the leading edge of the first name text field, which 2:12 we'll give it a name in a second, and to the trailing edge of the first name label. 2:16 So we'll select this right here. 2:21 We'll control drag for now. 2:24 We'll select a horizontal spacing constraint. 2:25 And then I'm going to select the constraint, and 2:28 under constant in the size inspector or in the attributes inspector for 2:30 the constrain directly, we'll set it to 8 points. 2:34 We should have all the constraints we need in the horizontal axis for this label and 2:39 text field pair. 2:43 But the layout is not done all the way. 2:45 That's because the last one we need is for 2:48 the vertical position of the name label, and for that, we'll align the ledge of 2:49 the label with the bottom edge of its text field counterpart. 2:53 So we'll control drag and we'll say bottom. 2:56 Okay, now obviously we're not going to call these labels, so let's change this. 2:59 This is going to be First Name. 3:02 And we'll adjust the size there. 3:05 And for the text field we'll also give it a placeholder, 3:07 enter first name here, or we can just say something like John. 3:10 Now you can't see that here, I don't think, 3:16 because of the way this storyboard looks. 3:20 But I'm going to left align that text. 3:24 And, Okay, so we have our first pair. 3:27 We're going to do the same to all the pairs now. 3:36 And they're again the exact same constraints that we added, 3:39 with one difference. 3:41 So over here we've pinned to the top, and we gave it a 16 point spacing. 3:43 Instead of doing that, we will give it a vertical space constraint 3:47 between each text field with a constant value of 8 points. 3:51 So we'll select the second text field. 3:54 We'll give it a vertical space constraint of 8 points. 3:57 So from the bottom edge of the previous text view, 4:02 to the top edge of the next one, or text field. 4:04 Then we'll also give it a trailing edge from the view to the trailing edge of 4:08 the safe area by 8 points. 4:11 We'll hit add. 4:14 We're going to change this too, we'll give this a text of Last Name. 4:16 And then we're going to do the same thing we did earlier. 4:24 We'll set it over here and we'll give it a horizontal space constraint of 8 points. 4:27 And then 8 points all the way to the safe area's leading edge. 4:33 So we'll do 8 points there, as well. 4:37 And then, we'll align, just like we did earlier, 4:40 the bottom edge of both these views. 4:44 Okay, so now that's fixed. 4:48 Let's work on the last label. 4:49 So we'll put it right there. 4:51 We'll set this here. 4:53 We'll give the text a value of Email. 4:54 No, let's say, Email Address, okay? 4:58 And then, actually, you know what? 5:02 To make this a bit more interesting, let's change this to Email. 5:06 And we'll set this one to Password. 5:09 Now they're all like varying lengths, so we can see how the view adjusts. 5:12 Okay, as you can see, the different text fields are different sizes because 5:17 the labels are different sizes. 5:20 And based on the horizontal constraints we've added, they adjust automatically. 5:22 Okay, so let's give the password label an 8 point spacing here, 5:26 8 point spacing here as well. 5:30 And then this needs an 8 point spacing on the top, 5:34 8 point spacing on the trailing edge. 5:39 And then we're going to align this on the bottom. 5:41 Now, this works, we have a layout but it doesn't look great, right? 5:46 The text fields are all different sizes or different widths and 5:49 it doesn't look like the layout that we want to achieve. 5:53 We can do that though by adding two more constraints. 5:57 So from the first text field to the second, so select the first one, 6:00 we're going to Ctrl + drag and were going to select Equal Width constraints. 6:03 We'll do this again from the second to the third. 6:08 And now, we have the layout that we want. 6:10 So what just happened here? 6:16 This seems unintuitive, but it has to do with content-hugging priorities. 6:17 It's important to understand what happened here and why, so 6:23 we don't expect this behavior automatically. 6:26 If you select any of the text fields an scroll to the bottom in the size 6:29 inspector, you'll notice that their content hugging priority values are 250, 6:33 both in the horizontal and vertical axis, which is the default row value. 6:39 But if you select any of the labels and look at the same, 6:45 you'll see that they have a value of 251, which is 1 point higher. 6:47 This makes all the difference. 6:52 Remember that content hugging is a view fighting the urge to grow, 6:54 with the view fitting snugly around the contend. 6:59 With a given row, between the label and 7:02 a text field, since the label has a higher content hugging priority value, 7:05 auto-layout is not going to stretch the label when deciding on a width. 7:10 The label will be sized to fit its content and 7:15 the text field will then occupy the remaining horizontal space 7:18 after taking any spacing constraints into account. 7:22 So that's the first piece of the puzzle here. 7:26 In each row, auto layout ensures that the label is sized exactly so 7:29 that the content fits and then the text fields at that point are all 7:32 variable width relative to each other because auto-layout stretches them out 7:36 as needed because their content hugging values are lower than the label. 7:40 And that's the situation we were in earlier, right? 7:45 Where we had labels with a bunch of different sizes, 7:47 a bunch of different widths. 7:50 Now the last piece of our puzzle is adding equal width constraints to 7:52 all the text views. 7:56 When we do this, auto-layout needs to decide what width to set all of them to. 7:58 If it chooses the width of the first text field, then we have an issue. 8:03 In the last row, the password label is sized to show all the text. 8:07 And since it has a higher content hugging priority value relative to the text field, 8:11 auto-layout will not shrink it to allow the text field to grow and 8:16 have the same width as the first text field, right? 8:20 The first name text field over here. 8:23 So the only logical solution is for 8:26 auto-layout to find the text field with the lowest width value. 8:28 And then set that as the width of all the text fields. 8:32 This way, it can ensure that they do have equal widths. 8:35 But at the same time, that none of the labels will have their content clipped or 8:38 truncated or stretched. 8:43 By doing this, we've defined the layout where we can ensure that 8:45 all the labels will be sized to the width of the longest label. 8:48 And then to fix this, because this still looks a bit janky, you can select 8:52 all the labels and in the attributes inspector, go ahead and right align it. 8:57 And now, you have a nice-looking form. 9:02 By right aligning these labels, we've also ensured that all the edges are aligned 9:06 where the text field and labels meet despite having labels of variable lengths. 9:10 If you're interested in implementing this layout in code, 9:15 check the note section for a link. 9:18
You need to sign up for Treehouse in order to download course files.Sign up