Three ways to set AutoLayout-NSLayoutConstraint code, nslayoutconstraint

Three ways to set AutoLayout-NSLayoutConstraint code, nslayoutconstraint

AutoLayout is a new layout technology introduced by Apple to replace autoresizing from IOS 6. There are three ways to set AutoLayout. Let me explain it one by one.

Before talking about the three setting methods, let's briefly talk about what actions autolayout can set.

1. View Size (absolute view size ).

2. View position (The position of the view relative to the parent view or sibling view ).

3. View alignment (relative to parent view or relative to sibling view ).

As you can see, autolayout is much more flexible than autoresizing technology. This technology has many layout constraints. In this article, we will use code to set AutoLayout. The Code will add the autoLayout view to use this method.

+ (Instancetype) attributes :( id) view1 attribute :( NSLayoutAttribute) attr1 relatedBy :( partial) relation toItem :( id) view2 attribute :( NSLayoutAttribute) attr2 multiplier :( CGFloat) multiplier constant :( CGFloat) c;

This method satisfies a mathematical relationship.

Item1 = (>=, <=) multiplier * item2 + constant.

Parameter description:

View1: the first view is item1.

Attr1: the attribute selected for the first view.

Relation: Intermediate relationship (=, >=, <=)

View2: The second view is item2.

Attr2: the attribute selected for the second view.

C: Changshu constant.

For a simple example, we want to set the width of the first view to twice the width of the second view. We can write as follows:

[Self. view addConstraint: [NSLayoutConstraint constraintWithItem: view2 attribute: NSLayoutAttributeWidth relatedBy: inclutoitem: view1 attribute: NSLayoutAttributeWidth multiplier: 2 constant: 0];

We can see that item1 is view1, item2 is view2, attr1 is attribute: nslayoutbutewidth, attr2 is attribute: NSLayoutAttributeWidth, relation is NSLayoutRelationEqual, mutiplier is 2, and constant is 0.

The formula above is as follows:

The first view (width) = 2 * The second view (width) + 0

The following are all controllable attributes:

NSLayoutAttributeLeft	Left of View
NSLayoutAttributeRight	Right of View
NSLayoutAttributeTop	Top View
NSLayoutAttributeBottom	Bottom of the View
NSLayoutAttributeLeading	Front side of the View
NSLayoutAttributeTrailing	Behind the view
NSLayoutAttributeWidth	View width
NSLayoutAttributeHeight	View height
NSLayoutAttributeCenterX	X value of the midpoint of the View
NSLayoutAttributeCenterY	Y value of the midpoint in the view
NSLayoutAttributeBaseline	Baseline of the View
NSLayoutAttributeNotAnAttribute	No attribute

 

　　

 

 

 

 

 

 

 

 

 

 

 

Here we will explain the frontend NSLayoutAttributeLeading and the backend nslayoutbutetrailing. The frontend and backend are not always left and right. In some countries, the frontend and backend are left, so this setting is for international consideration. Also, the view baseline NSLayoutAttributeBaseline usually refers to the place where the text is placed at the bottom of the view.

Next let's take a look at a demo.

We want to center two views in the Y direction. The first view is 20 away from the left edge. The first view is larger than the second view and the distance from the X direction is 100.

 1 UIView *view1 = [[UIView alloc] init]; 2     UIView *view2 = [[UIView alloc] init]; 3     [self.view addSubview:view1]; 4     [self.view addSubview:view2]; 5     view1.translatesAutoresizingMaskIntoConstraints = NO; 6     view2.translatesAutoresizingMaskIntoConstraints = NO; 7     view1.backgroundColor = [UIColor blueColor]; 8     view2.backgroundColor = [UIColor grayColor]; 9     //set view1 height and width10     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];11     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];12     //set view2 height and width13     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];14     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];15     //set relationship between view1 and view216     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeRight multiplier:1 constant:100]];17     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];18     //set relationship between topView and view119     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];20     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

Let's take a look at this code.

Note that the translatesAutoresizingMaskIntoConstraints attribute of the view is set to NO in rows 5 and 6, which means that the height and width of the original settings are discarded by autoLayout. This attribute must be set for views using autolayout.

The width and height of view1 are set in rows 10 and 11. You may have found that item2 is nil and attrbute is attribute: NSLayoutAttributeNotAnAttribute. In this way, we will understand the formula.

Item1 = m * 0 + constant. That is, directly set the width and height of this view.

Rows 13 and 14 are set to the same width and height as view1. Here, careful students may find that the object to add constraints is not like view1 when the width is set above, they share the parent view self. view. Because there is such a rule in autolayout, if it is a one-dimensional constraint, that is, only for its own constraints, then it is directly added to the view. If they are binary constraints, they must be added to their common parent view.

Lines 15 and 16 are used to set the relationship between view1 and view2. Set view1 and view2 to have the same Y, and view2 is 100 away from the right side of view1.

At the end of rows 18 and 19, we set the distance from the left side of view1 to the left side of the parent view, and Y of view1 is equal to the midpoint value of the parent view Y.

Through the above settings, the running result is:

View 1 is located at 20 to the left, and view 1 is centered at Y and 100 apart.