Content Hugging Priority and Content Compression Resistance Priority resolution in AutoLayout for iOS development, autolayouthugging

Content Hugging Priority and Content Compression Resistance Priority resolution in AutoLayout for iOS development, autolayouthugging

The content of this blog is not too complex.AutoLayout. This blog is mainly used for some examples.AutoLayoutInContent Hugging PriorityAndContent Compression Resistance PriorityThese two priorities. Let's take a brief look at the meanings of these two priorities:

• Content Hugging Priority:"Content hug priority", Literally, there are two views. Whoever has a higher" content embraces priority "gives priority to the content. We will introduce it later based on some examples.

• Content Compression Resistance Priority: This priority is directly translated into Chinese as"Content compression resistance priority". That is, the larger the "content compression resistance priority" of the view, the more difficult the content in the view to be compressed. For a view with a lower priority, the content is compressed first. Later, we will also look at the specific performance of this priority through the corresponding instances.

Next, let's take a look at the application scenarios and functions of these two priorities through corresponding instances.

 

 

I. Summary

First, let's take a look at the first part.Content Hugging PriorityAndContent Compression Resistance PriorityThe twoAutoLayout. These two attributes can beStoryboardDirectly set in, select the control to be set, there is in the constraint column on the rightContent Hugging PriorityAndContent Compression Resistance Priority. The default value of Content Hugging Priority in both the horizontal and vertical directions is 250, whileContent Compression Resistance PriorityThe default value for the horizontal and vertical values is 750. We can set this value here.

　　

 

Of course, the priority of the two codes can also be set in the code. Below is the code to set the corresponding priority for our control and we can get the corresponding priority value. The Code is as follows:

　　

 

 

Ii. Content Hugging Priority

Next, let's take a look at the examples.Content Hugging PriorityUse Cases and usage methods.

If we have a requirement, we need twoLabelParallel Display.Label1AndLabel2.Label1AndLabel2The displayed content is obtained from the network, and the content length is not fixed. We require that Label1 be displayed first. That is to say, the Label1 width prevails, but Label1 has a maximum width. When Label1 shows the maximum width, Label1 content is compressed, and Label2 is displayed in the remaining part. Of course, when Label1 does not show the maximum value, Label2 is still displayed for the rest. Label2 will also be compressed if it is not fully displayed.

Next, add the corresponding constraints according to the above description. First, add the constraints for Label1, as shown below. We added Label1Top, Left, Width, and HeightFour constraints. These four constraints are enough to determine the location of the Label. Note that the Width of the Label is less than or equal to a value.Width <= 200. That is, the maximum Width of the Label is 200. The constraint is added as follows:

　　

 

Next, we will add constraints for the second Label. This is because the content of the Label on the right is displayed after the Label content is displayed.Left, Top, Right, and Height. Of course, Left is based on the Label on the Right, while Right is based on the parent view.

　　

 

We can see from the bottom that some constraints are red after they are added, which means there is a conflict of constraints. That is, the constraint currently added cannot be the current control position. From the constraints above, we can easily find that, horizontally, the width of the two labels is uncertain, so an error is reported.

　　

 

Click the red error Arrow below to view the error message. Click the red arrow at the bottom of the page to display the corresponding error message. In the following dialog box, we can see that the specific error message is"Content Priority Ambiguity", That is," The content priority is ambiguous ". Click the Red Circle to provide the corresponding solution:

 
 

  
  
Decrease horizontal hugging of "Second Label" from 251 to 250 to make it grow before other views。
 
 

In general, we need to reduce the horizontal hug priority of the Second Label, from 251 to 250. In other wordsContent Hugging PriorityAfter changing from 251 to 250, the problem below will be solved. "To make it grow before other views", Which means that the purpose of downgrading this priority is to make the view grow before other views.

The translation is a bit obscure. Let's make it clear. The reason for the following error is that the width of the two labels in the horizontal placement is not sure, and the priority of the content is the same, therefore, we cannot determine whether to determine the width of the first Label or the second Label before running.LabelThe solution isContent Hugging PriorityOf course, the Content Hugging Priority of the first Label is relatively high. Therefore, the Label on the left will first surround its content, that is, the Label will first determine its width. When the width of the Label on the left is determined, the width of the Label on the right is determined, so the error below is solved.

　　

 

Below is the LabelContent Hugging PriorityThe result after 250 is changed. We can see that the previous error was solved. Of course, you can alsoContent Hugging PriorityTo a higher priority than the right. Here we only discussContent HuggingThe priority in the horizontal direction. The priority in the vertical direction is the same, so we will not repeat it too much here.

　　

 

After the preceding constraints are added and the priority is added, let's take a look at the running effect. To dynamically check the effect of the constraintsLabelAfter a Step control is added, it is not difficult to see from the running effect below that the control is mainly used to control the size of the corresponding Label. The running effect below is as expected. LeftLabelThe length is the maximum value. When the Label on the left is displayed, the second space is displayed on the right.Label.

　　

 

 

3. Content Compression Resistance Priority (Content Compression Resistance Priority)

After talking about "content embraces priority", let's take a look.Content Compression Resistance Priority.Content compression resistance priorityIn the literal sense, the higher the priority, the greater the content compression resistance, that is, the harder the content to be compressed. When the two labels are displayed side by side and the screen is insufficient to show all the content of the two labels, the smaller the content compression resistance priority, the first compression.

We are still using the method described above. Starting with the error, let's take a look at this"Content Compression Resistance Priority". First, let the two labels be displayed side by side. The Label on the left is now called FirstLabel, And the Label on the right is called SecondLabel. The constraints we added for FirstLabel are:Top, Left, Height, and Width> = 50, The constraint we add for SecondLabel is Left (with the First Right as the reference ),Top, Right, Height, and Width> = 102. The following figure shows the effect after the preceding constraints are added:

　　

 

After adding the above constraints, we can see in the Storyboard that an error is reported. The error cause is also clear."Content Priority AmbiguityIt is also a content priority conflict. In the vernacular, the width of the two labels cannot be determined in the horizontal direction. Of course, clicking the red dot will also give the corresponding error solution:

 
 

  
  
Decrease horizontal compression resistance of "Bottom Label2" from 750 to 749 to make it get clipped before other views。
 
 

The general meaning is to reduce the horizontal compression resistance of the second Label and change the current 750 to 749, so that SecondLabel is cropped before other views. If you click "Change Priority" in the prompt, the error will be fixed.

　　

 

To intuitively check the effect of this priority, we added a Switch to modify the priority of the two labels. When the Switch is turned on, the compression resistance of FirstLabel is higher than SecondLabel, and the Switch is turned off. The Code is as follows:
　　

 

After modifying the corresponding errors and adding the corresponding code, let's take a look at the running results. When the switch is enabled, the compression resistance on the front side is greater than the Label on the back side. When the switch is off, the anti-resistance priority behind the switch is greater than the front side. The running effect is as follows.

　　

 

In the preceding exampleContent Hugging PriorityAndContent Compression Resistance PriorityWith an intuitive feeling, this blog will come here first. Below is the sharing link of the above example on Github, as shown below:

Github sharing link:Https://github.com/lizelu/AutoLayoutContentHuggingAndCompressionResistance