How can Swift improve Auto-Layout?
Raise your hand if you use Auto-Layout.
Raise your hand if you do it programmatically.
Raise your hand if you want an easy way to write them.
There are quite a few open sourced projects out there attempting to make it easier to deal with Autolayout. (i.e. Masonry, PureLayout, Cartography)
I am here to show you a Swiftier way by introducing DHConstraintBuilder.
You might be thinking, “Why should I bother looking at yours?”, which is a fair question to ask. DHConstraintBuilder was made to express constraints using the minimum amount of code, but without losing any meaning. It was made to visually show you how the constraints look like and at the same time generate useful constraints.
Suppose you have two views and you want to place default padding between them. Using Autolayout, that distance is usually 8 pixels. Below is an example comparing DHConstraintBuilder with NSLayoutConstraint.
These two examples are functionally equivalent. They make the same constraint. The difference is that NSLayoutConstraint is needlessly verbose, while DHConstraintBuilder is needlessly happy;
I mean, look at that face ^-^
Very Happy.
Because DHConstraintBuilder is based on Constraints with Visual Format, it contains many of the same notations, like the dash “-” which represents the default padding between two views. The two “^” are there to disambiguate it from subtraction. I like to think of the “^” as a hook that attaches to the view.
But wait, most practical examples are longer than that! Another fair point. Suppose I have 3 views that I want to apply constraints to. In the below image I have marked the desired constraints in magenta. All of them use default padding, except for one, which is 15.5
How would this look in code? (The following two examples are functionally equivalent)
Using NSLayoutConstraint:
Using DHConstraintBuilder:
Lets break it down:
// 1
- The greenView and redView have 15.5 pixels between them on the horizontal axis
- The greenView has default padding on the leading constraint to its superview
- The redView has default padding on the trailing constraint to its superview// 2
- The blueView has default padding on the leading constraint to its superview
- The blueView has default padding on the trailing constraint to its superview// 3
- The greenView has default padding on the top constraint to its superview
- The greenView has default distance to blueView on the vertical axis
- The blueView has default padding on the bottom to its superview//4
- The redView had default padding on the top constraint to its superview
- The redview had default distance to blueView on the vertical axis//5
- greenView and redView have equal width//6
- greenview and blueView had equal height
I may be biased, but DHConstraintBuilder sure looks a lot smaller, concise, and easier to read. It eliminates two common errors: forgetting to set translatesAutoResizingMaskIntoConstraints to false and forgetting to add the view to the parent view.
One thing that might stand out is the use of
() |-^^-| ()
Again it is another throwback to Visual Format’s use of
|--|
It goes without saying, but this API is geared toward swift 3. It has to be swift in order to take advantage of overloaded operators.
DHConstraintBuilder is available on GitHub and is ios 8 and up. It is my first Open Sourced project. If you have any suggestions on how I can improve this, please let me know!
P.S. If this article gets over 100 likes, I’ll write a follow up article about DHConstraintBuilder’s humble origins
