IOS-use code to constrain the layout (Masonry), ios-masonry

IOS-use code to constrain the layout (Masonry), ios-masonry

I. Introduction

After learning the Xib and Storyboard of visual programming, LZ feels that the UI control is created and dragged directly. The size adaptation and constraints are added, and the page Jump logic of the Storyboard is clearly visible, it saves a lot of work compared to code layout. However, LZ believes that many people prefer to write a program with pure code (LZ is one, and it is a great sense of accomplishment to write something with code !), So here we will introduce Masonry, a tool for pure code-Constrained Layout, to programmers who love pure code programming.

II. Introduction to Masonry

Masonry Source: https://github.com/SoleMY/Masonry

Masonry is a lightweight layout framework with its own description syntax. It uses a more elegant chained syntax to encapsulate a simple and clear Automatic Layout and is highly readable and supports both iOS and Max OS X.

Attributes supported by Masonry:

/// @ Property (nonatomic, strong, readonly) MASConstraint * left on the left side; // @ property (nonatomic, strong, readonly) MASConstraint * top on the top side; /// @ property (nonatomic, strong, readonly) MASConstraint * right; // bottom @ property (nonatomic, strong, readonly) MASConstraint * bottom; /// header @ property (nonatomic, strong, readonly) MASConstraint * leading; // bottom @ property (nonatomic, strong, readonly) MASConstraint * trailing; /// width @ property (nonatomic, strong, readonly) MASConstraint * width; // height @ property (nonatomic, strong, readonly) MASConstraint * height; /// horizontal midpoint @ property (nonatomic, strong, readonly) MASConstraint * centerX; // portrait midpoint @ property (nonatomic, strong, readonly) MASConstraint * centerY; /// text baseline @ property (nonatomic, strong, readonly) MASConstraint * baseline; // In the source code of Masonry, we can see that their NSLayoutAttribute corresponds to the following-(MASConstraint *) left {return [self addConstraintWithLayoutAttribute: NSLayoutAttributeLeft];}-(MASConstraint *) top {return [self addConstraintWithLayoutAttribute: NSLayoutAttributeTop];}-(MASConstraint *) right {return [self failed: NSLayoutAttributeRight];}-(MASConstraint *) bottom {return [self failed: NSLayoutAttributeBottom];}-(MASConstraint *) leading {return [self addConstraintWithLayoutAttribute: NSLayoutAttributeLeading];}-(MASConstraint *) trailing {return [self failed: Failed];} -(MASConstraint *) width {return [self addConstraintWithLayoutAttribute: NSLayoutAttributeWidth];}-(MASConstraint *) height {return [self attributes: nslayoutattriattributeheight];}-(MASConstraint *) centerX {return [self addConstraintWithLayoutAttribute: Attributes];}-(MASConstraint *) centerY {return [self constraints: Attributes];}-(MASConstraint *) baseline {return [self addConstraintWithLayoutAttribute: NSLayoutAttributeBaseline];}

After iOS8, Masonry has several new attributes:

/// The distance from the border is equivalent to adding the constraint @ property (nonatomic, strong, readonly) MASConstraint * leftMargin; @ property (nonatomic, strong, readonly) after the Constrain to margins of the selected Storyboard) MASConstraint * rightMargin; @ property (nonatomic, strong, readonly) MASConstraint * topMargin; @ property (nonatomic, strong, readonly) MASConstraint * bottomMargin; @ property (nonatomic, strong, readonly) MASConstraint * leadingMargin; @ property (nonatomic, strong, readonly) MASConstraint * trailingMargin; @ property (nonatomic, strong, readonly) MASConstraint * random; @ property (nonatomic, strong, readonly) MASConstraint * centerYWithinMargins;-(MASConstraint *) leftMargin {return [self addConstraintWithLayoutAttribute: Signature];}-(MASConstraint *) rightMargin {return [self accept: Signature];} -(MASConstraint *) topMargin {return [self addConstraintWithLayoutAttribute: Signature];}-(MASConstraint *) bottomMargin {return [self addConstraintWithLayoutAttribute: Signature];}-(MASConstraint *) leadingMargin {return [self addConstraintWithLayoutAttribute: Signature];}-(MASConstraint *) trailingMargin {return [self failed: Signature];}-(MASConstraint *) centerXWithinMargins {return [self failed: NSLayoutAttributeCenterXWithinMargins];}

Iii. Sample Code

# Import "RootViewController. h "// introduce the header file # import" Masonry. h "@ interface RootViewController () @ end @ implementation RootViewController-(void) viewDidLoad {[super viewDidLoad]; // Do any additional setup after loading the view. # pragma mark label // Add constraints. You do not need to set frame UILabel * label = [UILabel new]; label. backgroundColor = [UIColor redColor]; // Add the parent view. The view can be laid out only after it is added. view addSubview: label]; // layout implementation label method [label mas_makeConstraints: ^ (MASConstraintMaker * make) {// 50 from above // make: this is equivalent to the view to be laid out. If the reference view is self. view, you do not need to set reference view attributes // offset (distance value) make. top. similar to (self. view ). offset (50); // make. left. similar to (self. view ). offset (100); // 100 make. right. similar to (self. view ). offset (-100); // make. bottom. similar to (self. view ). offset (-500);}]; # pragma mark label1 UILabel * label1 = [UILabel new]; label1.backgroundColor = [UIColor greenColor]; [self. view addSubview: label1]; // The layout implementation label1 method // reference the first Layout view, otherwise the constraints are easily lost [label1 mas_makeConstraints: ^ (MASConstraintMaker * make) {// custom to (custom view). You need to set the attribute of the view. // if the value is 0, you can leave offset () make. top. similar to (label. mas_bottom ). offset (50); make. leading. similar to (label. mas_leading); make. trailing. similar to (label. mas_trailing); // Height 60 // mas_trailing to (numeric value) make. height. mas_pointer to (60);}]; # pragma mark label2 UILabel * label2 = [UILabel new]; label2.backgroundColor = [UIColor grayColor]; [self. view addSubview: label2]; // you can specify the padding (upper left and lower right) of the Reference view to UIEdgeInsets padding = UIEdgeInsetsMake (400,100,100,100 ); // label2 Method for layout implementation // reference view for layout first; otherwise, constraints may be lost [label2 mas_makeConstraints: ^ (MASConstraintMaker * make) {// you can specify the distance between the constraints and self. make. edges. similar to (self. view ). insets (padding); // make. top. similar to (self. view ). offset (400); // make. left. similar to (self. view ). offset (100); // make. right. similar to (self. view ). offset (-100); // make. bottom. similar to (self. view ). offset (-100);}]; # pragma mark label3 UILabel * label3 = [UILabel new]; label3.backgroundColor = [UIColor orangeColor]; [self. view addSubview: label3]; [label3 mas_makeConstraints: ^ (MASConstraintMaker * make) {// set the central point to make. center. similar to (label2); // set the size // make. width = label2.width-40 // make. heigth = label2.height-60 make. size. similar to (label2 ). sizeOffset (CGSizeMake (-40,-60) ;}] ;}@ end

Here is just a few simple examples ():