IOS Study Notes 36-Automatic Masonry Layout

IOS Study Notes 36-Automatic Masonry Layout
1. Introduction to Masonry

Previously we learned in the screen adaptation chapterAutoLayoutBut it is done by adding constraints on the visual interface. We often need to use them in the code.AutoLayoutConstraints, Apple also provides us with the implementation, useNSLayoutConstraintClass indicates a constraint, but it is complicated to use and has a large amount of Code. For example, to create a constraint:

+ (Id) constraintWithItem :( id) view1/* A UIView */attribute :( NSLayoutAttribute) attribute1/* attribute */relatedBy :( NSLayoutRelation) relation/* Relationship */toItem :( id) view2/* Another UIView */attribute :( NSLayoutAttribute) attribute2/* attribute */multiplier :( CGFloat) multiplier/* multiple */constant :( CGFloat) constant;/* offset */

If there are more constraints, the more calls the method, the longer the code.
In fact, we can use a third-party framework.MasonryIs a lightweight layout framework that encapsulatesAutoLayoutHas its own description syntax, adopts more elegant chain syntax, is concise and clear, and has a high readability.

MasonryBasic Support AutoLayoutAll attributes:

@property(nonatomic,strong,readonly)MASConstraint*left;@property(nonatomic,strong,readonly)MASConstraint*top;@property(nonatomic,strong,readonly)MASConstraint*right;@property(nonatomic,strong,readonly)MASConstraint*bottom;@property(nonatomic,strong,readonly)MASConstraint*leading;@property(nonatomic,strong,readonly)MASConstraint*trailing;@property(nonatomic,strong,readonly)MASConstraint*width;@property(nonatomic,strong,readonly)MASConstraint*height;@property(nonatomic,strong,readonly)MASConstraint*centerX;@property(nonatomic,strong,readonly)MASConstraint*centerY;@property(nonatomic,strong,readonly)MASConstraint*baseline;

These attributes and NSLayoutAttrubuteThe table is as follows:

Ii. Use Masonry

MasonryMost of the methods areUIViewImplemented classification so that we can use it very easily.

The following describes how to add constraints to Masonry:

/* Add a new constraint. Only the new constraint is added. There cannot be two constraints for the same object at the same time. Otherwise, an error is reported */-(NSArray *) mas_makeConstraints :( void (^) (MASConstraintMaker * make) block;/* update the original constraints and update the constraints in the block based on the above conditions, there will be no two conditions with the same constraints */-(NSArray *) mas_updateConstraints :( void (^) (MASConstraintMaker * make) block;/* Delete the constraints and add the constraints again, all previous constraints will be cleared, and only the latest constraints will be retained */-(NSArray *) mas_remakeConstraints :( void (^) (MASConstraintMaker * make) block;

The above three methods are not only UIViewYes. UIViewOf NSArrayAn array can also be called to traverse all UIViewCall

The following is a common constraint syntax used in Block. [attribute] indicates an attribute and [value] indicates a value:

/* Attribute attributes can be used together, such as top. right. bottom. the effect of adding the mas _ prefix to left is similar to that without the mas _ prefix, but the parameter is boxed when the mas _ prefix is added. When the parameter has a struct, the mas _ prefix must be used, parameters without the mas _ prefix must be numerical constraints of the object * // *. top corresponds to NSInteger, center corresponds to NSPoint, and size corresponds to NSSize */make. [attribute]. mas_similar to ([value]);/* is equal to the constraint. Compare the two views. Note: no other. edges attribute. edges corresponds to otherView */make. [attribute]. similar to (otherView. [attribute]);/* greater than or equal to the constraint, comparison between two views */make. [attribute]. greaterthanorpointer to (otherView. [attribute]);/* less than or equal to the constraint, comparison between two views */make. [attribute]. lessThanOrEqualTo (otherView. [attribute]);/* offset constraint */make. [attribute]. similar to (otherView. [attribute]). offset ([value]);/* boundary constraint, top, bottom, left, and right boundary */make. edges. similar to (otherView ). insets (UIEdgeInsetsMake ([topValue], [leftValue], [bottomValue], [rightValue]);/* Margin constraint */make. [attribute]. similar to (otherView. [attribute] Margin );

Note:

Before adding constraintsUIViewAdd to parent view, otherwise it will flash back

We can understand the following through several instances: 1. instance 1 [basic]: A view is displayed in the center.

-(Void) viewDidLoad {[super viewDidLoad]; UIView * sv = [[UIView alloc] init]; sv. backgroundColor = [UIColor blackColor]; // you must add the view to the superView first. Otherwise, [self. view addSubview: sv]; // Add constraint _ weak ViewController * weakSelf = self in autolayout of Masonry; [sv mas_makeConstraints: ^ (MASConstraintMaker * make) {make. center. similar to (weakSelf. view); // center the sv to make. size. mas_equalTo (CGSizeMake (300,300); // set the sv size to (300,300)}];}

2. Example 2 [elementary]: Make a view slightly smaller than its superView (with a margin of 10)

UIView * sv = [[UIView alloc] init]; sv. backgroundColor = [UIColor blackColor]; // you must add the view to the superView first. Otherwise, [self. view addSubview: sv]; // Add constraint _ weak ViewController * weakSelf = self in autolayout of Masonry; [sv mas_makeConstraints: ^ (MASConstraintMaker * make) {make. center. similar to (weakSelf. view); // center the sv to make. size. mas_zhuto (CGSizeMake (300,300); // set the sv size to (300,300)}]; UIView * sv1 = [[UIView alloc] init]; sv1.backgroundColor = [UIColor redColor]; // you must add the view to the superView first; otherwise, an error occurs. [sv addSubview: sv1]; // Add the constraint [sv1 mas_makeConstraints: ^ (MASConstraintMaker * make) {make. edges. copying to (sv ). with. insets (UIEdgeInsetsMake (10, 10, 10, 10);/* is equivalent to make. top. copying to (sv ). with. offset (10); make. left. copying to (sv ). with. offset (10); make. bottom. copying to (sv ). with. offset (-10); make. right. copying to (sv ). with. offset (-10); * // * is also equivalent to make. top. left. bottom. and. right. copying to (sv ). with. insets (UIEdgeInsetsMake (10, 10, 10); */}];

In fact, the and with methods do nothing:

-(MASConstraint*)with{    returnself;}-(MASConstraint*)and{    return self;}

3. instance 3 [primary]: align two views with a height of 150 vertically and arrange them in an equal-width and equal-interval manner. The interval is 10 (the width is automatically calculated)

UIView * sv = [[UIView alloc] init]; sv. backgroundColor = [UIColor blackColor]; // you must add the view to the superView first. Otherwise, [self. view addSubview: sv]; // Add constraint _ weak ViewController * weakSelf = self in autolayout of Masonry; [sv mas_makeConstraints: ^ (MASConstraintMaker * make) {make. center. similar to (weakSelf. view); // center the sv to make. size. mas_intent to (CGSizeMake (300,300); // set the sv size to (300,300)}]; int padding1 = 10; UIView * leftView = [[UIView alloc] init]; leftView. backgroundColor = [UIColor orangeColor]; [sv addSubview: leftView]; UIView * rightView = [[UIView alloc] init]; rightView. backgroundColor = [UIColor orangeColor]; [sv addSubview: rightView]; // Add constraints to autolayout of Masonry [leftView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. centerY. mas_0000to (sv. mas_centerY); // make. left. copying to (sv. mas_left ). with. offset (padding1); // left margin 10 make from sv. right. failed to (rightView. mas_left ). with. offset (-padding1); // The Left Border between the right side and the right side of the rightView-10 make. height. mas_defaults to (@ 150); // The height is 150 make. width. similar to (rightView); // The width is equal to rightView}]; [rightView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. centerY. mas_0000to (sv. mas_centerY); // make. left. failed to (leftView. mas_right ). with. offset (padding1); // The left side is 10 make from the right boundary of leftView. right. copying to (sv. mas_right ). with. offset (-padding1); // The right margin of the sv to the right-10 make. height. mas_defaults to (@ 150); // The height is 150 make. width. similar to (leftView); // The width is equal to leftView}];

4. instance 4 [intermediate]: arrange some views in UIScrollView order and automatically calculate contentSize

UIView * sv = [[UIView alloc] init]; sv. backgroundColor = [UIColor blackColor]; // you must add the view to the superView first. Otherwise, [self. view addSubview: sv]; // Add constraint _ weak ViewController * weakSelf = self in autolayout of Masonry; [sv mas_makeConstraints: ^ (MASConstraintMaker * make) {make. center. similar to (weakSelf. view); // center the sv to make. size. mas_crollto (CGSizeMake (300,300); // set the sv size to (300,300)}];/* Create ScrollView */UIScrollView * scrollView = [[UIScrollView alloc] init]; scrollView. backgroundColor = [UIColor whiteColor]; [sv addSubView: scrollView]; [scrollView mas_makeConstraints: ^ (MASConstraintMaker * make) {// set the boundary constraint make. edges. copying to (sv ). with. insets (UIEdgeInsetsMake (5, 5, 5) ;}]; // create a ScrollView sub-view container view UIView * container = [[UIView alloc] init]; [scrollView addSubView: container]; // Add the container constraint [container mas_makeConstraints: ^ (MASConstraintMaker * make) {make. edges. rollback to (scrollView); // the boundary is close to the ScrollView boundary make. width. similar to (scrollView); // The width is equal to that of ScrollView}]; // Add multiple Viewint count = 10 to the container; UIView * lastView = nil; for (int I = 1; I <= count; ++ I) {// create a View UIView * subView = [[UIView alloc] init]; [container addSubView: subView]; // random color subView. backgroundColor = [UIColor colorWithRed :( arc4random () % 256/256 .0) green :( arc4random () % 256/256 .0) blue :( arc4random () % 256/256 .0) alpha: 1]; // Add constraints to subView [subView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. left. and. right. pointer to (container); // The left and right boundary and container are closely connected to make. height. mas_increment to (@ (20 * I); // The height increases with I // determine whether there is a previous View if (lastView) {// if there is a previous View, the upper boundary is close to the lower boundary of the previous View. top. mas_pointer to (lastView. mas_bottom);} else {// if there is no previous View, the upper boundary is close to the lower boundary of the container. top. mas_pointer to (container. mas_top) ;}}]; // Save the previous View lastView = subView;} // Add the last constraint of container [container mas_makeConstraints: ^ (MASConstraintMaker * make) {// The lower boundary of the container and the lower boundary of the last View are closely related to make. bottom. similar to (lastView. mas_bottom);}];

Iii. Masonry advanced Masonry implements two special classification methods for NSArray:

/* This method can be called only the NSArray array containing the UIView. The UIView in NSArray must have a common spuerView. This method is used to set the horizontal equi-width distance between uiviews, or vertical and high-distance constraints. Determine the spacing, width, or height first, but the axisType is equal only to MASAxisTypeHorizontal (horizontal spacing type) and MASAxisTypeVertical (Vertical spacing type) fixedSpacing is the spacing between two uiviews. leadSpacing is the spacing between the first UIView and the left (or top) boundary of the superView. tailSpacing is the last UIView and the right (or bottom) of the superView) the horizontal width or vertical height of all uiviews in the array is equal */-(void) mas_distributeViewsAlongAxis :( MASAxisType) axisType withFixedSpacing :( CGFloat) fixedSpacing leadSpacing :( CGFloat) leadSpacing tailSpacing :( CGFloat) tailSpacing; /* This method can be called only the NSArray array containing the UIView. The UIView in NSArray must have a common spuerView. This method is used to constrain the horizontal width and distance between uiviews, or vertical fixed Distance constraint. Determine the width or height first, and the spacing is uncertain, but equal axisType only has MASAxisTypeHorizontal (horizontal spacing type) and MASAxisTypeVertical (Vertical spacing type) fixedSpacing is the spacing between two uiviews. leadSpacing is the spacing between the first UIView and the left (or top) boundary of the superView. tailSpacing is the last UIView and the right (or bottom) of the superView) the spacing of all uiviews in the array of the boundary is equal */-(void) margin :( MASAxisType) axisType margin :( CGFloat) fixedItemLength leadSpacing :( CGFloat) leadSpacing tailSpacing :( CGFloat) tailSpacing;

The following example shows how to use the Equi-spacing method:

/* Set the horizontal equi-width distance to 20 from the UIView, the first UIView is 6 to the left of the superView, the last UIView is 7 to the right of the superView, And the UIView height is 60, 40 */[array leading: MASAxisTypeHorizontal withFixedSpacing: 20 leadSpacing: 6 tailSpacing: 7]; [array mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (@ 40); make. height. similar to (@ 60);}];

/* Set the horizontal fixed width to 20 for all uiviews, 6 for the first UIView to the left of the superView, 7 for the last UIView, and 60 for the UIView, 40 */[array ready: MASAxisTypeHorizontal withFixedItemLength: 20 leadSpacing: 6 tailSpacing: 7]; [array mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (@ 40); make. height. similar to (@ 60);}];