IOS, auto layout autoresizing and auto LAYOUT,VFL language

1. Using autoresizing

2. Using AutoLayout

3.VFL language (Visual format Language: Visual formatting language)

Using autoresizing

Click on the xib file, remove the use of AutoLayout (AutoLayout and only use one)   shown in 1. Represents the view distance from the parent containerTop ofDistance fixed 2. Represents the view distance from the parent containerleftDistance fixed 3. Represents the view distance from the parent containerBottomDistance fixed 4. Represents the view distance from the parent containerRightDistance fixed 5. The middle horizontal line indicates that the view becomes wider (proportional) as the parent container becomes wider (proportionally) 6. The middle vertical lines indicate that the view becomes taller (proportionally) as the parent container autoresizingLimitationsIt is the relationship between the parent view and the child view that can only be represented, not the sibling view. Inability to handle complex layouts

Using AutoLayout

2 Core concepts of AutoLayout: references, constraints

Attention:

If you use AutoLayout to constrain the control, the frame fails, and the official does not recommend that we set the frame again.

If you use AutoLayout to constrain a control, and we used to use the frame constraint control, you must set the width/height /x/y, and if a constraint is missing, you will get an error. An error can cause some unknown bugs to be raised .

If there is a red error: Represents a missing constraint, or a constraint has a conflict (constraint can be added repeatedly)

If there is a yellow warning: represents the current position size and the constraint's position size is different

When using AutoLayout, it is best to give each control a name that is easy to read

When using AutoLayout to constrain a control to another control, be sure to surround the other control

IOS8, by default, the left and right sides will leave a distance

Xib edit page AutoLayout related constraint options

After setting the constraint in each size, look at the effect in the screen

The following sets the red view to half the width of blue.

Constrain the red and blue widths first, then check the constraint, change the Write value (multiplier multiplier), then red is half the width of blue;(Note: A similar constraint can be performed in the form of a horizontal center, vertically centered, etc.)Priority priorities are generally not changed (priority is 1000, the higher precedence is satisfied)

The same width can be done the same way

Code Implementation AutoLayout (too cumbersome, not mind in development) Code Implementation AutoLayout point of attention       * To disable the Autoresizing function, set the following attribute of view to No;View.translatesautoresizingmaskintoconstraints=no;* Before adding constraints, make sure that the controls are already on their parent controls. (add control before adding a constraint) * No more frame for view the code realizes the AutoLayout step* Create specific constraint objects using the Nslayoutconstraint class. * Add constraint objects to the corresponding view-(void) AddConstraint: (Nslayoutconstraint *) constraint;-(void) addconstraints: (Nsarray *) constraints;

The following rules are followed when you add a target view constraint. (referencing this rule when adding constraints through code)

1) Add a constraint to the two same-level view to their parent view

2) for the constraint relationship between the two different levels of view, add to their nearest common parent view (the parent view is different, continue to look for parent view ...)

3) for a hierarchical relationship between the two view constraints, added to the higher level of the parent view

Example:

-(void) Viewdidload {

[Super Viewdidload];

//Add 2 controls to a parent control

Add Blue View

UIView *blueview=[[uiview alloc] init];

Blueview.backgroundcolor=[uicolor Bluecolor];

//Disable autoresizing

Blueview.translatesautoresizingmaskintoconstraints=no;

[Self.view Addsubview:blueview];

//Add Red View

UIView *redview=[[uiview alloc] init];

Redview.backgroundcolor=[uicolor Redcolor];

//Disable autoresizing

Redview.translatesautoresizingmaskintoconstraints=no;

[Self.view Addsubview:redview];

Add constraint

//Add blue view distance from the left side of the parent control is fixed to x

/*

item = = First item requires a control to set constraints

attribute = = constraints that need to be set

Relatedby = = Relation equals

Toitem = = Second Item referenced control

attribute = = constraints that need to be set

Multiplier = = Multiplier times

Constant = = constant Plus

*/

//Blue view left is equal to the left of the parent control multiplied by 1 plus

Nslayoutconstraint *leftcos=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributeleft Relatedby:nslayoutrelationequal toItem:self.viewattribute:NSLayoutAttributeLeft multiplier:1.0f constant:20];

[Self.view Addconstraint:leftcos];

//Add blue View distance fixed to 20 width from the right side of the parent control

Nslayoutconstraint *rightcos=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributeright Relatedby:nslayoutrelationequal toItem:self.viewattribute:NSLayoutAttributeRight multiplier:1.0f constant:-20];

[Self.view Addconstraint:rightcos];

//Add blue view distance from the top edge of the parent control is fixed to Y

Nslayoutconstraint *topcos=[nslayoutconstraint Constraintwithitem:blueview Attribute:nslayoutattributetop Relatedby:nslayoutrelationequal toItem:self.viewattribute:NSLayoutAttributeTop multiplier:1.0f constant:20];

[Self.view Addconstraint:topcos];

//Add Blue View height 50 height

Nslayoutconstraint *heightcos=[nslayoutconstraintconstraintwithitem:blueview attribute: Nslayoutattributeheightrelatedby:nslayoutrelationequal ToItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f CONSTANT:50];

[Blueview Addconstraint:heightcos];

//SET red constraint

The red height is as high as blue

Nslayoutconstraint *redheightcos=[nslayoutconstraintconstraintwithitem:redview attribute: Nslayoutattributeheightrelatedby:nslayoutrelationequal Toitem:blueview attribute: nslayoutattributeheightmultiplier:1.0f constant:0];

[Self.view Addconstraint:redheightcos];

//Red right and blue right align X

Nslayoutconstraint *redrightcos=[nslayoutconstraintconstraintwithitem:redview attribute: Nslayoutattributerightrelatedby:nslayoutrelationequal Toitem:blueview Attribute:nslayoutattributerightmultiplier : 1.0f constant:0];

[Self.view Addconstraint:redrightcos];

//red top and blue bottom distance fixed

Nslayoutconstraint *redtopcos=[nslayoutconstraint Constraintwithitem:redview Attribute:nslayoutattributetop Relatedby:nslayoutrelationequal Toitem:blueview attribute:nslayoutattributebottom multiplier:1.0f constant:20];

[Self.view Addconstraint:redtopcos];

The red width is equal to half the blue width

Nslayoutconstraint *redwidthcos=[nslayoutconstraintconstraintwithitem:redview attribute: Nslayoutattributewidthrelatedby:nslayoutrelationequal Toitem:blueview Attribute:nslayoutattributewidthmultiplier : 0.5f constant:0];

[Self.view Addconstraint:redwidthcos];

}

VFL language (Visual format Language: Visual formatting language)

The VFL language is an abstract language that Apple has introduced to simplify AutoLayout coding

VFL example

• H:[cancelbutton (]-12-[acceptbutton) (50)]

• Canelbutton width 72,acceptbutton Width 50, horizontal spacing between them 12

• H:[wideview (>[email protected])

• Wideview width greater than or equal to 60point, the constraint priority is 700 (the priority is the maximum of 1000, the higher the precedence of the constraint is satisfied first)

• V:[redbox]-[yellowbox (==redbox)]

• In the vertical direction, there is a redbox, immediately below a height equal to Redbox height Yellowbox

• H:|-10-[find]-[findnext]-[findfield (>=20)]-|

• Horizontally, the find distance is the default interval width of 10 for the left edge of the parent view, followed by the FindNext distance from the find interval to the default width of 0, and then the FindField with a width of not less than 20, which is the default width of FindNext and the right edge of the parent view. (Vertical bar "|" indicates the edge of the Superview)

Complete the same demo effect with the above code implementation AutoLayout

-(void) Viewdidload {

[Super Viewdidload];

//Add 2 controls to a parent control

Add Blue View

UIView *blueview=[[uiview alloc] init];

Blueview.backgroundcolor=[uicolor Bluecolor];

//Disable autoresizing

Blueview.translatesautoresizingmaskintoconstraints=no;

[Self.view Addsubview:blueview];

//Add Red View

UIView *redview=[[uiview alloc] init];

Redview.backgroundcolor=[uicolor Redcolor];

//Disable autoresizing

Redview.translatesautoresizingmaskintoconstraints=no;

[Self.view Addsubview:redview];

Add constraint

/*

VISUALFORMAT:VFL statements

Options: Alignment

The value of the variable used in the METRICS:VFL statement

The controls used in the VIEWS:VFL statement

*/

Blueview 20 distance from each side of the horizontal direction, set x value and width

Nsarray *blueviewhorizontal=[nslayoutconstraintconstraintswithvisualformat:@ "H:|-20-[blueView]-20-|" options:0 metrics:nilviews:@{@ "Blueview": Blueview}];

[Self.view Addconstraints:blueviewhorizontal];

//blueview vertical distance from the top 20 distance, height, Blueview bottom distance redview is 20 distance redview height ==blueview; and set red and blue right align

Nsarray *blueviewvertical=[nslayoutconstraintconstraintswithvisualformat:@ "V:|-20-[blueview ()]-20-[redView (= = Blueview)] "Options:nslayoutformatalignallright metrics:nilviews:@{@" Blueview ": blueview,@" RedView ": RedView}];

[Self.view addconstraints:blueviewvertical];

//Note: The multiplication method is not supported in the VFL statement and is to be implemented with the AutoLayout code

Nsarray *redviewhorizontal=[nslayoutconstraint constraintswithvisualformat:@ "H:[redview (==blueView)]" options:0 Metrics:nil views:@{@ "Blueview": blueview,@ "Redview": Redview}];

[Self.view Addconstraints:redviewhorizontal];

Nslayoutconstraint *redvieww=[nslayoutconstraint Constraintwithitem:redview Attribute:nslayoutattributewidth Relatedby:nslayoutrelationequal Toitem:blueview attribute:nslayoutattributewidth multiplier:0.5 constant:0];

[Self.view ADDCONSTRAINT:REDVIEWW];

}

IOS, auto layout autoresizing and auto LAYOUT,VFL language