Comparison of Purelayout and masonry

A year ago I did iOS development, in order to adapt to the automatic layout of a variety of screens, I generally use masonry, and then accidentally in a video tutorial found that the teacher used the Uiview+autolayout (now the author renamed Purelayout) Automatic layout, Discover how Purelayout's automatic layout is more consistent with OC developers ' habits and is easier and more intuitive to use. Since then I have worked on projects or with team-work projects and generally prefer to use purelayout. New to join a team, they are still using masonry, admittedly, in the early days of Apple launch nsautolayoutcontrant, masonry to developers to bring great convenience, but the emergence of purelayout, and further make automatic layout application easier, Readability is also more powerful. I'll compare the two auto-layout frameworks below, and hopefully more and more developers will start using Purelayout.

Masonry: GitHub Address: Https://github.com/SnapKit/Masonry

purelayout: GitHub address:https://github.com/smileyborg/PureLayout

Comparison of Purelayout and masonry

Here I have an example of using purelayout and masonry to automate the layout and compare their use.

Create a single-view blank item and add 4 views inside the viewdidload.

UIView *redview = [[UIView alloc]init];   = [Uicolor redcolor];  [Self.view Addsubview:redview];   *blueview = [[UIView alloc]init];   = [Uicolor bluecolor];  [Self.view Addsubview:blueview];   *yellow = [[UIView alloc]init];   = [Uicolor yellowcolor];  [Self.view Addsubview:yellow];   *green = [[UIView alloc]init];   = [Uicolor greencolor];  [Self.view Addsubview:green];

1. Use masonry to implement automatic layout, to achieve the desired effect code.

- (void) usemasonry{[Self.redview mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.left.equalTo (self.view.mas_left). Offset (0);//make left equal to Self.view left, spacing 0Make.top.equalTo (self.view.mas_top). Offset (0);//make the top and Self.view spacing to 0Make.width.equalTo (self.view.mas_width). Multipliedby (0.5);//set the width to half of Self.view, Multipliedby is the meaning of multiples, that is, to make the width equal to 0.5 times times the width of the Self.viewMake.height.equalTo (self.view.mas_height). Multipliedby (0.5);//set the height to half the height of the Self.view            }]; [Self.blueview mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.width.and.height.equalTo (self.redview);//make the width height equal to RedviewMake.top.equalTo (Self.redView.mas_top);//align with top of RedviewMake.left.equalTo (Self.redView.mas_right);//spacing to Redview is 0    }]; [Self.yellowview mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.leading.equalTo (self.redview);//Align left with redviewMake.top.equalTo (Self.redView.mas_bottom);//with Redview bottom spacing of 0Make.width.and.height.equalTo (Self.redview);//equal to Redview width and height    }]; [Self.greenview mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.left.equalTo (self.yellowView.mas_right);//0 with yellow right spacingMake.top.equalTo (Self.blueView.mas_bottom);//with Blueview bottom spacing of 0Make.width.and.height.equalTo (Self.redview);//width and height with redview    }];}

2. Using Purelayout for automatic layout

- (void) usepurelayout{[Self.redview autoconstrainattribute:alattributeleft toattribute:alattributeleft OfView:    Self.view];    [Self.redview autoconstrainattribute:alattributetop toattribute:alattributetop OfView:self.view]; [Self.redview autoconstrainattribute:alattributewidth toattribute:alattributewidth OfView:self.view withMultiplier :0.5]; [Self.redview autoconstrainattribute:alattributeheight toattribute:alattributeheight OfView:self.view Withmultiplier:0.5];    [Self.blueview autoconstrainattribute:alattributeleft toattribute:alattributeright OfView:self.redView];    [Self.blueview autoconstrainattribute:alattributetop toattribute:alattributetop OfView:self.view]; [Self.blueview autoconstrainattribute:alattributewidth toattribute:alattributewidth OfView:self.redView Withmultiplier:1]; [Self.blueview autoconstrainattribute:alattributeheight toattribute:alattributeheight OfView:self.redView Withmultiplier:1];    [Self.yellowview autoconstrainattribute:alattributetop Toattribute:alattributebottom OfView:self.redView];    [Self.yellowview autoconstrainattribute:alattributeleft toattribute:alattributeleft OfView:self.view]; [Self.yellowview autoconstrainattribute:alattributewidth toattribute:alattributewidth OfView:self.redView Withmultiplier:1]; [Self.yellowview autoconstrainattribute:alattributeheight toattribute:alattributeheight OfView:self.redView Withmultiplier:1];    [Self.greenview autoconstrainattribute:alattributeleft toattribute:alattributeright OfView:self.yellowView];    [Self.greenview autoconstrainattribute:alattributetop Toattribute:alattributebottom OfView:self.blueView]; [Self.greenview autoconstrainattribute:alattributewidth toattribute:alattributewidth OfView:self.redView Withmultiplier:1]; [Self.greenview autoconstrainattribute:alattributeheight toattribute:alattributeheight OfView:self.redView Withmultiplier:1];}

With this example there is an intuitive contrast, Purelayout uses the object-oriented syntax more in accordance with OC, while Masonry draws on the idea of CSS, so it is more like a chain of expression.

The following table compares their pros and cons:

	Masonry	Purelayout
	Heavy-weight, study-cost required	lightweight, grammatical more biased objective-c
add constraint	mas_makeconstraints block module	no Span style= "color: #000000; Font-family:helvetica; " >block
update constraint	mas_updateconstraints guaranteed not to cause two identical constraints	Developer Control
delete constraint	mas_remakeconstraints No for ios 8 use active property	for Span style= "color: #000000; Font-family:helvetica; " >ios 8 use active

echo the first paragraph, the important thing again. Hopefully more and more developers will start using Purelayout. Sample code for this article: Http://pan.baidu.com/s/1geh8XJP

Comparison of Purelayout and masonry