Masonry use case explanation

If automatic layout saves multi-screen adaptation, the presence of many three-party libraries frees up the system's automatic layout. Masonry is one of them.

On GitHub, Masonry has been 5000+ a star, and the usage is relatively simple and flexible, largely replacing the traditional nslayoutconstraint layout. This article will use several cases to explain the use of masonry.

Masonry:

Https://github.com/SnapKit/Masonry

This demo:

Https://github.com/saitjr/MasonryDemo.git

Environmental information:

Mac OS X 10.10.3

Xcode 6.3

IOS 8.3

Body:

Pre-Preparation:

1. Download the masonry and import it into the project;

2. Import the Masonry.h into the current controller.

Case One: Requirements:

The red view is centered, regardless of the size of the device, including the portrait-to-landscape switch.

Final effect

Realize:

#import "ViewController.h"#import "Masonry.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        // 防止block中的循环引用    __weak typeof(self) weakSelf = self;        // 初始化view并设置背景    UIView *view = [UIView new];    view.backgroundColor = [UIColor redColor];    [self.view addSubview:view];        // 使用mas_makeConstraints添加约束    [view mas_makeConstraints:^(MASConstraintMaker *make) {                // 添加大小约束（make就是要添加约束的控件view）        make.size.mas_equalTo(CGSizeMake(100, 100));        // 添加居中约束（居中方式与self相同）        make.center.equalTo(weakSelf.view);    }];}@end

Case TWO: Requirements:

1. Regardless of the size of the device (including the screen switch), the black view of the left, top margin, the size of the same;

2. The right margin of gray view is unchanged

3. Width, height, top margin black view equal

Final effect

Realize:

#import "ViewController2.h" #import "Masonry.h" @interface ViewController2 () @end @implementation viewcontroller2-(    void) Viewdidload {[Super viewdidload];        Do any additional setup after loading the view.    Initialize Black view UIView *blackview = [UIView new];    Blackview.backgroundcolor = [Uicolor blackcolor];        [Self.view Addsubview:blackview]; Add constraint to Black view [Blackview mas_makeconstraints:^ (Masconstraintmaker *make) {//Add size constraint MAKE.SIZE.M        As_equalto (Cgsizemake (100, 100));    Add left and top margin constraints (both left and upper constraints) Make.left.and.top.mas_equalTo (20);        }];    Initialize Gray view UIView *grayview = [UIView new];    Grayview.backgroundcolor = [Uicolor Lightgraycolor];        [Self.view Addsubview:grayview]; Add constraint to Gray view [Grayview mas_makeconstraints:^ (Masconstraintmaker *make) {//size, top margin constraint same as black view M        Ake.size.and.top.equalTo (Blackview); Add a right margin constraint (the spacing here is directional, the left and top margins are positive, the right and bottom margins are negative) make.right.mas_equalTo (-20); }];} @end

In the above case, the following is involved:

1. in masonry ,And,with has no specific action, just to improve the readability of the program

make.left.and.top.mas_equalTo(20);

Equivalent to

make.left.top.mas_equalTo(20);

2. Equalto and Mas_equalto

If the constraint is a type such as a numeric value or struct, you can use Mas_equalto to wrap it. On this issue, I am not very clear, can look at the official explanation:

Instead of using NSNumber, you can use the primitives and structs to build your constraints. By default, the macros which support autoboxing is prefixed with mas_ . Unprefixed versions is available by defining MAS_SHORTHAND_GLOBALS before importing masonry.

I typically use a constraint of a numeric type with Mas_equalto, and instead of a control, or a constraint on a control, I'm using Equalto, such as:

make.size.mas_equalTo(CGSizeMake(100, 100));make.center.equalTo(weakSelf.view);

Case THREE: Requirements:

1. There are two view, black and gray;

2. Black view of the left, top and right margin are 20, the bottom of the gray view 20, the width of adaptive, height and gray view split the entire interface;

3. The gray view width is half of the black view (that is, the left line starts with a midline), the right and bottom margins are the same as the Black view, and the height is the same as the black view.

Final effect

Realize:

#import "ViewController3.h" #import "Masonry.h" @interface ViewController3 () @end @implementation viewcontroller3-(    void) Viewdidload {[Super viewdidload];        Do any additional setup after loading the view.        __weak typeof (self) weakself = self;    Initialize Black view UIView *blackview = [UIView new];    Blackview.backgroundcolor = [Uicolor blackcolor];        [Self.view Addsubview:blackview]; Add constraint to Black view [Blackview mas_makeconstraints:^ (Masconstraintmaker *make) {//Add left, top margin constraint Make.lef        T.and.top.mas_equalto (20);    Add right Margin constraint make.right.mas_equalTo (-20);        }];    Initialize Gray view UIView *grayview = [UIView new];    Grayview.backgroundcolor = [Uicolor Lightgraycolor];        [Self.view Addsubview:grayview]; Add constraint to Gray view [Grayview mas_makeconstraints:^ (Masconstraintmaker *make) {//Add right, bottom margin constraint Make.bott        Om.and.right.mas_equalTo (-20);       Add height constraints so that the height equals black view make.height.equalTo (Blackview); Add a top margin constraint (top margin = bottom border of black view + offset) make.top.equalTo (blackview.mas_bottom). Offset (20);    Add the left margin (left margin = parent Container longitudinal Axis Center + offset 0) make.left.equalTo (weakSelf.view.mas_centerX). Offset (0); }];}

Case FOUR: Requirements:

When the keyboard is blocking the input box, the input box automatically bounces up to the top of the keyboard.

Realize:

Here you need to use another method mas_updateconstraints to masonry. This method is used to update control constraints.

The specific implementation of the demo can be downloaded to see, this is only posted when the keyboard Popup processing code:

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {        // 获取键盘基本信息（动画时长与键盘高度）    NSDictionary *userInfo = [notification userInfo];    CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];    CGFloat keyboardHeight = CGRectGetHeight(rect);    CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];        // 修改下边距约束    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {                make.bottom.mas_equalTo(-keyboardHeight);    }];        // 更新约束    [UIView animateWithDuration:keyboardDuration animations:^{                [self.view layoutIfNeeded];    }];}

Summarize:

1. You can add left/right/top/bottom/size/height/width/insert constraints to the control;

2. The library provides three methods, mas_makeconstraints add constraints, mas_updateconstraints modify constraints, mas_remakeconstraints to clear previous constraints and add new constraints;

3. You can obtain a constraint on a view by View.mas_bottom;

4. In the constrained block, use make to add a constraint to the current control.

Transferred from: http://www.brighttj.com/ios/ios-masonry-demo.html

Masonry use case explanation