[Original] Masonry third-party constraints for iOS learning, iosmasonry

[Original] Masonry third-party constraints for iOS learning, iosmasonry

1. Masonry Overview

• Currently, the most popular third-party Autolayout framework

Compile Autolayout with elegant code

Saving Apple's official disgusting Autolayout code

Greatly improves development efficiency

• Frame address: https://github.com/SnapKit/Masonry

2. Common Methods

• This method only adds new constraints.

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {}];

• This method will delete all previous constraints and add new constraints.

[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {       }];

• This method will overwrite some previous constraints.

[blueView mas_updateConstraints:^(MASConstraintMaker *make) {       }]; 

3. Constraints

• Size:

Width (width) \ height (height) \ size (size)

// Make. width. mas_constraint to (100); // highly constrained make. height. mas_limit to (100); // size constraint (equivalent to the preceding two statements) make. size. mas_intent to (CGSizeMake (100,100 ));

• Boundary:

Left \ leading (left boundary) \ right \ trailing (right boundary) \ top (top boundary) \ bottom (bottom boundary)

// Make. left. mas_pointer to (self. view ). offset (50); // make on the right (similar to trailing. right. similar to (self. view ). offset (-20); // make. top. similar to (self. view ). offset (20); // make at the bottom. bottom. mas_pointer to (self. view ). offset (-50 );

• Central point:

Center \ centerX \ centerY

// Center (horizontal + vertical) // The size is half of the parent control. [blueView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. size. mas_pointer to (self. view ). multi-pliedby (0.5); make. center. mas_pointer to (self. view); // equivalent to the following two codes // make. centerX. mas_pointer to (self. view); // make. centerY. mas_pointer to (self. view);}];

• Padding to implement boundary constraints:

Edges

// Make. edges. mas_detail to (self. view). insets (UIEdgeInsetsMake (50, 50, 50 ));

4. Differences between mas _ prefix modifier and non-Modifier　　　　

• Mas_similar to and similar

By default:

Mas_equalTo has the automatic packaging function. For example, it automatically packs 20 as @ 20.

Failed to has no automatic packaging function

Mas_similar to is more powerful than> similar to. You can always use mas_similar

• Mas_width and width

By default:

Width is an attribute of the make object. It is used to add width constraints, indicating to constrain the width.

Mas_width is a property value. It is used as a property to indicate the width attribute of a control.

Mas_height, mas_centerX, and so on

• How to eliminate the difference

If the following macro is added, there is no difference between mas_intent to and intent.

# Define MAS_SHORTHAND_GLOBALS // Note: This macro must be added before # import "Masonry. h ".

If the following macro is added, mas_width can also be written as width.

# Define MAS_SHORTHAND

// Define this constant if you want to use Masonry without the 'mas _ 'prefix # define MAS_SHORTHAND // define this constant if you want to enable auto-boxing for default syntax # define Tuning # import "Masonry. h "-(void) viewDidLoad {[super viewDidLoad]; // blue control UIView * blueView = [[UIView alloc] init]; blueView. backgroundColor = [UIColor blueColor]; [self. view addSubview: blueView]; // red control UIView * redView = [[UIView alloc] init]; redView. backgroundColor = [UIColor redColor]; [self. view addSubview: redView]; // Add constraints CGFloat margin = 20; CGFloat height = 50; [blueView makeConstraints: ^ (MASConstraintMaker * make) {make. left. similar to (self. view. left ). offset (margin); make. right. similar to (redView. left ). offset (-margin); make. bottom. similar to (self. view. bottom ). offset (-margin); make. height. fail to (height); make. top. similar to (redView. top); make. bottom. similar to (redView. bottom); make. width. similar to (redView. width) ;}]; [redView makeConstraints: ^ (MASConstraintMaker * make) {make. right. similar to (self. view. right ). offset (-margin);}];}

5. Optional usage

The following methods are only available to improve readability.

• With

- (MASConstraint*)with {    return self;}   

Sample Code of Usage

// Size limit: 100x100 // position: Stick to the bottom right corner of the parent control, and the spacing is 20 [blueView mas_makeConstraints: ^ (MASConstraintMaker * make) {// width constraint make. width. similar to (@ 100); // highly constrained make. height. similar to (@ 100); // make. right. similar to (self. view. mas_right ). with. offset (-20); // make. top. similar to (self. view. mas_top ). with. offset (20) ;}];

• And

- (MASConstraint*)and {    return self;}

Sample Code of Usage

// Size limit: 100x100 // position: Stick to the bottom right corner of the parent control, and the spacing is 20 [blueView mas_makeConstraints: ^ (MASConstraintMaker * make) {// width and height constraints make. width. and. height. mas_defaults to (100); // make. right. similar to (self. view ). offset (-20); // make. top. similar to (self. view ). offset (20) ;}];