Disadvantages of traditional layout

When two labels are placed on the same row, the traditional way is to fix the width of one label. The other label sets the left and right constraints to stretch and compress with the screen width. In the following example, I add a 60-width constraint to the commodity quantity Label. Then, let’s look at the problem of doing this first

  • In extreme cases, when the quantity of goods is very large, it will not show up.

  • When the name of the item is very long, the remaining width of the number of items appears to be a waste of space (the amount of waste depends on the difference between the maximum and minimum number of specific items)

How to solve

To solve these two problems, you need to have the width of the two labels automatically adjust to some extent. So how much is this adjustment?

First of all, it has to do with business. At least one text cannot be fully displayed when the sum of the width and spacing is greater than the screen. In general, you don’t want both texts to be incomplete (which is too showy), so the trade-off is up to the business. In this example, the name of the item and the quantity must be visible first.

When the sum of the width and spacing of two texts is smaller than that of the screen, it is no surprise that both texts are displayed. When both are displayed, should I stretch one of the labels or not stretch any labels? That’s not important. What’s important is that constraints are convenient.

It is an error to remove the width of the item quantity Label (note that the overall width is less than the screen width) because the system does not know how to stretch or compress to meet the overall constraints.

Check for quick fixes for constraint errors, which presumably mean that the horizontal size of the Label decreases from 251 to 250 to be lower than the other views.

So what is horizontal Hugging? Let’s go back to the basics of the AutoLayout document

[AutoLayout Guide: Anatomy of a Constraint] (developer.apple.com/library/arc…).

The basics

The Intrinsic Content Size section has the following figure:

Content Hugging and Content Compression Resistance are short for CHCR

The corresponding explanation is rather lengthy, directly look at the equivalent constraints to the point of reality

// Compression Resistance view. height >= 0.0 * NotAnAttribute + IntrinsicHeight view. width >= 0.0 * NotAnAttribute + IntrinsicHeight view. width IntrinsicWidth // Content IntrinsicView. width <= 0.0 * NotAnAttribute + intrinsicview. width <= 0.0 * intrinsicView. width NotAnAttribute + IntrinsicWidthCopy the code

These two constraints exist simultaneously in every view, and the AutoLayout designers gave a default priority to avoid conflicts. By default, views use a 250 priority for their content hugging, and a 750 priority for their compression resistance. This default value can be seen in the Interface Builder size Inspector.

Compression Resistance Priority
Content Hugging Priority

With these two properties in mind, let’s go back to the error. It seems that the Compression Resistance Priority and Content Hugging are the same for both the product name and quantity, and AutoLayout doesn’t know which Label to stretch or compress.

So why does Interface Builder prompt us to modify Content Hugging rather than Compression Resistance Priority? The relevant instructions and explanations are not found in the documentation. But I tried, and when the sum of text length and spacing exceeds the screen width, the Interface Builder prompts me to change Compression Resistance Priority. So which attribute is in effect in the corresponding case, just think about it with your toes.

conclusion

Finally, we come back to the requirements: the number of items is kept fully displayed and the name of the item is maximized. The conclusion is that both the Compression Resistance Priority and Content Hugging Label are set to be higher than the brand name. The effect is as follows:

This paper takes two horizontal labels as an example. Vertical, multiple or other controls with variable width and height of content can be constrained in this way. I’ll leave it up to you to figure it out.

Add an unexpected case where an upper limit of width can be added to the number of items.

# # # # out? Where’s the ### code? Where’s the ## code? Where’s the code?

Show the code

Nib can implement, the code can implement if not, feel free to come to me. I ~

The code implementation is also very simple, several methods of UIView

- (UILayoutPriority)contentHuggingPriorityForAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);

- (UILayoutPriority)contentCompressionResistancePriorityForAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
Copy the code

And two enumerations corresponding to the parameters

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0,
    UILayoutConstraintAxisVertical = 1
};
Copy the code
typedef float UILayoutPriority NS_TYPED_EXTENSIBLE_ENUM;
static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000; // A required constraint.  Do not exceed this.
static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750; // This is the priority level with which a button resists compressing its content.
static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250; // This is the priority level at which a button hugs its contents horizontally.
static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50; // When you send -[UIView systemLayoutSizeFittingSize:], the size fitting most closely to the target size (the argument) is computed.  UILayoutPriorityFittingSizeLevel is the priority level with which the view wants to conform to the target size in that computation.  It's quite low. It is generally not appropriate to make a constraint at exactly this priority. You want to be higher or lower.Copy the code