IOS Self-adapting tool masonry guide to use _ios

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:

1. You can add a Left/right/top/bottom/size/height/width/insert constraint to a control;
2. The library provides three methods, mas_makeconstraints add constraints, mas_updateconstraints modify constraints, mas_remakeconstraints clear previous constraints and add new constraints;
3. You can get a constraint on the view through View.mas_bottom;
4. In the block of the constraint, use make to add a constraint to the current control.