"iOS Dev-113" on storyboard with AutoLayout, pure code implementation AutoLayout Layout method and simple animation

(1) Use AutoLayout in storyboard. This AutoLayout and autoresizing are conflicting and can only be chosen.

--the constraints of different levels of controls are added at the top level.

--The mutual constraints of the controls at the same level are added on their parent controls.

--The mutual constraint of the different branch controls is the first common parent control that is added as they are traced up.

These 3 rules are useful when code is created. The system automatically helps us to add it when using Storyboard.

(2) Implement AutoLayout with code. The step is to create the layout constraint object first and then add the object to the control that needs to be constrained.

--you need to first suppress the autoresizing functionality of the controls that need to be constrained.

--Before adding a constraint object, ensure that the control has been added to the respective parent control.

-(void) viewdidload {[Super viewdidload];    Ensure that the control you want to constrain already has a parent control UIView *blueview=[[uiview Alloc]init];    Blueview.backgroundcolor=[uicolor Bluecolor];        [Self.view Addsubview:blueview];        Close the autoresizing blueview.translatesautoresizingmaskintoconstraints=no of the control that needs to be constrained; Define the Constraint object and add (note where to add), Width height 100, center nslayoutconstraint *width=[nslayoutconstraint Constraintwithitem:blueview attribute : Nslayoutattributewidth relatedby:nslayoutrelationequal Toitem:nil Attribute:nslayoutattributenotanattribute    multiplier:1.0 constant:100];        [Blueview Addconstraint:width]; Nslayoutconstraint *height=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributeheight    Relatedby:nslayoutrelationequal toitem:nil attribute:nslayoutattributenotanattribute multiplier:1.0 constant:100];        [Blueview Addconstraint:height]; Nslayoutconstraint *centerx=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributecenterx Relatedby:nslayoutrelationequal toItem:self.view Attribute:nslayoutattributecenterx multiplier:1.0 constant:0];        [Self.view Addconstraint:centerx]; Nslayoutconstraint *centery=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributecentery    Relatedby:nslayoutrelationequal ToItem:self.view attribute:nslayoutattributecentery multiplier:1.0 constant:0]; [Self.view addconstraint:centery];}

(3) Two controls are bound to each other in the same way as the individual controls above, except to note that the control is calculated relative to whom, and whether the constraint is added to itself or to the parent control.

-(void) viewdidload {[Super viewdidload];    Ensure that the control you want to constrain already has a parent control UIView *blueview=[[uiview Alloc]init];    Blueview.backgroundcolor=[uicolor Bluecolor];        [Self.view Addsubview:blueview];    UIView *redview=[[uiview Alloc]init];    Redview.backgroundcolor=[uicolor Redcolor];        [Self.view Addsubview:redview];    Close the autoresizing blueview.translatesautoresizingmaskintoconstraints=no of the control that needs to be constrained;        Redview.translatesautoresizingmaskintoconstraints=no; Adjust Blueview nslayoutconstraint *height=[nslayoutconstraint constraintwithitem:blueview attribute First: Nslayoutattributeheight relatedby:nslayoutrelationequal Toitem:nil Attribute:nslayoutattributenotanattribute    multiplier:1.0 constant:40];        [Blueview Addconstraint:height]; Nslayoutconstraint *left=[nslayoutconstraint Constraintwithitem:blueview attribute:nslayoutattributeleft relatedBy    : nslayoutrelationequal toItem:self.view attribute:nslayoutattributeleft multiplier:1.0 constant:20]; [Self.view AddConstraint:Left]; Note -20 nslayoutconstraint *right=[nslayoutconstraint Constraintwithitem:blueview attribute:nslayoutattributeright    Relatedby:nslayoutrelationequal ToItem:self.view attribute:nslayoutattributeright multiplier:1.0 constant:-20];        [Self.view Addconstraint:right]; Nslayoutconstraint *top=[nslayoutconstraint constraintwithitem:blueview attribute:nslayoutattributetop relatedBy:    Nslayoutrelationequal ToItem:self.view attribute:nslayoutattributetop multiplier:1.0 constant:20];        [Self.view Addconstraint:top]; Adjust Redview nslayoutconstraint *heightr=[nslayoutconstraint constraintwithitem:redview attribute: Nslayoutattributeheight relatedby:nslayoutrelationequal Toitem:blueview Attribute:nslayoutattributeheight    multiplier:1.0 constant:0];        [Self.view ADDCONSTRAINT:HEIGHTR]; Nslayoutconstraint *widthr=[nslayoutconstraint Constraintwithitem:redview Attribute:nslayoutattributewidth Relatedby:nslayoutrelationequal Toitem:blueview Attribute:nslayoutattributewidth multiplier:0.5 constant:0];        [Self.view Addconstraint:widthr]; Nslayoutconstraint *rightr=[nslayoutconstraint Constraintwithitem:redview Attribute:nslayoutattributeright    Relatedby:nslayoutrelationequal Toitem:blueview attribute:nslayoutattributeright multiplier:1.0 constant:0];    [Self.view ADDCONSTRAINT:RIGHTR]; Note that the top of the Redview is Nslayoutconstraint *topr=[nslayoutconstraint constraintwithitem:redview relative to the bottom location of the Blueview Attribute:nslayoutattributetop relatedby:nslayoutrelationequal Toitem:blueview Attribute:NSLayoutAttributeBottom    multiplier:1.0 CONSTANT:20]; [Self.view ADDCONSTRAINT:TOPR];}

(4) Using the VFL language, the visual format language.

--controls need to be enclosed in [].

--| Represents the bounds of the parent control

--The multiplication law is inconvenient to use, and some need to use Constraintwithitem: Auxiliary

-(void) viewdidload {[Super viewdidload];    Ensure that the control you want to constrain already has a parent control UIView *blueview=[[uiview Alloc]init];    Blueview.backgroundcolor=[uicolor Bluecolor];        [Self.view Addsubview:blueview];    UIView *redview=[[uiview Alloc]init];    Redview.backgroundcolor=[uicolor Redcolor];        [Self.view Addsubview:redview];    Close the autoresizing blueview.translatesautoresizingmaskintoconstraints=no of the control that needs to be constrained;        Redview.translatesautoresizingmaskintoconstraints=no; The use of the VFL language, but some can not be achieved, such as the width of multiples, because can not be used multiplication Nsarray *cons0=[nslayoutconstraint constraintswithvisualformat:@ "h:|-20-[    blueview]-20-| "options:0 metrics:nil views:@{@" Blueview ": Blueview}];        [Self.view ADDCONSTRAINTS:CONS0]; Nsarray *cons1=[nslayoutconstraint constraintswithvisualformat:@ "V:|-20-[blueview (+)]-20-[redView (==blueView)]"    Options:nslayoutformatalignallright metrics:nil views:@{@ "Blueview": blueview,@ "Redview": RedView}];        [Self.view addconstraints:cons1]; Nsarray *cons2=[nslayoutconstraint Constraintswithvisualformat:@ "H:[redview (==blueview)]" options:0 metrics:nil views:@{@ "Blueview": blueView,@ "RedView":    Redview}]; [Self.view addconstraints:cons2];}

--where option is used when there are two controls that need to be aligned when used, can be used | Symbols use more than one.

--where metrics a placeholder symbol and a worthy dictionary. For example, as follows, of course, we can write another nsdictionary dictionary to store:

Nsarray *cons0=[nslayoutconstraint constraintswithvisualformat:@ "h:|-margin-[blueview]-margin-|" options:0 Metrics : @{@ "margin": @20} views:@{@ "Blueview": Blueview}];

Where views can be easily written, as below, withnsdictionaryofvariablebindings ()Creates a key-value pair.

Nsarray *cons0=[nslayoutconstraint constraintswithvisualformat:@ "h:|-margin-[blueview]-margin-|" options:0 Metrics : @{@ "margin": @20} views:nsdictionaryofvariablebindings (Blueview,redview)];

(5) AutoLayout allows the label to automatically increase the height according to the content. Of course, the label's number of rows needs to be set to 0 to break the line.

(6) AutoLayout can also do animation, that is, change the value of the constraint.

--The animation effect also needs UIView animationwithduration mates. Note that you need to modify the constraint values first, and then call the layout method layoutifneeded in the animation method.

--only constants constant can be modified, the other basic is readonly read-only, cannot be modified.

#import "ViewController.h" @interface Viewcontroller () @property (nonatomic,strong) Nslayoutconstraint *con3;@ End@implementation viewcontroller-(void) viewdidload {    [super viewdidload];    .....    Nslayoutconstraint *con3=[nslayoutconstraint Constraintwithitem:redview attribute:nslayoutattributewidth relatedBy : nslayoutrelationequal toitem:blueview attribute:nslayoutattributewidth multiplier:0.5 constant:0];    [Self.view Addconstraint:con3];    Self.con3=con3;} -(void) touchesended: (Nsset *) touches withevent: (uievent *) event{    self.con3.constant=100;    [UIView animatewithduration:1.0 animations:^{        [Self.view layoutifneeded];    }];}

"iOS Dev-113" on storyboard with AutoLayout, pure code implementation AutoLayout Layout method and simple animation