Creating Valid Sets Of Constraints

Creating Valid Sets Of Constraints

Constraints can be confusing at times. Especially when the Interface Builder tells you that you’re doing something wrong and you can’t really tell what it is. Sometimes there is a constraint missing, sometimes there are too many constraints that can’t all work at the same time.

Identifying what the problems with our sets of constraints are is a vital part of making auto-layout work in your favor. To be able to do that however, you need to learn what makes up a valid set of constraints and what types of errors there are.

Parameters that need to be specified

First up on the list of „Things you need to know when debugging your constraints“ is, what information needs to be provided to the auto-layout system so that it can solve your layout properly.

I was always asking myself: „How many constraints does a valid set need? Which Information is necessary?“ Because every time i tried to create constraints, I was struggling to make them work. most of the time the layout just couldn’t be solved.

In order to solve this issue, you just need to know all the „parameters“ of a view need to be defined so that the layout can be solved. Let’s look at this through an analogy.

Imagine you’re back in school. Your teacher asks you to draw a rectangle onto a piece of paper. Now you could start and just draw any rectangle anywhere on the page. That would be one option. The Rectangle could be big, small, high, wide etc. Also it could be positioned anywhere on the page. Top left corner, bottom left corner, etc.

The places and sizes of the rectangle – the parameters – would be random. Now computers don’t do well with random. And most of the time we wouldn’t even like them to be random. That’s why all of the parameters need to be set to work. All of them.

So the parameters are:

  • width
  • height
  • x-position
  • y-position

That’s it. You don’t need more then a set width, height and position on the canvas. Once all the information is available to the auto-layout system, the layout can be solved.

 

See The Auto-Layout Module

Valid Permutations

But that doesn’t mean that you always need to set the width and height constraint of a view to make it work. This is where it can get confusing. That’s because you can set these parameters through different methods. I’t go through a couple of example cases to illustrate it better.

Centered Square

Let’s say you want a square centered on your canvas. (Admittedly this is not a very creative layout, but it serves a good purpose so I’ll just run with it.) You can use the width and height constraint and set them both to the same value. This would create a square. Now we only need to specify the center-x and center-y constraints to match with the center-x and center-y constraints of the superview and we’re done.

This layout matches all the criteria to be valid. The width, height, x- and y-position are all set and therefore the layout can be solved. But this is only one possible example.

Shrinking A Rectangle

Another example would be this: Again we have a view inside of a superview. We could now bind the left edge of the view to the left margin of the superview. Then bind the right edge of the view to the right margin of the superview, and the same with the bottom and the top. This would leave us with a view nested inside a superview with just a little border between the two views.

Let’s check if this would work. Is the width set? Well, yes it is. If we know the size of our superview, the width can easily be calculated. the width is the size of the (superview – margin on the left) – margin on the right. The same with the height. Now more interestingly, is the x- and y-position set? Again, the answer is yes. Both are set, due to the fact that the edges of the view are bound to the margin of the superview. There is only one possible solution to this layout.

See how this works? There are multiple ways to go about this. For example you could bind a left and right edge of a view to a superview and have the width and x-position set, and specify the height and y-position using the height and y-position constraints.

There are many permutations of this and as you can imagine this can get confusing at times. The only thing I’d recommend you remember is that all the parameters need to be set in order to have a valid set of constraints.

 

See The Auto-Layout Module

0