Automatic Masonry layout and Masonry Layout

Automatic Masonry layout and Masonry Layout

Masonry is a lightweight layout framework that uses better syntax to encapsulate automatic layout. It has its own layout DSL. It is concise, clear, highly readable, and supports both iOS and Max OS X.

Download

Disadvantages of NSLayoutConstraints

NSLayoutConstraints is a powerful and Flexible Automatic Layout architecture, but the constraint created by code is very redundant. Below we use a piece of code to implement a parent view that you want to overwrite it. But the margin is 10.

　

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], ]];

 

Even if the Code required for a simple example is quite lengthy, it becomes unreadable when you have more than 2 or 3 views. Another option is to use a visual format language (VFL ), not too long. However, the ASCII type syntax has its own trap and it is difficult to return an array as NSLayoutConstraint constraintsWithVisualFormat: adding an animation effect.

Advantages of Masonry

The following describes how to use MASConstraintMaker to create the same constraint.

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

[Self. subview mas_makeConstraints: ^ (MASConstraintMaker * make ){

Make. top. Align to (self. view. mas_top). with. offset (padding. top );

Make. left. Align to (self. view. mas_left). with. offset (padding. left );

Make. bottom. reflect to (self. view. mas_bottom). with. offset (-padding. bottom );

Make. right. Align to (self. view. mas_right). with. offset (-padding. right );

}];

 

Shorter code implementation

 [self.subview mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(self.view).with.insets(padding);    }];

 

In addition, note that [superview addConstraints:...] is called when NSLayoutConstraints is used. method. constraints are automatically added to the current view in the Masonry library. You can also use self. subview. translatesAutoresizingMaskIntoConstraints = NO.

 

Not all creations are the same

. Similar to is equivalent to NSLayoutRelationEqual

. Lessthanorequto is equivalent to NSLayoutRelationLessThanOrEqual

. Greaterthanorequto is equivalent to NSLayoutRelationGreaterThanOrEqual

These three equality constraints can be any of the following operations as a parameter

1. MASViewAttribute

MASViewAttribute	NSLayoutAttribute
View. mas_left	NSLayoutAttributeLeft
View. mas_right	NSLayoutAttributeRight
View. mas_top	NSLayoutAttributeTop
View. mas_bottom	NSLayoutAttributeBottom
View. mas_leading	NSLayoutAttributeLeading
View. mas_trailing	NSLayoutAttributeTrailing
View. mas_width	NSLayoutAttributeWidth
View. mas_height	NSLayoutAttributeHeight
View. mas_centerX	NSLayoutAttributeCenterX
View. mas_centerY	NSLayoutAttributeCenterY
View. mas_baseline	NSLayoutAttributeBaseline

 

 

 

 

 

 

 

 

2. UIView/NSView

If you want view. left to be greater than or equal to label. left

Make. left. greaterthanorpointer to (label );
Make. left. greaterthanorpointer to (label. mas_left );

3. NSNumber

The automatic layout allows you to set the width and height to a constant value. If you want to set the view with the minimum value and the maximum width, you can

//width >= 200 && width <= 400make.width.greaterThanOrEqualTo(@200);make.width.lessThanOrEqualTo(@400)

However, automatic layout does not allow alignment attributes such as left and right alignment, and centerY to be set as constant values.

//creates view.left = view.superview.left + 10make.left.lessThanOrEqualTo(@10)

 

make.top.mas_equalTo(42);make.height.mas_equalTo(20);make.size.mas_equalTo(CGSizeMake(50, 100));make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

 

You can use the element and structure to create your constraint instead of NSNumber. By default, macros that support automatic packing are prefixed with mas. Versions without a prefix can be defined by MAS_SHORTHAND_GLOBALS before import.

4. NSArray

make.height.equalTo(@[view1.mas_height, view2.mas_height]);make.height.equalTo(@[view1, view2]);make.left.equalTo(@[view1, @100, view3.right]);

　　

Priority Principle

. Priority allows you to specify the priority

. PriorityHigh is equivalent to UILayoutPriorityDefaultHigh high priority.

. PriorityMedium medium priority

. PriorityLow is equivalent to UILayoutPriorityDefaultLow

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();make.top.equalTo(label.mas_top).with.priority(600);

 

Composition

Masonry also provides several convenient methods to create multiple constraints at the same time, known as MASCompositeConstraints.

Edges

// make top, left, bottom, right equal view2make.edges.equalTo(view2);// make top = superview.top + 5, left = superview.left + 10,// bottom = superview.bottom - 15, right = superview.right - 20make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

 

Center

// make centerX and centerY = button1make.center.equalTo(button1)// make centerX = superview.centerX - 5, centerY = superview.centerY + 10make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

// All edges but the top should equal those of the superviewmake.left.right.and.bottom.equalTo(superview);make.top.equalTo(otherView);