Snapkit/Masonry > AutoLayout in Interface Builder

When writing verbose code is a preferable alternative

AutoLayout via Interface Builder is a powerful tool that allows developers to create layouts that respond to various screen sizes (iPhone vs iPhone6S vs iPad) based on dynamic relationships between objects in the view. During the App Store review process, your app will be subjected to testing on different screen sizes/devices.

AutoLayout is based on the alignment rectangle (often, though not always, equivalent to the frame[see below], which encompasses the whole view rather than the content being aligned), defined by various layout attributes (width, height, top/bottom/left/right edges), center anchors (x,y), baseline(text’s bottom bounds for descenders, i.e. the letter “g”), and leading/trailing (language-specific, dependent on being read left to right or vice versa, respectively).

Generally, one must provide two constraints for each vertical and horizontal aspect (X,Y) using the Pin menu (third from left in Autolayout Constraint menu, affectionally referred to by some as the Tie-Fighter). Some constraints may be inferred (i.e. setting an upper edge bound and a height gives the bottom edge).

AutoLayout Constraint Menu

THE PROBLEM WITH IB CONSTRAINTS

Ambiguity or conflicts occur with sufficient frequency to give most elected officials’ speechwriters a cluster headache, necessitating constant clearing, updating, and/or re-selecting of constraints. The uninitiated may experience nightmares featuring mobs of orange lines(misplaced views) and yellow warning symbols dancing madly about their workstations with miniscule pitchforks and torches. The process feels akin to trying to balance well-waxed bowling balls atop each other. But I digress.

THE SOLUTION

Enter SnapKit (or Masonry for Objective-C), a syntactically clean, chainable constraint framework created by Jonas Budelmann, Nick Tymchenko, and Robert Payne, providing developers with convenience methods that allow for instantiation of multiple constraints simultaneously, which makes for cleaner, friendlier code. Compare the two examples below:

Swift

NSLayoutConstraint method
Snapkit method

Obj-C

NSLayoutConstraint method in obj-c
Masonry method — note that NSNumber is used for declaring constraints at first, but not after

Debugging is also improved, as Snapkit provides the ability to name individual constraints and so provides explicit information about conflicts or ambiguities.

For Swift: https://github.com/SnapKit/SnapKit

For Objective-C: https://github.com/SnapKit/Masonry

Like what you read? Give Michael Singer a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.