Masonry layout Framework for iOS control layouts

Objective:

Recalling the 2013 years of iOS development, it was not in the way of handwritten layout code, but in the Xib file to write, if the use of pure code is based on the window size (320,480) to calculate a relative position to layout, At that time, the size of Windows was fixed, and with the release of Iphone5, the size of Windows (320,568) changed, and the Autoresizingmask approach was adapted to the later iphone 6 windows The width of size also changed, and began to abandon Autoresizingmask to AutoLayout, using AutoLayout for adaptation I was also recently re-engaged in iOS development, the company uses the masonry framework for layout adaptation. So learning to use this layout framework is very important to me, it has greatly improved development efficiency and recently used a lot of grammar and Android has a great similarity.

What is masonry?

Masonry is a lightweight layout framework that has its own description syntax, a more elegant chained syntax that encapsulates auto-layout, is straightforward, and is highly readable, and supports both IOS and Max OS x.

How do I use it? 1.) Introduction of header File

I'm referring to this in the global reference PCH file.

#import "Masonry.h"

2.) Basic syntax

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

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *bottom;//Lower side

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *leading;//Header

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *trailing;//tail

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *width;//width

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *height;//High

• @property (Nonatomic, Strong, ReadOnly) masconstraint *centerx;//Landscape Center

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *centery;//portrait centered

• @property (Nonatomic, Strong, ReadOnly) Masconstraint *baseline;//Text baseline

Masonry provides three function methods

• -(Nsarray *) Mas_makeconstraints: (void (^) (Masconstraintmaker *make)) block; New constraint

• -(Nsarray *) Mas_updateconstraints: (void (^) (Masconstraintmaker *make)) block;//update constraint

• -(Nsarray *) Mas_remakeconstraints: (void (^) (Masconstraintmaker *make) block;//all previous constraints, only the latest constraints are retained

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

3.) Specific examples

For example, a child view that adds a top-down or left-to-right and a parent control to a parent control. 50

Add constraint

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

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); }];

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Equivalent to

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

     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 (+),         make.right.equalto (self.view.mas_right). Offset (-50) ;         make.top.equalto (self.view.mas_top). Offset (;  )       make.bottom.equalto (Self.view.mas_bottom). Offset ( -50);     }]; 

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

It can also be simplified to the following

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

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)); }];

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

is also equivalent to

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

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)); }];

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Update constraint

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

[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); }];

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Purge previous constraints keep up-to-date

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

[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); }];

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Special attention:

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

4.)Mas_equalto and Equalto

The above example used Mas_equalto and equalto to achieve the same effect, I was just beginning to use the masonry when it is easy to confuse them two, today deliberately analyze their differences. Mas_equalto is a macro, the comparison is the value, Equalto comparison is the ID type.

Masonry layout Framework for iOS control layouts