Autolayout ~ Code Implementation

Generally, there are four steps to add code constraints.

1. Create a view to be constrained and set the translatesautoresizingmaskintoconstraints = No of the view (if this constraint is not set, it will not take effect)

2. Add the view to its parent View

3. create constraints

4. Add Constraints

To use constraints, you need to add constraints after the view relationships (the relationships added to the parent view or other view trees) are processed. Otherwise, you may try to get confused and the console will output warning information.

 

You can use nslayoutconstraint to add code constraints,

/* Create an array of constraints using an ASCII art-like visual format string. */+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;/* This macro is a helper for making view dictionaries for +constraintsWithVisualFormat:options:metrics:views:.   NSDictionaryOfVariableBindings(v1, v2, v3) is equivalent to [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil]; */#define NSDictionaryOfVariableBindings(...) _NSDictionaryOfVariableBindings(@"" # __VA_ARGS__, __VA_ARGS__, nil)UIKIT_EXTERN NSDictionary *_NSDictionaryOfVariableBindings(NSString *commaSeparatedKeysString, id firstValue, ...) NS_AVAILABLE_IOS(6_0); // not for direct use/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"  If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute. */+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

The above are two types of creation in the header file

The first is to create a set of constraints, which are called visual format language provided by Apple.

The second is to create a constraint. The first parameter is to specify the view to be constrained, and the second parameter is the attribute to be constrained (an enumeration type ), the third parameter is the relationship between the view attribute to be constrained and the reference view attribute (equal, large or small). The fourth parameter is the reference view, the fifth parameter is the reference attribute of the reference view. The sixth parameter is a number to be multiplied, and the seventh parameter is the value of the constraint.

The formula in the comment can be used to calculate the relationship between the view to be constrained and the reference view. view1.attr1 = view2.attr2 * multiplier + constant

 

The following is a simple code for creating a view and adding constraints. you can stick it and run it on your own.

[Super viewdidload]; // 1. create a view uibutton * button = [uibutton buttonwithtype: uibuttontyperoundedrect]; [Button setbackgroundcolor: [uicolor greencolor]; // 1.1 set expiration to no to enable autolayout to take effect. translatesautoresizingmaskintoconstraints = no; // 2. add to parent view [self. view addsubview: button]; // 3. create a constraint // The left boundary of the 3.1 button is 100 from the left boundary of the top view, and the distance from nslayoutconstraint * conx = [nslayoutconstraint constraintwithitem: button attribute: nslayoutattriattrieleft relatedby: custom. view attribute: self. view attribute: Custom multiplier: 1.0 constant: 100]; // The width of the 3.3 button is fixed to 100 nslayoutconstraint * buttonw = [nslayoutconstraint constraintwithitem: button attribute: Your relatedby: Your toitem: Nil attribute: 0 multiplier: 1.0 constant: 100]; // The fixed height of the 3.4 button is 100 nslayoutconstraint * buttonh = [nslayoutconstraint constraintwithitem: button attribute: FIG: Nil attribute: 0 multiplier: 1.0 constant: 100]; // 4 Add constraints to the view [self. view addconstraint: conx]; [self. view addconstraint: cony]; [Button addconstraint: buttonw]; [Button addconstraint: buttonh];

 

You can see that some constraints in the Code are added to the parent view, and some are added to the button.

If you use IB to add constraints, you can see that if the constraints are only related to the control itself, then the constraints are generally added to the control itself (or to the parent control, because the parent control can constrain its own child control). If it is a relationship constraint between the control and the parent control, this must be added to the parent control (otherwise it will crash)

If there is no parent-child relationship between two views, then this constraint needs to be added to their common superview. superview to ensure that it is their common parent-parent view.

If the created constraint is a constraint between F and G, you must add the constraint to the parent view a of C or the upper view of C to ensure that the program runs normally.

Because only the C or its parent view can view both F and G and constrain them.

 

 

If you do not learn Apple's visual format and the company does not allow the use of IB, you need to write the constraints one by one. In this case, it is quite painful.

Fortunately, there is a lightweight layout framework called masonry on GitHub. If you are interested, you can study it ~

 

Autolayout ~ Code Implementation