Simple use of iOS development masonry

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 easy it is to use masonry

This is the property that masonry gives us.

@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; First

@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 baselines

property 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, let's look at some small demo

1. Center A View

Prevent circular references in block
__weak typeof (self) weakself = self;
Initializes a view
UIView *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 (200, 200));
}]；

1

is not very simple, here is a point to note, you must add a constraint before you add the view to the views.

So if I don't want to fix him up, let the size of the view control how it's done by spacing.

Let's set a view that is based on the parent view spacing of 10

[Bgview mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.center.equalTo (Weakself.view);
Make.edges.mas_offset (Uiedgeinsetsmake (10, 10, 10, 10));
}]；

This will be OK!!!

Make.edges.mas_offset (Uiedgeinsetsmake (10, 10, 10, 10));

Equivalent to

Make.top.equalTo (Weakself.view). With.offset (10);
Make.left.equalTo (Weakself.view). With.offset (10);
Make.bottom.equalTo (Weakself.view). With.offset (-10);
Make.right.equalTo (Weakself.view). With.offset (-10);

2. Multiple view

2 View landscape centered, second view distance first view spacing is 10

UIView *view1 = [[UIButton alloc]init];
View1.backgroundcolor = [Uicolor Redcolor];
[Self.view Addsubview:view1];
[View1 mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.size.mas_equalTo (Cgsizemake (90, 90));
Make.centerX.equalTo (Weakself.view);
Make.top.width.offset (90);
}];

UIView *view2 = [[UILabel alloc]init];
View2.backgroundcolor = [Uicolor Yellowcolor];
[Self.view Addsubview:view2];
[View2 mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.size.mas_equalTo (Cgsizemake (100, 100));
Make.centerX.equalTo (View1);
Make.top.equalTo (View1.mas_bottom). With.offset (20);
}];

2

Did anyone see the second view Code

Make.top.equalTo (View1.mas_bottom). With.offset (20);

What does View1.mas_bottom mean? If write-only view1,masonry will default to the top start in View1, which is view2 spacing view1 y-axis start 20

This also makes it easy to set the left and right spacing between the view and the other view.

You might as well try View.mas_top view.mas_left view.mas_right The effect is what got

Below I enclose a complete interface demo, you can see

3

The code is as follows:

-(void) Setupframe {
__weak typeof (self) weakself = self;

Upload Avatar
UIButton *iconbtn = [[UIButton alloc]init];
[Iconbtn setcornerradius:45];
[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 (90, 90));
Make.centerX.equalTo (Weakself.view);
Make.top.width.offset (90);
}];

Upload Community Avatar Text Alerts
UILabel *iconlabel = [[UILabel alloc]init];
Iconlabel.textcolor = C3;
Iconlabel.text = @ "Upload the club head";
Iconlabel.font = [Uifont systemfontofsize:15];
[Self.view Addsubview:iconlabel];

[IconLabel mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.centerX.equalTo (ICONBTN);
Make.top.equalTo (Iconbtn.mas_bottom). With.offset (20);
}];

Community Edit icon
Uiimageview *editicon = [[Uiimageview alloc]init];
Editicon.image = [UIImage imagenamed:@ "Bianxie"];
[Self.view Addsubview:editicon];

[Editicon mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.size.mas_equalTo (Cgsizemake (25, 20));
Make.left.equalTo (Weakself.view). With.offset (10);
Make.top.equalTo (Iconlabel.mas_bottom). With.offset (30);
}];

Community Name
Uitextfield *nametext = [[Uitextfield alloc]init];
Nametext.placeholder = @ "Please fill in the Community name (maximum 6 words of the association name)";
[Self.view Addsubview:nametext];
Self.nametext = Nametext;

[Nametext mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.height.mas_equalTo (@20);
Make.centerY.equalTo (Editicon);
Make.right.equalTo (Weakself.view). With.offset (-10);
Make.left.equalTo (editicon.mas_right). With.offset (5);
}];

Split Line
Uiimageview *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 (10);
Make.right.equalTo (Weakself.view). With.offset (-10);
Make.top.equalTo (Editicon.mas_bottom). With.offset (5);
}];

Select Label
UILabel *taglabel = [[UILabel alloc]init];
Taglabel.text = @ "Select label";
Taglabel.textcolor = C3;
Taglabel.font = [Uifont systemfontofsize:15];
[Self.view Addsubview:taglabel];

[Taglabel mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.height.mas_equalTo (@20);
Make.width.mas_equalTo (@60);
Make.left.equalTo (Weakself.view). With.offset (10);
Make.top.equalTo (Xian). With.offset (35);
}];

Jump Tab Selection
Uitextfield *tagtext = [[Uitextfield alloc]init];
Tagtext.placeholder = @ "Beauty appearance";
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 (-10);
Make.left.equalTo (taglabel.mas_right). With.offset (5);
}];

Tagview
Self.tagview = ({
Sktagview *view = [Sktagview new];
View.backgroundcolor = [Uicolor Clearcolor];
view.padding = uiedgeinsetsmake (0, 0, 0, 0);
View.insets = 15;
View.linespace = 10;
__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 (10);
Make.right.equalTo (Weakself.view). With.offset (-10);
Make.top.equalTo (Tagtext.mas_bottom). With.offset (10);
}];

Label identifier
UILabel *label = [[UILabel alloc]init];
Label.font = [Uifont systemfontofsize:13];
Label.textcolor = [Uicolor Redcolor];
Label.text = @ "PS: the more members and videos the more community is easier to find!";
[Self.view Addsubview:label];

[Label mas_makeconstraints:^ (Masconstraintmaker *make) {
Make.left.equalTo (Weakself.view). With.offset (10);
Make.right.equalTo (Weakself.view). With.offset (-10);
Make.top.equalTo (Self.tagView.mas_bottom). With.offset (20);
}];

UIButton *commitbtn = [[UIButton alloc]init];
[Commitbtn Setcornerradius:5];
[Commitbtn setborderwidth:1 Color:dbtextthemecolor];
[Commitbtn Settitlecolor:dbtextthemecolor Forstate:uicontrolstatenormal];
CommitBtn.titleLabel.font = [Uifont systemfontofsize:15];
[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 (@30);
Make.left.equalTo (Weakself.view). With.offset (10);
Make.right.equalTo (Weakself.view). With.offset (-10);
Make.top.equalTo (Label.mas_bottom). With.offset (50);
}];
}

The paper/Shop (Jane book author)
Original link: http://www.jianshu.com/p/f0b17ecfd04e
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Simple use of iOS development masonry