About the iOS layout automatically after the IPhone6 is Autolayout,autolayout is very good, but sometimes we need to page layout manually, the VFL is a choice, and the VFL is not complex, understanding is very easy, the actual development of the special cooked well, It would take a bit of work to get the first look. Masonry is a simplified version of the VFL, the use of more people, before the project used once, for manual writing page development is a benefit.
Basic knowledge
First, let's look at a common problem. Place a child view somewhere in the Uiviewcontroller, by setting the margins to do the following:
If through the VFL our code would be like this:
UIView *superview
= Self.view; UIView *view1
= [[UIView alloc] init];
View1.translatesautoresizingmaskintoconstraints = NO; view1.backgroundcolor
= [Uicolor Redcolor];
[Superview Addsubview:view1]; Uiedgeinsets padding = Uiedgeinsetsmake (200, 50, 200, 50)
; [Superview Addconstraints:@[ //constraint [nslayoutconstraint Constraintwithitem:view1 attribute: Nslayoutattributetop relatedby:nslayoutrelationequal toitem:superview attribute:nslayoutattributetop multiplier:1.0 constant:padding.top], [nslayoutconstraint Constraintwithitem:view1
attribute:nslayoutattributeleft relatedby:nslayoutrelationequal toitem:superview attribute: Nslayoutattributeleft multiplier:1.0 &nBsp; constant:padding.left], [nslayoutconstraint Constraintwithitem:view1 attribute: Nslayoutattributebottom &nbsP;relatedby:nslayoutrelationequal toitem:superview Attribute:nslayoutattributebottom multiplier:1.0 constant:-padding.bottom], [nslayoutconstraint Constraintwithitem:view1 &nbSp; attribute:nslayoutattributeright relatedby:nslayoutrelationequal toitem:superview attribute: Nslayoutattributeright multiplier:1 constant:-padding.right], ]];
Simply set a margin, if the view of the relationship is more complex, maintenance will be a very painful thing, we look at how masonry is implemented, import Masonry.h header file, constraint code:
UIView *childview=[uiview new];
[Childview Setbackgroundcolor:[uicolor Redcolor]];
Add the child view to the parent view first
[Self.view Addsubview:childview];
__weak typeof (self) weakself = self;
Uiedgeinsets padding = uiedgeinsetsmake (m);
[Childview mas_makeconstraints:^ (Masconstraintmaker *make) {
make.edges.equalTo (weakself.view). With.insets (padding);
}];
Through the mas_makeconstraints set margin a kind of Chine feeling, we are about to open a new journey, can be followed by the following more practical features ~
Practical knowledge
1.View Setting size
UIView *childview=[uiview new];
[Childview Setbackgroundcolor:[uicolor Redcolor]];
Add the child view to the parent view first
[Self.view Addsubview:childview];
__weak typeof (self) weakself = self;
[Childview mas_makeconstraints:^ (Masconstraintmaker *make) {
//set size
make.size.mas_equalTo (cgsizemake);
Center
Make.center.equalTo (Weakself.view);
}];
The effect is as follows:
Here friendship is actually a small content, at present we set constraints are used to create constraints through mas_makeconstraints, mas_updateconstraints used to update constraints, mas_remakeconstraints reset constraints, Clear the previous constraints, keep the latest constraints, if you want to further explain, you can read the following English explanation ~
/** * creates a masconstraintmaker with the callee view. * any constraints defined are added to the view or the appropriate Superview once the block has finished Ting * * @param block scope within which your can build up the constraints which your wish to apply to the
View. * * @return Array of created Masconstraints */-(Nsarray *) Mas_makeconstraints: (void (^) (
Masconstraintmaker *make)) block;
/** * creates a masconstraintmaker with the callee view. * any constraints defined are added to the view or the appropriate Superview once the block has finished
Ting.
* If an existing constraint exists then it'll be updated instead. * * @param block scope within which you can builds up the constraints which your wish to apply to the view
. * * @return Array of created/updated masconstraints */-(Nsarray *) Mas_updateconstraints: (Void ( ^) (MASconstraintmaker *make)) block;
/** * creates a masconstraintmaker with the callee view. * any constraints defined are added to the view or the appropriate Superview once the block has finished
Ting.
* all constraints previously installed for the view would be removed. * * @param block scope within which you can builds up the constraints which your wish to apply to the view
. * * @return Array of created/updated masconstraints */-(Nsarray *) Mas_remakeconstraints: (Void ( ^) (Masconstraintmaker *make)) block;
2. Set the height, here set the left and right margins, so do not set the width, if you want to set a single width can be referred to the height of the setting method:
UIView *childview=[uiview new];
[Childview Setbackgroundcolor:[uicolor Greencolor]];
Add the child view to the parent view first
[Self.view Addsubview:childview];
__weak typeof (self) weakself = self;
[Childview mas_makeconstraints:^ (Masconstraintmaker *make) {
//distance from top of
make.top.equalTo (weakSelf.view.mas_top). With.offset ();
From the left of
Make.left.equalTo (weakSelf.view.mas_left). With.offset ();
Distance to the right 30, note that the negative
make.right.equalTo (weakSelf.view.mas_right). With.offset ( -30);
Highly
make.height.mas_equalTo (@150);
}];
3. Position settings between child views:
uiview *childview=[uiview New];
[Childview Setbackgroundcolor:[uicolor Greencolor]];
Add the child view to the parent view first [Self.view Addsubview:childview];
__weak typeof (self) weakself = self; [Childview mas_makeconstraints:^ (Masconstraintmaker *make) { //distance from top of make.top.equalto (WeakSelf.view.mas_top). With.offset (
44); //Distance to make.left.equalto (weakSelf.view.mas_left). With.offset (
30); //distance to the right 30, note that the negative make.right.equalto (weakSelf.view.mas_right).
With.offset (-30);
//highly make.height.mas_equalto (@150);
}];
Address: Http://www.cnblogs.com/xiaofeixiang/UIView *nextview=[uiview new];
[NextView Setbackgroundcolor:[uicolor Redcolor]];
[Self.view Addsubview:nextview]; [NextView mas_makeconstraints:^ (Masconstraintmaker *make) { make.top.equalto (Childview.mas_bottom). With.offset (a); make.right.equalto (Childview.mas_right). With.offset (-30);
make.width.mas_equalto (@100);
make.height.mas_equalto (@100); }];
4. The style of chain writing is a convenient formulation:
UIView *childview=[uiview New];
[childview Setbackgroundcolor:[uicolor Greencolor]];
//first adds the child view to the parent view [self.view Addsubview:childview];
__weak typeof (self) weakself = self; [childview mas_makeconstraints:^ (Masconstraintmaker *make) {
make.top.and.left.mas_equalto (Weakself.view). With.offset (100); make.bottom.and.right.mas_equalto (WeakSelf.view). With.offset (-
100); //the second way is simpler, relative to the parent view//
Make.top.and.left.mas_equalTo (100);
Make.bottom.and.right.mas_equalTo (-100);
}];
uilabel *label=[uilabel New]; [label settext:@"Blog Park-flyelephant"];
[label Settextcolor:[uicolor Redcolor]];
[label Settextalignment:nstextalignmentcenter];
[self.view Addsubview:label]; [label mas_makeconstraints:^ (Masconstraintmaker *make) {
make.left.mas_equalto (Weakself.view). With.offset (10);
make.height.mas_equalto (20);
make.right.mas_equalto (Weakself.view). With.offset (-10);
make.bottom.mas_equalto (Weakself.view). With.offset (-50); }];
There are a lot of tutorials online about masonry, give a lot of examples, these kinds of situations basically meet the needs of development, there will not be too much access, is a simple version of the tutorial, masonry in the attributes and iOS in the attribute is a corresponding relationship, but because it is very simple, basically not how to see, The following figure is a contrasting relationship:
Summarize:
- You can add a Left/right/top/bottom/size/height/width/insert constraint to a control;
- The library provides three methods, mas_makeconstraints add constraints, mas_updateconstraints modify constraints, mas_remakeconstraints clear previous constraints and add new constraints;
- You can get a constraint on the view through View.mas_bottom;
- In the block of the constraint, use make to add a constraint to the current control.