Auto Layout In Code

Jun 2, 2014

Recently I had to learn how to setup Auto Layout constraints within code. The usual method of setting up Auto Layout is through a storyboard with Interface Builder. Apple has documentation on how to write constraints in code, but I thought they fell short on providing real world examples. I still highly recommend reading the documentation since it does describe what the syntax is for writing these constraints in more detail than this post will.

Setup

There are two very important steps to do before writing constraints.

Set “translatesAutoresizingMaskIntoConstraints” to false on the view you plan on applying constraints to. If you do not set this property on the view, nothing will work properly due to conflicting constraints.

Add the view to your superview before applying the constraints.

Stretch to fill screen

The first example is applying constraints to a table view. When you turn your device, and you support landscape orientation, the expected behavior is for the table view to expand and fill the entire screen. To do this within code, setup two constraints on the superview for the horizontal and vertical alignment. First the horizontal code:

The VisualFormat parameter is what defines the rule. The basic format for a constraint is “Orientation:Secondary View-(Constant)-[Primary View]-(Constant)-Secondary View”.

Orientation: Either “H” or “V” for horizontal and vertical.

Secondary View: The view to the left and right for horizontal constraints, or directly above and below for vertical constraints.

Constant: The actual value for the constraint to follow.

Primary View: The view we want the constraint to apply to.

This format string is essentially saying to keep 0 pixels between the table and the superview on the left and right side.

With the hard part over, there are just a few more parameters.

The options parameter should be set to “NSLayoutFormatAlignmentMask”, since we are defining both left and right constraints.

For this example, metrics does not need to be set.

The last important part of the constraint is the “views” dictionary. This is where you link your format string to actual views. In the format string we declared “table” as a view, so we need to link that to an actual view in our view hierarchy. To create this link we pass a dictionary with a key “table” then pass our actual table as its value.

Once you have setup the horizontal constraint, the vertical constraint is very similar. The main difference is the use of “V” instead of “H”.

The difference here is that we only have the superview pipe character as the last item. This is because we want the view pinned to the bottom of its superview.

Now add the constraints to the superview and run the app. You should have a toolbar that is pinned to the bottom of the view.

Conclusion

While working with Auto Layout in code is not as easy compared to creating them in Interface Builder, it is still very useful to know in case you ever want to create a view in code rather than in a storyboard or nib.