BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

iOS Auto Layout with Masonry

| by Scott McKenzie on Feb 07, 2014. Estimated reading time: 1 minute |

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.

Rate this Article

Adoption Stage
Style

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

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and dont miss out on content that matters to you

BT