Types Of Constraints
One of my biggest struggles with auto-layout was probably the fact that I didn’t know anything about all the different types of constraints there are. I wasn’t aware about how constraints worked and where they could be placed. This is why I chose this article to focus on the different types of constraints there are.
I want you to not have the same struggles I did and that’s why I’ll show you the most important places to apply constraints to.
Width & Height
First up, there’s the height & width constraint. I think they are pretty self explanatory. What those constraints do, is define the width and height of the view that they’re applied to.
Usually what you’ll use on those constraints is the constant that will set the width or height to a certain value.
Top / Bottom / Left / Right
Next thing on my list of most commonly used attributes that I apply constraints to, are the top, bottom, left and right constraints. Like the name of those constraints would suggest, they effect the top, bottom, left and right borders of the views alignment rectangle.
What’s important to note here is how the multiplier and the constant effect the border. As you probably guessed, applying a constant of 8 to any of the borders, would move them in. So for example if we were to align a view inside of a view – let’s call them superview and view – we could create a margin on the view to the superview by applying a constant of 8 on all the top, bottom, left and right constraints. This would cause the view to be smaller by 16 in the x- and in the y-direction and being centered inside of the superview. The margin would be 8 in this case.
Generally though There are better ways to apply a margin but I chose this concept to make a point. If you want to actually apply a margin to a view, use the margin constraints instead.
Center X / Y
Another important attribute that I use quite often is the center x and y attribute. What they do is also quite self explanatory. They take the center of a view and apply values to it.
As an example, If i wanted to center a view inside a superview, I’d set the center x & y attribute of the view to the center x & y attribute of the superview. This would cause the view to appear centered inside of the superview.
What I’d like you to pay close attention to, is where the view moves if constants are applied. As you might know, the canvas of iOS devices starts out in the top left corner with (0,0) as its starting point. As a result of that, If we apply a constant to a constraint using the center x attribute, the view moves right if the value of the constant is > 0 and left if the value is < 0. On the y axis, the view moves down if the value is > 0 and up if the value is < 0.
See The Auto-Layout Module
Lastly I want to focus your attention on the margin constraints. There are a couple of them, like top, bottom, left and right, but also leading and trailing. Let’s just focus on the top, bottom, left and right. Usually, this is just an attribute you’ll use from the superview.
The margin constraints are basically the same as what margin does in CSS. As a result of that, they’re not as helpful when wanting to adjust the superview. But like in the example before – see the example in „Top, Bottom, Left, Right“ – we could create a similar layout using the margin constraints. Therefore we wouldn’t apply a constant to the top, bottom, left and right of the view, but instead we’ll take a different approach.
Let’s assume all of our margins are set to 8. That would mean that the margin on each of the sides would equal to 8. What we would now do is create a constraint that binds the top of the view to the topMargin of the superview, the same with the bottom and so on. This would create the same layout like the example above, but this time utilizing the margin constraints, so that we can get rid of the constants in our constraints.
While this is not everything that there is to say about places that constraints can be applied to, I want to stop right there. Essentially those are the constraints you’ll be dealing with 80% of the time, just know that there is more.
Just to give you an example to google for: there are the Leading and Trailing attributes. If you’re interested in the rest of the attributes you can use to place constraints to them, I recommend you check out this documentation from Apple. They are explained very well and give you an idea of what else there is that you can do with constraints.
Of course this is also something that I cover inside of the auto-layout module and I go into great detail of how and when to use wich attribute, because the right choice of constraints can make your life a lot easier.
I hope you got some value out of this article. I know for sure that this is something I wish I knew when I started out with auto-layout. This can help make working with constraints in code super easy and it can also help understand how the Interface Builder places constraints. Plus, it makes debugging easier.
See The Auto-Layout Module