iOS Development Learning Note 039-autolayout Code implementation

1, the code implementation is more complex

• Steps to implement AutoLayout code

  • Create a specific constraint object using the Nslayoutconstraint class

  • Add a Constraint object to the corresponding view

1     -(void) AddConstraint: (Nslayoutconstraint *) constraint;2 3     -(void) Addconstraints: (Nsarray *) constraints;

• Code implementation AutoLayout Point of attention

  • To disable the Autoresizing feature, set the following properties of the view to No

    view.translatesAutoresizingMaskIntoConstraints = NO;

  • Before you add a constraint, make sure that the controls are already on the respective parent control

  • No need to set frame for view

• A Nslayoutconstraint object represents a constraint

Common methods for creating constraint objects + (ID) Constraintwithitem: (id) view1 attribute: (nslayoutattribute) attr1 Relatedby: (nslayoutrelation) Relation                     Toitem: (id) view2 attribute: (nslayoutattribute) attr2     multiplier: (cgfloat) Multiplier                 Constant: (cgfloat) C;                View1: Control to constrain                ATTR1: type of constraint (how to constrain)                relation: Relationship to reference control                VIEW2: Referenced control                ATTR2: Type of constraint (how to constrain)                Multiplier: Multiplier                C: constant

• The core calculation formula of automatic layout

  VIEW1.ATTR1 = (VIEW2.ATTR2 * multiplier) + C;

• Constraints Add rules

  • For the constraint relationships between the two same-level view, add them to their parent view.

  • For the constraint relationship between two different levels of view, add to their nearest common parent view

  • For a hierarchical relationship between the two view constraints, added to the higher level of the parent view

Back to top 2, simple exercise: a view

• Implement a 100*200-sized redview display to view, the distance between the left and the top is 20

 1//Implement a redview with a size of 100*200 displayed in the view, the distance between the left and the top is 2 UIView *redview = [[UIView alloc] init]; 3 Redview.backgroundcolor = [Uicolor Redcolor]; 4//Close Control auto-add constraint function 5 redview.translatesautoresizingmaskintoconstraints = NO; 6//Add the control to the parent control before adding the constraint 7 [Self.view Addsubview:redview]; 8//Set width 9 nslayoutconstraint *widthconstraint = [Nslayoutconstraint constraintwithitem:redview attribute:NSLayou Tattributewidth relatedby:nslayoutrelationequal ToItem:self.view attribute:nslayoutattributewidth multiplier:0 constant:100];10 [Redview addconstraint:widthconstraint];11//Set height of nslayoutconstraint *heightconstraint = [ Nslayoutconstraint Constraintwithitem:redview attribute:nslayoutattributeheight relatedBy:NSLayoutRelationEqual ToItem:self.view attribute:nslayoutattributeheight multiplier:0 constant:200];13 [redview addconstraint: HEIGHTCONSTRAINT];14//Set Size: Distance from top nslayoutconstraint *topconstraint = [Nslayoutconstraint constraintwithitem:rEdview attribute:nslayoutattributetop relatedby:nslayoutrelationequal toItem:self.view attribute: Nslayoutattributetop multiplier:1 constant:20];16 [self.view addconstraint:topconstraint];17//Distance left constraint 2018 NSL Ayoutconstraint *leftconstraint = [Nslayoutconstraint constraintwithitem:redview attribute:nslayoutattributeleft Relatedby:nslayoutrelationequal toItem:self.view attribute:nslayoutattributeleft multiplier:1 constant:20];19 [ Self.view Addconstraint:leftconstraint];

Back to top 3, exercise: two view

• Add 2 view,1 Blue, 1 red on top of controller view

  • 2 View heights are always equal

  • Red View and Blue view right align

  • Blue View distance is equal to the left, right, and top of the parent control

  • Blue View distance with red view pitch fixed

  • Align the left side of the red view with the midpoint of the parent control

 1 UIView *redview = [[UIView alloc] init]; 2 Redview.backgroundcolor = [Uicolor Redcolor]; 3//Close Control auto-add constraint function 4 redview.translatesautoresizingmaskintoconstraints = NO; 5//Add the control to the parent control before adding the constraint 6 [Self.view Addsubview:redview]; 7 8 UIView *blueview = [[UIView alloc] init]; 9 Blueview.backgroundcolor = [Uicolor bluecolor];10//Close Control auto-add constraint function one by one Blueview.translatesautoresizingmaskinto Constraints = no;12//Add the control to the parent control before adding the constraint [self.view addsubview:blueview];14 15/**16 *-added at the top of the controller view 2 view,1 Blue, 1 red 17-2 view height always equal 18-red view and Blue view right align 19-blue view distance from parent control to left, right, top margin equal: 2020-blue View distance red View pitch fixed 21-the left side of the red View is aligned with the midpoint of the parent control */23/**************blue*********************************************** /25//blueHeight26 Nslayoutconstraint *blueheight = [Nslayoutconstraint constraintwithitem:blueview att Ribute:nslayoutattributeheight relatedby:nslayoutrelationequal Toitem:nil Attribute:kniloptions multiplier:0 constant:40];27 [Self.view addconstraint:blueheight]; Constraints between sibling controls to be added to a common parent control 28 29//Blue view distance to the left, right, and top of the parent control are equal: 2030 nslayoutconstraint *blueviewright = [Nslayoutconstrain  T Constraintwithitem:blueview attribute:nslayoutattributeright relatedby:nslayoutrelationequal ToItem:self.view Attribute:nslayoutattributeright multiplier:1 constant:-20];31 [Self.view addconstraint:blueviewright];32 Outconstraint *blueviewtop = [Nslayoutconstraint constraintwithitem:blueview attribute:nslayoutattributetop Relatedby:nslayoutrelationequal toItem:self.view attribute:nslayoutattributetop multiplier:1 constant:20];34 [ Self.view addconstraint:blueviewtop];35 Nslayoutconstraint *blueviewleft = [Nslayoutconstraint constraintWithItem: Blueview attribute:nslayoutattributeleft relatedby:nslayoutrelationequal toItem:self.view attribute: Nslayoutattributeleft multiplier:1 constant:20];37 [Self.view addconstraint:blueviewleft];38-/**************reD*********************************************************/40//-Redview and Blueview etc high NSLayoutConstraint *equal Height = [Nslayoutconstraint constraintwithitem:redview attribute:nslayoutattributeheight relatedBy: Nslayoutrelationequal toitem:blueview attribute:nslayoutattributeheight multiplier:1 constant:0];42 [Self.view addCo Nstraint:equalheight]; Redview//-midpoint of the left and parent controls of the nslayoutconstraint *centerx = [Nslayoutconstraint constraintwithitem:redview Attribute:nslayoutattributeleft relatedby:nslayoutrelationequal ToItem:self.view attribute: Nslayoutattributecenterx multiplier:1 constant:0];46 [Self.view Addconstraint:centerx];  //-Redview distance blueview pitch 2049 nslayoutconstraint *margin = [Nslayoutconstraint constraintwithitem:redview Attribute:nslayoutattributetop relatedby:nslayoutrelationequal Toitem:blueview Attribute:NSLayoutAttributeBottom Multiplier:1 constant:20];50 [Self.view Addconstraint:margin]; 51 52//-Red View andBlue View right aligns to nslayoutconstraint *equalright = [Nslayoutconstraint constraintwithitem:redview attribute: Nslayoutattributeright relatedby:nslayoutrelationequal Toitem:blueview attribute:nslayoutattributeright Multiplier : 1 constant:0];54 [Self.view addconstraint:equalright]; //

Back to top 4, simplifying code with the VFL language visual format lauguage, visual formatting language

You can use the VFL to implement automatic layout code simplification.

Use of the VFL

• Using the VFL to create an array of constraints

opts : Constraint type 5 METRICS:VFL the specific value used in the statement 6 VIEWS:VFL the control used in the statement

• Create a shortcut macro definition for a dictionary that contains the controls used within the VFL statement

　　NSDictionaryOfVariableBindings(...)

　　NSDictionaryOfVariableBindings(abc);

Returns a Dictionary object with the contents {@ "ABC": ABC};

Back to top 4.1, VFL Example 1: a view

1 code Example 2     UIView *redview = [[UIView alloc] init]; 3     redview.backgroundcolor = [Uicolor Redcolor]; 4     //close Control automatic Add Constraint function 5     redview.translatesautoresizingmaskintoconstraints = NO; 6     //Add the control to the parent control before adding the constraint 7     [Self.view Addsubview:redview];  8     nsstring *VFL  = @ "H:[redview (100)]-20-|"; Set width 100, distance to right 9     nsdictionary *view = @{@ "Redview": redview};10     //Horizontal constraint one by one     nsarray *constraint = [Nsla Youtconstraint CONSTRAINTSWITHVISUALFORMAT:VFL options:kniloptions metrics:nil views:view];12     [Self.view Addconstraints:constraint];13     //Vertical constraint     (VFL = @ "V:|-100-[redview (200)]";//Set height 200, distance from top 10015     Nsarray *constraint2 = [nslayoutconstraint constraintswithvisualformat:vfl options:kniloptions Metrics:nil Views:view ];16     [Self.view Addconstraints:constraint2];

Back to top 4.2, VFL Example 2: Center display

 Center display UIView *redview = [[UIView alloc] init];    Redview.backgroundcolor = [Uicolor Redcolor];    Turn off auto-add constraint for controls redview.translatesautoresizingmaskintoconstraints = NO;    Add the control to the parent control before adding the constraint [Self.view Addsubview:redview];    NSNumber *margin = @100; NSString *VFL = @ "h:|-margin-[redview]-margin-|";    Set width 100, distance to right nsdictionary *view = @{@ "Redview": Redview};    Nsdictionary *metric = @{@ "margin": margin}; Horizontal direction constraint Nsarray *constraint = [nslayoutconstraint CONSTRAINTSWITHVISUALFORMAT:VFL options:    Nslayoutformatalignallcenterx Metrics:metric Views:view];    [Self.view Addconstraints:constraint];    The vertical direction constraint nsdictionary *view2 = nsdictionaryofvariablebindings (Redview);    Nsdictionary *metric2 = nsdictionaryofvariablebindings (margin); VFL = @ "v:|-margin-[redview]-margin-|"; Set height 200, distance from top of nsarray *constraint2 = [nslayoutconstraint CONSTRAINTSWITHVISUALFORMAT:VFL options:    Nslayoutformatalignallcentery Metrics:metric2 Views:view2]; [Self.View Addconstraints:constraint2]; 

back to top 4.3. Example of the VFL: Display Side-by

 1 UIView *blueview = [[UIView alloc] init]; 2 Blueview.backgroundcolor = [Uicolor Bluecolor]; 3//Do not convert Autoresizingmask to AutoLayout constraint 4 blueview.translatesautoresizingmaskintoconstraints = no; 5 [Self.view Addsubview:blueview]; 6 7 UIView *redview = [[UIView alloc] init]; 8 Redview.backgroundcolor = [Uicolor Redcolor];  9//Do not convert Autoresizingmask to AutoLayout constraint, redview.translatesautoresizingmaskintoconstraints = NO;11 [Self.view addsubview:redview];12 13//pitch NSNumber *margin = @20;15//Add horizontal constraint NSString *vfl1 = @ "H:|-mar Gin-[blueview]-margin-[redview (==blueview)]-margin-| "; Nsdictionary *views = nsdictionaryofvariablebindings (Blueview,redview); Nsdictionary *mertics = NSDict Ionaryofvariablebindings (margin), nsarray *cons = [nslayoutconstraint constraintswithvisualformat:vfl1 options: Nslayoutformatalignallbottom | Nslayoutformatalignalltop metrics:mertics views:views];21 [Self.viewADDCONSTRAINTS:CONS];23//Add vertical pitch 24//height NSNumber *height = @100;26 NSString *vfl2 = @ "V:[blueview (h eight)]-margin-| "; Nsdictionary *views2 = nsdictionaryofvariablebindings (Blueview); Nsdictionary *mertics2 = NSDictionaryOfVaria Blebindings (margin,height) Nsarray *cons2 = [nslayoutconstraint constraintswithvisualformat:vfl2 options: Kniloptions metrics:mertics2 views:views2];30 [Self.view addconstraints:cons2];

iOS Development Learning note 039-autolayout Code implementation