BT

iOS Auto Layout with Masonry

by Scott McKenzie on Feb 07, 2014 |

Open Source project Masonry aims to make Auto Layout code more concise and readable.

Masonry, “a light-weight layout framework which wraps Auto Layout with a nicer syntax”, enables a XIB- and Storyboard-free experience. Its creator, Jonas Budelmann, argues that while Auto Layout is powerful it quickly becomes verbose and unreadable.

Masonry is a domain specific language (DSL) offering all the capabilities provided by Auto Layout with convenience methods for making and updating constraints, accessing attributes, setting priorities and debug support.

Sample code on GitHub is designed to show typical usage and Masonry’s succinct syntax:

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.edges.equalTo(superview).with.insets(padding);
}];

Central to Auto Layout is the constraint: a mathematical representation of a relationship between UI elements. Constraints comprise size, relative positions managed by priorities and thresholds. They are additive making it possible for constraints to conflict and insufficient constraints lead to ambiguity. Both scenarios can throw exceptions.

Programmatic creation of constraints without using Masonry is possible by creating an NSLayoutConstraint with references to views and specifying attributes and relationships. Apple also provides the Visual Format Language; another DSL for describing relationships in text.

Auto Layout is neither mandatory nor exclusive with “springs and struts” still a valid approach. “Springs and struts”, or autoresizing masks, determines how a view responds when its parent view changes bounds.

Apple provides compelling reasons to adopt Auto Layout:

  • “Springs and struts” requires code to support multiple orientations, different screen sizes and dynamic content.
  • Dynamic Type in iOS 7 allows users to specify a prefered text size in apps.
  • Supporting both iOS 6 and iOS 7 and their different element metrics.

Auto Layout is not without fundamental issues. Apple provides guidance on how to use Auto Layout with the commonly used UIScrollView. Matt Neuburg provides a convincing argument on why “Auto Layout does not play at all well with view transforms” suggesting greater use of layer transforms to compensate.

Any kind of Auto Layout code means you will not gain from the Interface Builder  enhancements made available in Xcode 5. Specifically the ability to visually resolve Auto Layout issues and the preview mode in the assistant editor that lets you view the runtime layout in different orientations, different iOS versions and different device sizes.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT