Learn about some great tools for working with Auto Layout in code: UILayoutGuide and NSLayoutAnchor.
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3201-auto-layout/lessons/8
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3201-auto-layout/lessons/8
Jerry I’m absolutely loving this video tutorial that you created, thanks so much for your help. I do have a question in reference to the “container” that we made into a UILayoutGuide. It could be I just missed something you said earlier on or didn’t understand it. I’m a little confused as to why the container(UILayoutGuide) was never given a width or a height. I read elsewhere that this is not necessary to do with UILayoutGuide. Could you enlighten me on that? It kinda goes against everything we’ve learned thus far. I get everything up until this point, but that thought is a bit abstract. Thanks again.
Because UILayoutGuides aren’t rendered (there’s no visible component), it’s not important for them to have a defined x, y, width, and height like it is for views. If you’re using a layout guide to define just the horizontal gap between views, for example, it wouldn’t matter if the height of the guide was zero or infinite since it doesn’t impact the horizontal spacing and isn’t being rendered to the screen. So guides can be used in just one direction without fully defining the other.
However, in this case, the guide does have a width and a height defined by the other views. For example, each text field has an intrinsic height and an constant spacing between them. Then the top and bottom text fields are constrained to the container, so the layout system knows the height of the container from those other views and constraints. In the case of the width, the leading and trailing edges of the container are constrained to the margins of the superview, so that defines the width.
Does that make sense?
Thanks,
Jerry
Yes, that does make perfect sense, I understand now. Thank you. One more question though 
. I successfully finished the challenge. In looking over your code I understand all of it, except for the “firstGap” and “gap” (both UILayoutGuide). I understand the logic of what they are doing completely, as well as how they are attached between the views. What I do not understand is where they are getting their width constraints from. Now I know that you don’t always need certain constraints with UILayoutGuide, but in this case is would seem necessary. In looking at your code I do not see where that is done. The only thing I can figure is that UILayoutGuide automatically giving a standard width constraint in this case. I’m guessing by the time it get’s to the last image that the logic in the function takes over and tells the system what a standard width should be per these UILayoutGuides. If that is not the answer then a brief explanation would be greatly appreciated. I know I’m close to understanding it, just need that last little but of help.
When you’re trying to figure out constraints, it’s usually helpful to review all the constraints in that direction between all the views. In this case, there’s a constraint between the first image and the leading margin, width constraints equal to a constant, a constraint between the last image and the trailing margin, and then the gap layout guides. You’re right, there is no set width for those layout guides, they just fill in the space between the image views. The only constraints are that the gaps all have a width equal to each other (all set equal to the first gap). These constraints all together cause the first image to be on the leading margin, the last image to be on the trailing margin, the images to all have a fixed width, and the space between them to be equal.
Perfect explanation, I get it! Thanks so much for your help. You have a gift for explaining things in a simple, understandable way for sure. Last year I took Harvard CS50 course online. I could have finished it in half the time if their videos were half as good as yours. Thanks so much for the help.
Wow, I’m blushing over here! Thank you for your kind words, I’m so glad this has been helpful for you. As you continue putting this into practice, if you run into any issues or questions, please feel free to ask.
Thanks,
Jerry
I’m so glad somebody asks that UILayoutGuide width question. I was trying so hard to figure it out. The Apple docs on Layout guide do not explain it. Thank you so much for making that so clear now!!
1 Like
Hi Jerry , thank for your nice video, but I have a bit confuse ,can you explain me why when I remove this code “realAgeTextField.bottomAnchor.constraint(equalTo: container.bottomAnchor).isActive = true” , the box is not still in center Y
The point of the container is to be able to center the views together as a group. In order to do that, Auto Layout has to know the height of the container view. When you set the constraint of the last text field to the bottom of the container, it knows to make the container tall enough to align those bottom edges. Without that constraint, it doesn’t know what height you want the container view to be.
1 Like