In depth understanding of Masonry layout framework for IOS control layout

Foreword:

Recalling the development of iOS in 2013, At that time, handwritten layout code was not used. Instead, it is written in xib file, If the code-only approach is size based on window (320, 480) Calculate a relative position for layout. At that time, size of windows was fixed. With the release of iphone5, size (320,568) of windows also changed, and autoresizingMask was adopted for adaptation. Later, after iphone 6, the width of windows size also changed. I began to abandon autoresizingMask and use autolayout. So learning to use this layout framework is very important to me. It has greatly improved the development efficiency and has a lot of syntax similarities with Android in recent use.

What is Masonry?

Masonry is a lightweight layout framework, with its own description syntax, and adopts a more elegant chain syntax to encapsulate automatic layout, which is concise, clear and highly readable, and supports iOS and Max OS X at the same time.

How to use it?

1.) Introducing header files

I refer to it here in the global reference pch file

#import "Masonry.h"

2.) Basic grammar

Properties provided by Masonry

@ property (nonatomic, strong, readonly) MASConstraint * left; //Left @ property (nonatomic, strong, readonly) MASConstraint * top; //Upper side @ property (nonatomic, strong, readonly) MASConstraint * right; //Right side @ property (nonatomic, strong, readonly) MASConstraint * bottom; //Lower side @ property (nonatomic, strong, readonly) MASConstraint * leading; //Head @ property (nonatomic, strong, readonly) MASConstraint * trailing; //Tail @ property (nonatomic, strong, readonly) MASConstraint * width; //Width @ property (nonatomic, strong, readonly) MASConstraint * height; //Gao @ property (nonatomic, strong, readonly) MASConstraint * centerX; //Horizontal center @ property (nonatomic, strong, readonly) MASConstraint * centerY; //Center vertically @ property (nonatomic, strong, readonly) MASConstraint * baseline; //Text baseline

Masonry provides three functional methods

-(NSArray *) mas_makeConstraints: (void (^) (MASConstraintMaker * make)) block; //Add a constraint -(NSArray *) mas_updateConstraints: (void (^) (MASConstraintMaker * make)) block; //Update constraints -(NSArray *) mas_remakeConstraints: (void (^) (MASConstraintMaker * make)) block; //Knowing all previous constraints, only the most recent constraints are retained

We choose to use different functional methods according to different usage scenarios.

3.) Specific examples

For example, a child view with a distance of 50 from the parent control is added to the parent control

Add constraints

  UIView *tempView=[[UIView alloc]init];
  tempView.backgroundColor=[UIColor greenColor];
  [self.view addSubview:tempView];
  
  [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(50);
    make.right.mas_equalTo(-50);
    make.top.mas_equalTo(50);
    make.bottom.mas_equalTo(-50);
  }];

Equivalent to

  UIView *tempView=[[UIView alloc]init];
  tempView.backgroundColor=[UIColor greenColor];
  [self.view addSubview:tempView];
  
  [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view.mas_left).offset(50);
    make.right.equalTo(self.view.mas_right).offset(-50);
    make.top.equalTo(self.view.mas_top).offset(50);
    make.bottom.equalTo(self.view.mas_bottom).offset(-50);
  }];

It can also be simplified to the following

  UIView *tempView=[[UIView alloc]init];
  tempView.backgroundColor=[UIColor greenColor];
  [self.view addSubview:tempView];
  
  [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(UIEdgeInsetsMake(50, 50, 50, 50));
  }];

Also equivalent to

  UIView *tempView=[[UIView alloc]init];
  tempView.backgroundColor=[UIColor greenColor];
  [self.view addSubview:tempView];
  
  [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
  }];

Update constraint

  [tempView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(50);
    make.right.mas_equalTo(-50);
    make.top.mas_equalTo(100);
    make.bottom.mas_equalTo(-100);
  }];

Clear the previous constraint and keep the latest

  [tempView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(100);
    make.right.mas_equalTo(-100);
    make.top.mas_equalTo(100);
    make.bottom.mas_equalTo(-100);
  }];

Pay special attention to:

The declaration constraint must be called after the view is added to the parent attempt.

4.) mas_equalTo and equalTo

In the above examples, mas_equalTo and equalTo were used to achieve the same effect. When I first started using Masonry, it was easy to confuse them. Today, I specially analyzed their differences. mas_equalTo is an MACRO that compares values, and equalTo compares id types.