Masonry-01-autolayout Framework Simple Replication Introduction

First, before we formally use masonry, let's take a look at how we use AutoLayout in Xib.

as we can see, as long as the corresponding limitations are set, controlling the relationship between the parent and child views should be OK to drag out the requirements you need. Here is not a detailed explanation of the specific drag-and-drop method ..... Then we press the properties to see how simple it is to use masonry here is masonry give us the property @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;//Wide@property (nonatomic, Strong,ReadOnly) Masconstraint *height;//High@property (nonatomic, Strong,ReadOnly) Masconstraint *centerx;//Center Horizontally@property (nonatomic, Strong,ReadOnly) Masconstraint *centery;//Center Vertically@property (nonatomic, Strong,ReadOnly) Masconstraint *baseline;//Text Baselinesproperty has, and then how do we add a constraint to the view, masonry provides us with 3 ways//new Constraint-(Nsarray *) Mas_makeconstraints: (void(^) (Masconstraintmaker *Make )) Block;//Update constraint-(Nsarray *) Mas_updateconstraints: (void(^) (Masconstraintmaker *Make )) Block;//Clear all previous constraints and only keep the latest constraints-(Nsarray *) Mas_remakeconstraints: (void(^) (Masconstraintmaker *Make ))  Block Reasonable use of this 3 function, basically can deal with any situation the preparation has been completed, we look at a few small demo1. Center a View//prevent circular references in block__weaktypeof(self) weakself =Self ; //Initializes a viewUIView *bgview =[[UIView alloc]init]; Bgview.backgroundcolor=[Uicolor Redcolor];    [Self.view Addsubview:bgview]; //adding a constraint using mas_makeconstraints[Bgview mas_makeconstraints:^ (Masconstraintmaker *Make )        {Make.center.equalTo (Weakself.view); Make.size.mas_equalTo (Cgsizemake ( $, $)); }];1 is not very simple, here is a bit to be aware that you must add a constraint before you add the view to the views. Well, if I don't want to fix him up, let the size of the view control how we do it based on the spacing. We set a View[bgview mas_makeconstraints based on the parent view spacing of 10:^ (Masconstraintmaker *Make )        {Make.center.equalTo (Weakself.view); Make.edges.mas_offset (Uiedgeinsetsmake (Ten,Ten,Ten,Ten)); }]; so it's OK!!! Make.edges.mas_offset (Uiedgeinsetsmake (Ten,Ten,Ten,Ten) , equivalent to Make.top.equalTo (Weakself.view). With.offset (Ten); Make.left.equalTo (Weakself.view). With.offset (Ten); Make.bottom.equalTo (Weakself.view). With.offset (-Ten); Make.right.equalTo (Weakself.view). With.offset (-Ten);2multiple View2 View is centered horizontally, the second view distance is the first view spacing of ten UIView*view1 =[[UIButton alloc]init]; View1.backgroundcolor=[Uicolor Redcolor];    [Self.view Addsubview:view1]; [View1 mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.size.mas_equalTo (Cgsizemake ( -, -));        Make.centerX.equalTo (Weakself.view); Make.top.width.offset ( -);        }]; UIView*view2 =[[UILabel alloc]init]; View2.backgroundcolor=[Uicolor Yellowcolor];    [Self.view Addsubview:view2]; [View2 mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.size.mas_equalTo (Cgsizemake ( -, -));        Make.centerX.equalTo (View1); Make.top.equalTo (View1.mas_bottom). With.offset ( -); }];2 have you seen the second view code in Make.top.equalTo (View1.mas_bottom). With.offset ( -); What does View1.mas_bottom mean? If only write View1,masonry will default to View1 in the top start, that is, view2 spacing view1 y-axis start 20 spacing through this also can be very convenient to set the view and another view between the left and right of the gap between the two may wish to try View.mas_ Top View.mas_left View.mas_right The effect is what to get below I enclose a full interface demo, we can look at the 3 code as follows:- (void) setupframe {__weaktypeof(self) weakself =Self ; //Upload AvatarUIButton *iconbtn =[[UIButton alloc]init]; [Iconbtn Setcornerradius: $]; [Iconbtn setbackgroundimage:[uiimage imagenamed:@"Huantouxiang"] Forstate:uicontrolstatenormal];    [Iconbtn addtarget:self Action: @selector (Iconbutton) Forcontrolevents:uicontroleventtouchdown];    [Self.view ADDSUBVIEW:ICONBTN]; SELF.ICONBTN=iconbtn; [Self.iconbtn mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.size.mas_equalTo (Cgsizemake ( -, -));        Make.centerX.equalTo (Weakself.view); Make.top.width.offset ( -);        }]; //Upload Community Avatar text AlertsUILabel *iconlabel =[[UILabel alloc]init]; Iconlabel.textcolor=C3; Iconlabel.text=@"Upload a corporate avatar"; Iconlabel.font= [Uifont systemfontofsize: the];        [Self.view Addsubview:iconlabel]; [IconLabel mas_makeconstraints:^ (Masconstraintmaker *Make )        {Make.centerX.equalTo (ICONBTN); Make.top.equalTo (Iconbtn.mas_bottom). With.offset ( -);        }]; //Community Edit IconUiimageview *editicon =[[Uiimageview alloc]init]; Editicon.image= [UIImage imagenamed:@"Bianxie"];        [Self.view Addsubview:editicon]; [Editicon mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.size.mas_equalTo (Cgsizemake ( -, -)); Make.left.equalTo (Weakself.view). With.offset (Ten); Make.top.equalTo (Iconlabel.mas_bottom). With.offset ( -);        }]; //Community NameUitextfield *nametext =[[Uitextfield alloc]init]; Nametext.placeholder=@"please fill in the Community name (maximum 6 characters)";    [Self.view Addsubview:nametext]; Self.nametext=Nametext; [Nametext mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.height.mas_equalTo (@ -);        Make.centerY.equalTo (Editicon); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.left.equalTo (editicon.mas_right). With.offset (5);        }]; //Split LineUiimageview *xian =[[Uiimageview alloc]init]; Xian.backgroundcolor= Dbcolor (226,226,226);        [Self.view Addsubview:xian]; [Xian mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.height.mas_equalTo (@1); Make.left.equalTo (Weakself.view). With.offset (Ten); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.top.equalTo (Editicon.mas_bottom). With.offset (5);        }]; //Select LabelUILabel *taglabel =[[UILabel alloc]init]; Taglabel.text=@"Select Label"; Taglabel.textcolor=C3; Taglabel.font= [Uifont systemfontofsize: the];        [Self.view Addsubview:taglabel]; [Taglabel mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.height.mas_equalTo (@ -); Make.width.mas_equalTo (@ -); Make.left.equalTo (Weakself.view). With.offset (Ten); Make.top.equalTo (Xian). With.offset ( *);        }]; //Jump Tab SelectionUitextfield *tagtext =[[Uitextfield alloc]init]; Tagtext.placeholder=@"Beautiful face"; Tagtext.borderstyle=Uitextborderstyleroundedrect; Tagtext.Delegate=Self ;    [Tagtext addtarget:self Action: @selector (TextTag) Forcontrolevents:uicontroleventtouchdown];        [Self.view Addsubview:tagtext]; [Tagtext mas_makeconstraints:^ (Masconstraintmaker *Make )        {Make.centerY.equalTo (Taglabel); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.left.equalTo (taglabel.mas_right). With.offset (5);        }]; //TagviewSelf.tagview =({Sktagview*view = [SktagviewNew]; View.backgroundcolor=[Uicolor Clearcolor]; View.padding= Uiedgeinsetsmake (0,0,0,0); View.insets= the; View.linespace=Ten; __weak Sktagview*weakview =view; View.didclicktagatindex= ^(Nsuinteger index) {//Remove Tag[Weakview Removetagatindex:index];        };    View    });    [Self.view AddSubview:self.tagView]; [Self.tagview mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.left.equalTo (Weakself.view). With.offset (Ten); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.top.equalTo (Tagtext.mas_bottom). With.offset (Ten);        }]; //label IdentifierUILabel *label =[[UILabel alloc]init]; Label.font= [Uifont systemfontofsize: -]; Label.textcolor=[Uicolor Redcolor]; Label.text=@"PS: The more members and videos the more the community is likely to be found!";        [Self.view Addsubview:label]; [Label Mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.left.equalTo (Weakself.view). With.offset (Ten); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.top.equalTo (Self.tagView.mas_bottom). With.offset ( -);        }]; UIButton*COMMITBTN =[[UIButton alloc]init]; [Commitbtn Setcornerradius:5]; [Commitbtn setborderwidth:1Color:dbtextthemecolor];    [Commitbtn Settitlecolor:dbtextthemecolor Forstate:uicontrolstatenormal]; CommitBtn.titleLabel.font= [Uifont systemfontofsize: the]; [Commitbtn settitle:@"Confirm Release"Forstate:uicontrolstatenormal];    [Commitbtn addtarget:self Action: @selector (Commitbutton) Forcontrolevents:uicontroleventtouchdown];        [Self.view ADDSUBVIEW:COMMITBTN]; [Commitbtn mas_makeconstraints:^ (Masconstraintmaker *Make ) {Make.height.mas_equalTo (@ -); Make.left.equalTo (Weakself.view). With.offset (Ten); Make.right.equalTo (Weakself.view). With.offset (-Ten); Make.top.equalTo (Label.mas_bottom). With.offset ( -); }];} The first time to write a blog, write more chaotic. I hope you will make a lot of suggestions ...

Masonry-01-autolayout Framework Simple Replication Introduction