In this video, the instructor explains one of the more confusing storyboard settings. Learn about inequalities in Auto Layout for storyboards.
- [Instructor] You might have run into some problems with Autolayout in the Xcode 10 storyboard. It's a lot crankier than previous versions throwing warnings at you for layout that was perfectly legal in Xcode 9. Let's go take a look at how to resolve these errors, and a feature of Autolayout you may not be using. If you've downloaded the example file, you'll find a storyboard where I've set it an image, a label and a view to help visibility of the label over the Popcorn image. I want my label pinned 20 points from the top and 20 points from the left inside the view.
There's two approaches here I can try. The first is to make the label a sub view of the solid blue background. I drag the label on top of the view and you'll see in the outline, it becomes a sub view. Xcode is already complaining that there are no constraints on it. I'll select the popcorn label and pin it 20 from the top and 20 from the leading edge and add those two constraints and there we go.
I got another error though. It says the trailing constraint is missing and that's because I didn't set one since this label will change size as the label's text changes size. Xcode no longer trusts designers and developers. It requires you to put in that trailing constraint, so I can with the right directed control drag from the label to the view. And pick Trailing Space to Container and there we go. That should solve the problem but we got another error.
So, let's explain this one. This fixed constraint removes my variability in the label size. Change the text here from Popcorn to Kettlecorn. Auto layout cuts it off because I can't change the size of the label. Highlight and click on that trailing constraint and pick the Attributes Inspector. And in the Attributes, you'll find a relation that's equal which is our default.
We can also have a constraint that varies either less than or equal or greater than or equal. I'm going to want to expand this label until it is 20 points from the edge of the blue view. Change the constant here to 20 and then change the relation to greater than or equal. This satisfies the constraint. I can even change the label now to Great Cheddar Cheese Kettlecorn and it fits.
Anymore and this constraint here will start cutting things off at the margin. Now, my other option is a label as a view in the main super view. Let's go back to the document outline and I'm going to delete the three constraints I just made and I'm going to move this from the view back in the super view and I do that by dragging it and making sure that the little circle is as far over to the left as possible. And you'll see over in your storyboard that it's now popped down to the center.
I can pin the label again from here but that presents a problem because it pins to the closest views, so it's pinning here, leading to the safe area leading which is fine, that's what we want or we can do the view, either one works here. And the second one here is the problem. It's at view bottom to 20, so it's only going to the bottom here. It takes the first thing it's adjacent to. I can even look at it here, if I do a control drag here, you'll see that it's missing some of the things, for example, top.
I want to align this to the top and it's not there on a control drag. So, how you deal with that is this. I'm going to select that constraint and since it's so hard to constrain it, I'm going to go ahead and hit the constraint itself in the outline and instead of saying the second item is View bottom, I'm going to say it's View top. And that solves that problem. Of course, guess what.
We still have that trailing constraint problem. So, I'm going to do something different this time. I'm going to go ahead and control drag like I did before, hit Horizontal Spacing and I get some weirdness. It doesn't have a constraint problem here. But if you look at the constraints, it's got a weird constraint. The view leading is actually constraining itself to the trailing of the label.
Now I usually like to have my trialing trailing and leading leading. It makes life a lot easier when I'm debugging. So, this works. It makes this particular label against static in size. So, I'm going to change this again to make it a little bit more dynamic, is I'm going to go over here Horizontal Space Constraint and we're going to do the same thing we did before. The view leading is not what I want, I want a view trailing. And that's going to be greater than or equal to 20.
And now we've done that constraint in the way we want. When working on the layout, you may get stuck with one of these new errors or behaviors. Knowing how to get yourself out of them will save you hours of frustration.