Open Source Library That Makes It Easer To Work With iOS Auto Layout

Featured iPhone Development Resources,Objective-C,Open Source iOS Libraries And Tools

I’ve mentioned a few open source projects for working with auto layout such as RRAutoLayout which brings iOS 6+’s auto layout to iOS 5, and Keep Layout which provides a very concise syntax for working with auto layout.

Here’s another interesting project for working with AutoLayout called Masonry released by Jonas Budelmann.

What’s really nice about Masonry is that it not only provides a more concise syntax, but the syntax is very readable, there’s no macros used, and the library works with compile time error checking.

Here’s an example from the readme showing how you would use the iOS auto layout API to have a view fill its superview inset 10 pixels on each side:

UIView *superview = self;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

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

[superview addConstraints:@[

//view1 constraints
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:padding.top],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:padding.left],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-padding.bottom],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeRight
multiplier:1
constant:-padding.right],

]];

And how you could do the same thing with Masonry:

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

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}]

You can find Masonry on Github here.

A great library for working with AutoLayout.

Be the first to comment…

Related Posts: