Pure Code Automatic Layout

Principle: After IOS6.0, Apple optimized the layout of the UI interface, proposed the concept of automatic layout, and compared with the previous autoresizing more powerful. The child view is based on the automatic layout display of the parent view. Are the parent view to add constraints to the child view.

The main point here is the implementation of the automatic layout view through code.

There are two ways to add constraints that are commonly used in your code:

1.-(void) AddConstraint: (Nslayoutconstraint *) constraint Ns_available_ios (6_0);

2.-(void) addconstraints: (Nsarray *) Constraints Ns_available_ios (6_0);

<</span>

Use this UIView property to adjust the layout of the sub-view before using automatic layout.

-(BOOL) translatesautoresizingmaskintoconstraints Ns_available_ios (6_0); Default YES

It needs to be set to No;

>

The following is a simple example to illustrate:

UIView *v1 = [[UIView alloc] Initwithframe:cgrectzero];
V1.translatesautoresizingmaskintoconstraints = NO;
V1.backgroundcolor = [Uicolor Redcolor];
[Self.view ADDSUBVIEW:V1];

UIView *v2 = [[UIView alloc] Initwithframe:cgrectzero];
V2.backgroundcolor = [Uicolor Graycolor];
V2.translatesautoresizingmaskintoconstraints = NO;
[Self.view addsubview:v2];//Add two child views that allow automatic layout

[Self.view addconstraint:[nslayoutconstraint constraintwithitem:v1
Attribute:nslayoutattributewidth
relatedby:nslayoutrelationequal
ToItem:self.view
Attribute:nslayoutattributewidth
multiplier:1.0
constant:0]];/ /Set the width of the child view to the same width as the parent view

[Self.view addconstraint:[nslayoutconstraint constraintwithitem:v1
Attribute:nslayoutattributeheight
relatedby:nslayoutrelationequal
ToItem:self.view
Attribute:nslayoutattributeheight
multiplier:0.5
constant:0]];/ /sets the height of the child view to be half the height of the parent view

   [self.view Addconstraints:[nslayoutconstraint constraintswithvisualformat:@ "H:|-0-[v1][v2 (==V1)]-0-|" options:0 Metrics:nil views:views]];//via addconstraints Add control of V1 in horizontal direction--the distance to the left of the parent view is 0 (the distance is 0) and the horizontal width and v1 of the V2 are set to the same
     

&NBSP;&NBSP;&NBSP;&NBSP;
    [self.view Addconstraints:[nslayoutconstraint constraintswithvisualformat:@ "v:|-0-[v1]-0-[v2]-0-|" options:0 Metrics:nil views:views]];//The last is a vertical layout two child view

This makes it possible to achieve up to two view, each of which accounts for half. The layout is also handled automatically when the screen is rotated. This looks like a lot of code, but it can accommodate a wide range of resolution screens. Do not rule out later Apple out of larger and more resolution of the phone.

About Constraintswithvisualformat: Function Description:

Constraintswithvisualformat: The parameter is nsstring type, specifies the attribute of the Contsraint, is the qualification of the vertical direction or the horizontal direction, the parameter definition is generally as follows:

v:|-(>=xxx): Indicates a distance greater than, equal to, or less than superview in the vertical direction

If you want to define a horizontal direction, change V: to H: you can

The height/width of the current view/control is set in the brackets in the back-[] bracket.

Options: The value of the dictionary type, where the value is typically selected in a system-defined enum

Metrics:nil; general nil, parameter type nsdictionary, external incoming//measurement standard

Views: Is the binding view added to the nsdictionary above

Note Here is the difference between addconstraints and AddConstraint, an added parameter is Nsarray, one is Nslayoutconstraint

Usage rules

|: Represents the parent view

-: Indicates distance

V:: Indicates vertical

H:: Indicates level

>=: Indicates that the view spacing, width, and height must be greater than or equal to a value

<=: Indicates that the view spacing, width, and height must be small or equal to a value

= =: Indicates that the view spacing, width, or height must be equal to a value

@: >=, <=, = = limit maximum of 1000

1.|-[view]-|: The view is within the left and right edges of the parent view

2.|-[view]: View is in the left edge of the parent view

3.| [view]: Align the view to the left of the parent view

4.-[view]-: Setting the width height of the view

5.|-30.0-[view]-30.0-|: Indicates left and right distance from parent view 30

6.[view (200.0)]: Indicates a view width of 200.0

7.|-[view (View1)]-[view1]-| : Represents the width of the view and is within the left and right edges of the parent view

8. V:|-[view (50.0)]: view height is 50

9:v:|-(==padding)-[imageview]->=0-[button]-(==padding)-| : Represents the distance from the parent view

For padding, the two view spacing must be greater than or equal to 0 and the distance from the bottom parent view is padding.

: [Wideview (>[email protected]): The width of the view is at least 60 and cannot exceed 700

11: If no declaration direction defaults to horizontal

Plain code Automatic layout