iOS Development nslayoutconstraint Code Auto Layout

1, Nslayoutconstraint Introduction

Most of the adaptation interface with masonry tools, but also based on Nslayoutconstraint write! Automatic layout is achieved by using two class methods:

+ (nsarray<__kindof nslayoutconstraint *> *) Constraintswithvisualformat: (NSString *) format options: (nslayoutformatoptions) OPTs metrics: (nu Llable nsdictionary<nsstring *,ID> *) Metrics Views: (Nsdictionary<nsstring *,ID> *) views;+ (Instancetype) Constraintwithitem: (ID) view1 attribute: (nslayoutattribute) attr1 Relatedby: (nslayoutrelation) re Lation Toitem: (NullableID) view2 attribute: (nslayoutattribute) attr2 multiplier: (cgfloat) multiplier Constant: (cgfloat) C;

1. Set the view's Auto layout constraint to No (view.translatesautoresizingmaskintoconstraints = no) before using automatic layout

2 "Uiviewcontroller has a Method-(void) updateviewconstraints;

UIView has a method-(void) updateconstraints; Set the automatic layout in the corresponding method;

2. How to use Constraintswithvisualformat and the VFL language

2.1 "Constraintswithvisualformat Method Description:

+ (nsarray<__kindof nslayoutconstraint *> *) Constraintswithvisualformat: (NSString *) format                                                                options: ( nslayoutformatoptions) OPTs                                                                metrics: (Nullable nsdictionary<nsstring *,ID> *) Metrics Views                                                                  : (Nsdictionary ID> *) views;

Method Description: This method is adapted with the VFL language

FORMAT:VFL statement String form opts: Enumeration parameter Nslayoutformatoptions metrics: Dictionary placement of parameters (such as height) used by the VFL language corresponds to key views: dictionary Place the view corresponding key for the VFL language

2.2 "The VFL language introduction

The VFL (visual format Language) Visual formatting language is the abstract language that Apple has coded to simplify AutoLayout.

specific presentation method: Horizontal Direction        H:       Vertical Direction     V: Views      [view] relationship   　　 >=,==,<=         superview    |  Space, Gap-    - priority   @value        　　

2.3 "Simple to use

Create a blue view that is 20px from the left and right of the parent view, and 20 higher:

UIView *blueview =[[UIView alloc] init]; Blueview.backgroundcolor=[Uicolor Bluecolor]; Blueview.translatesautoresizingmaskintoconstraints=NO;    [Self.view Addsubview:blueview]; Nsarray*arr = [Nslayoutconstraint constraintswithvisualformat:@"h:|-[blueview]-|"Options:0Metrics:nil    Views:nsdictionaryofvariablebindings (Blueview)]; Nsarray*ARRV = [Nslayoutconstraint constraintswithvisualformat:@"V:|-[blueview (==height)]"Options:0metrics:@{@"Height":@" -"} views:nsdictionaryofvariablebindings (Blueview)];    [Self.view Addconstraints:arr]; [Self.view ADDCONSTRAINTS:ARRV];

Create a yellow view below the blue view, right and left from parent view 40px, top off blue view8px, height 20px:

UIView *yellowview =[[UIView alloc] init]; Yellowview.backgroundcolor=[Uicolor Yellowcolor]; Yellowview.translatesautoresizingmaskintoconstraints=NO;    [Self.view Addsubview:yellowview]; Nsarray*ARR2 = [Nslayoutconstraint constraintswithvisualformat:@"h:|-40-[yellowview]-40-|"Options:0Metrics:nil    Views:nsdictionaryofvariablebindings (Yellowview)]; Nsarray*ARR2V = [Nslayoutconstraint constraintswithvisualformat:@"V:[blueview]-[yellowview (==height)]"Options:0metrics:@{@"Height":@" -"} views:nsdictionaryofvariablebindings (Blueview,yellowvie    W)];    [Self.view ADDCONSTRAINTS:ARR2]; [Self.view addconstraints:arr2v];

Note:-: 20px is represented in the parent view, and the sibling view represents 8px;

Parameter metrics and views should correspond with the parameters of the VFL language, otherwise it will crash;

3. How to use the Constraintwithitem method

3.1 "Constraintwithitem Method Description:

+ (Instancetype) Constraintwithitem: (ID) view1                        attribute: (nslayoutattribute) attr1                        Relatedby :(nslayoutrelation) Relation                           ID) view2                        attribute: (nslayoutattribute) attr2                       Multiplier: (cgfloat) Multiplier                         constant: (cgfloat) C;

View1: Set the properties of the View Attr1:view1 settings relation: View View1 and View2 attribute relationships View2: Properties attr2:view2 settings for the reference View multiplier: View view1 Specifies how many times the property is VIEW2 for the specified property C:vie W1 Specify the floating-point number that the attribute needs to add

3.2 "Simple to use

Add a view in the center of the parent view, equal width, and a height of half the parent view:

UIView *blueview =[[UIView alloc] init]; Blueview.backgroundcolor=[Uicolor Bluecolor]; Blueview.translatesautoresizingmaskintoconstraints=NO;    [Self.view Addsubview:blueview]; Nsmutablearray*constraints =[Nsmutablearray array]; [Constraints Addobject:[nslayoutconstraint Constraintwithitem:blueview attribute:nslayoutattributewidth relatedBy: Nslayoutrelationequal toItem:self.view attribute:nslayoutattributewidth Multiplier:1.0constant0.0]]; [Constraints Addobject:[nslayoutconstraint Constraintwithitem:blueview attribute:nslayoutattributeheight relatedBy : Nslayoutrelationequal toItem:self.view attribute:nslayoutattributeheight multiplier:.5constant0.0]]; [Constraints Addobject:[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributecentery Relatedby:nslayoutrelationequal toItem:self.view attribute:nslayoutattributecentery Multiplier:1.0constant0.0]]; [Constraints Addobject:[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributecenterx Relatedby:nslayoutrelationequal toItem:self.view Attribute:nslayoutattributecenterx Multiplier:1.0constant0.0]]; [Self.view addconstraints:constraints];

4, Nslayoutrelation, Nslayoutattribute, Nslayoutformatoptions enumeration description

4.1 "Nslayoutrelation Description:

typedef ns_enum (Nsinteger, nslayoutrelation) {    =-1// view relation less than or equal to    0 ,// view relationship equals    1,/ / View relation is greater than or equal to};

4.2 "Nslayoutattribute Description:

typedef ns_enum (Nsinteger, Nslayoutattribute) {Nslayoutattributeleft=1,//left side of viewNslayoutattributeright,//right side of viewNslayoutattributetop,//Top of viewNslayoutattributebottom,//bottom of viewNslayoutattributeleading,//Front of viewNslayoutattributetrailing,//behind the ViewNslayoutattributewidth,//width of the viewNslayoutattributeheight,//the height of the viewNslayoutattributecenterx,//x value of the View centerNslayoutattributecentery,//the Y value of the View centerNslayoutattributelastbaseline,//The lower baseline of the viewNslayoutattributebaseline ns_swift_unavailable ("Use ' lastbaseline ' instead") =Nslayoutattributelastbaseline, Nslayoutattributefirstbaseline Ns_enum_available_ios (8_0),//Upper baseline of the viewNslayoutattributeleftmargin Ns_enum_available_ios (8_0),//left margin of viewNslayoutattributerightmargin Ns_enum_available_ios (8_0),//right margin of the viewNslayoutattributetopmargin Ns_enum_available_ios (8_0),//top margin of a viewNslayoutattributebottommargin Ns_enum_available_ios (8_0),//bottom margin of viewNslayoutattributeleadingmargin Ns_enum_available_ios (8_0),//front margin of the viewNslayoutattributetrailingmargin Ns_enum_available_ios (8_0),//the rear margin of the viewNslayoutattributecenterxwithinmargins Ns_enum_available_ios (8_0),//Center x margin of the viewNslayoutattributecenterywithinmargins Ns_enum_available_ios (8_0),//Center y margin of the viewNslayoutattributenotanattribute =0//No attributes};

Note: nslayoutattributeleading and nslayoutattributetrailing represent the front and back, because Chinese writing is left-to-right. If the right-to-left represents the back and front;

Nslayoutattributelastbaseline and Nslayoutattributefirstbaseline express the baseline, for example uilabel the upper and lower baseline is the upper and lower edge of the text;

4.3 "nslayoutformatoptions description

typedef ns_options (Nsuinteger, nslayoutformatoptions) {Nslayoutformatalignallleft= (1<< nslayoutattributeleft),//aligns the left edges of all views. Nslayoutformatalignallright = (1<< nslayoutattributeright),//align all views on right edgeNslayoutformatalignalltop = (1<< nslayoutattributetop),//Align top of all viewsNslayoutformatalignallbottom = (1<< Nslayoutattributebottom),//align all views at the bottomNslayoutformatalignallleading = (1<< nslayoutattributeleading),//The edge alignment at which the view's current area text begins (English: left, Hebrew: right)Nslayoutformatalignalltrailing = (1<< nslayoutattributetrailing),//Edge Alignment for the end of the current area text of the view (English: Right, Hebrew: left)Nslayoutformatalignallcenterx = (1<< Nslayoutattributecenterx),//View Center point x AlignmentNslayoutformatalignallcentery = (1<< nslayoutattributecentery),//align the view center point yNslayoutformatalignalllastbaseline = (1<< nslayoutattributelastbaseline),//View Content Bottom baseline aligned, text is bottom of textNslayoutformatalignallbaseline ns_swift_unavailable ("Use ' alignalllastbaseline ' instead") =Nslayoutformatalignalllastbaseline, Nslayoutformatalignallfirstbaseline ns_enum_available_ios (8_0)= (1<< nslayoutattributefirstbaseline),,//View content Fixed baseline aligned, text is top of text//align based on edits and direction of writingNslayoutformatalignmentmask =0xFFFF, Nslayoutformatdirectionleadingtotrailing=0<< -,//defaultNslayoutformatdirectionlefttoright =1<< -, Nslayoutformatdirectionrighttoleft=2<< -, Nslayoutformatdirectionmask=0x3<< -, Nslayoutformatspacingedgetoedge api_available (iOS (11.0), tvOS (11.0)) =0<< +,//defaultNslayoutformatspacingbaselinetobaseline api_available (iOS (11.0), tvOS (11.0)) =1<< +, Nslayoutformatspacingmask api_available (iOS (11.0), tvOS (11.0)) =0x1<< +,};

iOS Development nslayoutconstraint Code Auto Layout