About onlineAuto Layout“, but always feel that some content is not clear. So in this post, I’ll go through a demoAuto LayoutA few of the most important concepts that are easily overlooked

Effect of the demo

The effects to be achieved by constraints in demo are as follows:

  1. backgroundView width>=60;
  2. The width of the backgroundView increases as the content in the Label increases
  3. Margin >=30 for backgroundView and its superView. When the content of the Label is too long, the ellipsis is displayed.

concept

To implement the effects in the demo, you need to know the following concepts:

1. Constraint equalities (let’s call them Constraint equalities) : This is a common Constraint type. Without further ado, here are a few examples:

Red. Top = 1.0 * superview. top + 20.0 superview. bottom = 1.0 * Red Red. Bottom = 1.0 * Blue. Bottom + 0.0Copy the code

(2) Constraint Inequalities specify a range rather than an exact value.

// Set the minimum width view. width >= 0.0 * NotAnAttribute + 40.0 // Set the maximum width view. width <= 0.0 * NotAnAttribute + 280.0Copy the code

3, Constraint Priorities are values ranging from 0 to 1000. When two constraints conflict, the constraint with a higher priority is retained and the constraint with a lower priority becomes invalid.

Intrinsic Content Size: Some views can be set to their Intrinsic Content Size. The Intrinsic Content size of a view is as follows: UILabel,UIButton, etc.

5, Content-stretch priorities (default 250) : This priority depends on the intrinsical content Size. If the Intrinsic Content Size width of a Label is 50, add a constraint width=60 (default priority is 1000) and the Label will be stretched. If the priority of constraint width=60 is set to a value less than 250, the Label will not be stretched. 6, Compression -resistance priorities (default 750) : This priority is also related to the Intrinsic Content Size. If the Intrinsic Content Size width of a Label is 50, add a constraint width=40 (default priority is 1000) and the Label will now be compressed. If the priority of the constraint width=40 is set to a value less than 750, the Label will not be compressed. It can be seen that content-Hugging priorities and compression-resistance priorities are used to resist the changes of viewIntrinsic content Size due to other constraints.

Having introduced the concepts above, let’s use them for the demo above.

1, New project, open storyboard. Add backgroundView (inherited from UIView), set the background color to gray and add horizontal center and vertical center constraints. The constraint error occurs because the backgroundView only sets position, not size. Don’t worry, this problem will be solved in a minute;

The constraints are as follows:


View hierarchy is as follows:

Add the following constraints:

There is no error in the constraint.

3. At this time, by adding text to the Label, the backgroundView will increase accordingly (only the horizontal direction is analyzed). Why does it increase? This is because the Intrinsic Content Size is determined by the text of the Label. If the text increases, the Intrinsic Content Size increases. Margin of Label and backgroundView is 10. Therefore, according to this series of relationships, text is added to the Label, and the backgroundView will increase accordingly.

4. There is a problem that when there is too much text in the label, the width of the backgroundView will exceed the scope of its parent view, which is obviously not good. Add a constraint to have a minimum margin between the backgroundView and its parent view. That’s where the constraint inequality comes in. A constraint inequality can specify a range rather than an exact number. Look at the following example.

Add the following constraint so that the margin between backgroundView and superView is at least 30. When the content in the label is too long, the content is compressed. But Why?

5. The width of backgroundView increases as the content in Label increases. When the margin of backgroundView and its superView is 30, Increasing the width of the backgroundView will cause the constraint to conflict with the previous “margin of 30 between the backgroundView and superView” constraint. So how does StroyBoard resolve conflicts? Yeah, priority. The priority of the constraint ‘margin minimum 30 between backgroundView and superView’ is 1000, which is the maximum priority. The default anti-compression priority of Label is 750, 1000>750, which can be compressed (part of the content is omitted). If you swap these two priorities, there will be no margin between backgroundView and superView.

6. When a letter is in the label, it looks like this. So ugly…

We set a minimum width constraint on the backgroundView. We set the backgroundView width =60 constraint and set the priority to 996. Of course, you can also use a constraint like width >=60. To demonstrate priority) now looks like this:

Another problem… Although backgroundView width=60 does work, the backgroundView width does not increase as the Label content increases. Again, it’s a matter of priorities. BackgroundView width=60; backgroundView width= 996,996 >750; Now just make the compression priority of the Label greater than the priority of backgroundView width=60.

7. As for the tensile priority, I did not think of a good example, so I will not demonstrate it.

conclusion

A layout effect can be achieved through a variety of constraints, the key is clear thinking, step by step. Reference materials, of course, the official website. Hope to help you, if it is helpful to give a like it.