[New Learn] AutoLayout Investigation based on code

Code HTTPS://GITHUB.COM/XUFENG79X/TESTAUTOLAYOUT-CODE2

1. Introduction

Previous article [New Learn]autolayout survey based on IB tells how to add constraints to a control on an IB basis. This article focuses on how to manipulate AutoLayout in the case of code

2. Constraint Summary:

The main constraints in the previous article were:

　　

Summarized as:

1. Two view individual and edge interval 20

2. Two view and top edge 30

3. Two separated by 80

4. Two view's aspect ratio remains constant 1:1

5. The width of the two view remains equal

3. Using the VFL language

The VFL is an abbreviation for Visual format language, meaning a visual formatting language. He is not a computer language, it should be considered as a data description format.

Too much for the VFL does not explain, here just to give a few?? ：

@" h:|-20-[redview]-80-[blueview]-20-| "

The above string is both an expression format for the VFL and represents the following two horizontal constraints:

1. Two view individual and edge interval 20

3. Two separated by 80

　　

4. Code expression constraints

Two steps to create constraints and set constraints

　　1. Create a constraint　

    //constraint setting using the VFL description//1. Create a name map so that the [view name] in the VFL can be mapped to a true view instance imageNsdictionary *namemap = @{@"Redview": Redview,@"Blueview": Blueview}; //2.1 Creating a constraint-horizontal constraint using the VFL descriptionNsarray *horizontalconstraints = [Nslayoutconstraint constraintswithvisualformat:@"h:|-20-[redview]-80-[blueview]-20-|"Options0Metrics:nil Views:namemap]; //2.2 Creating constraints with the VFL description-vertical constraintsNsarray *verticalredviewconstraints = [Nslayoutconstraint constraintswithvisualformat:@"V:|-30-[redview]"Options0Metrics:nil Views:namemap]; Nsarray*verticalblueviewconstraints = [Nslayoutconstraint constraintswithvisualformat:@"V:|-30-[blueview]"Options0Metrics:nil Views:namemap];

The above constraints have in fact made clear the horizontal and vertical constraints, which have already been expressed in the following several constraints:

1. Two view individual and edge interval 20

2. Two view and top edge 30

3. Two separated by 80

However, one drawback of using the VFL language is that it is not possible to implement constraints that need to be computed between the view or itself, such as the remaining two constraints that cannot be defined by the VFL language:

4. Two view's aspect ratio remains constant 1:1

5. The width of the two view remains equal

In addition to the Constraintswithvisualformat method, Nslayoutconstraint also gives another way to solve this problem:

    //3. Add two view to equal width constraintNslayoutconstraint *widthconstraint =[Nslayoutconstraint Constraintwithitem:redview attribute:nslayoutattributewidth Relatedby:nslayoutrelationequal Toitem:blueview Attribute:nslayoutattribu Tewidth Multiplier:1.0fconstant:0]; //4. Add two view to increase the length and width ratio constraintsNslayoutconstraint *redratioconstraint =[Nslayoutconstraint Constraintwithitem:redview                                     Attribute:nslayoutattributewidth relatedby:nslayoutrelationequal                                     Toitem:redview Attribute:nslayoutattributeheight Multiplier:1.0/1.0 //Aspect ratio:1*height = 1*widthconstant0.0f]; Nslayoutconstraint*blueratioconstraint =[Nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributewidth Relatedby:nslayoutrelatione Qual Toitem:blueview Attribute:nsl Ayoutattributeheight Multiplier:1.0/1.0 //Aspect ratio:1*height = 1*widthconstant0.0f];

The parameters of this method can be expressed in the following image:

　　

　2. Setting constraints　

    // 5. Setting Constraints     [Self.view addconstraints:horizontalconstraints];    [Self.view addconstraints:verticalredviewconstraints];    [Self.view addconstraints:verticalblueviewconstraints];    [Self.view Addconstraint:widthconstraint];    [Redview Addconstraint:redratioconstraint];    [Blueview Addconstraint:blueratioconstraint];

As above we set the corresponding constraint to the corresponding view, but there is a problem, the above constraints set the view is not the same, then how do we know the current constraint set to which view?

The general rule is: 1. When constraints constrain only themselves, the constraints are set to themselves, such as the 4 and 5 constraints.

2. When a constraint involves a relationship between multiple view, the constraint is set to their common parent view (possibly a common ancestor). such as 3 constraints.

3. When the constraint involves itself and its view, the constraint is set to the parent view, such as the constraint

We can also get a glimpse of this in the IB-based Operations page:

　　　

Above.

[New Learn] AutoLayout Investigation based on code