One, text control adaptive size

(I) Effect:

The length of the left control can be squeezed, and the right control is fully displayed. When the left control is too long, squeeze to make sure the right control is fully displayed.

The effect is shown below:

(II) Implementation method:

(1) Directly calculate the control length

// Calculate the text width
- (CGFloat)textWidthFromTitle:(NSString *)title fontSize:(CGFloat)fontSize{
    CGSize constrainedSize = CGSizeMake(0, MAXFLOAT);
    CGRect textRect = [title boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin
                                       attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:fontSize]} context:nil];
    return textRect.size.width + 1; // In the label can display the full
}
Copy the code

Calculates the width of each Label

// Left Lable width
CGFloat longWidth = [self textWidthFromTitle:titleArray[0] fontSize:15];

// Middle Lable width
CGFloat normalWidth = [self textWidthFromTitle:titleArray[1] fontSize:15];

// Right Lable width
CGFloat shortWidth = [self textWidthFromTitle:titleArray[2] fontSize:15];

// Screen width
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;

// Calculates the true width of the left Label
CGFloat longRealWdith = MIN(longWidth, (screenWidth - normalWidth - shortWidth - 10 * 4));  // The spacing is 10
Copy the code

Use frame or navigation for layout.

(2) Use constraint priority

(a) Theory

  • Constraint priority In Autolayout each constraint has a priority ranging from 1 to 1000. Create a constraint with the highest priority of 1000 by default.
  • Content Hugging Priority This Priority indicates the stretch resistance of a control. The higher the priority, the harder it is to stretch. The default is 250.
  • Content Compression Resistance Priority This Priority corresponds to the Priority above and represents the Priority for Compression Resistance of a control. The higher the priority is, the harder it is to compress. The default value is 750

By default, both labels’ Content Hugging and Content Compression priorities are the same, so if left unprocessed, the left side will appear completely and the right side will get squeezed.

In order to make the label on the right fully displayed, we need to increase the compression level of the label on the right, or reduce the compression level of the label on the left. In short, we need to make the compression level of the label on the right greater than that of the label on the left, so that the content of the label on the right can be displayed first.

The methods for Content Hugging and Content Compression Resistance in UIView include:

- (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

(b) Code

[self.leftLB mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@(30));
    make.left.equalTo(self.bgView).offset(10);
    make.centerY.equalTo(self.bgView).offset(- 50);
    make.right.mas_lessThanOrEqualTo(self.rightLB.mas_left);
}];
    
[self.rightLB mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@(30));
    make.left.mas_greaterThanOrEqualTo(self.leftLB.mas_right);
    make.right.equalTo(self.bgView).offset(- 10);
    make.centerY.equalTo(self.leftLB);
}];
    
[self.leftLB1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@(30));
    make.left.equalTo(self.bgView).offset(10);
    make.centerY.equalTo(self.bgView).offset(50);
    make.right.mas_lessThanOrEqualTo(self.rightLB1.mas_left);
}];
    
[self.rightLB1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@(30));
    make.left.mas_greaterThanOrEqualTo(self.leftLB1.mas_right);
    make.right.equalTo(self.bgView).offset(- 10);
    make.centerY.equalTo(self.leftLB1);
}];

// Select one of the following four lines of code
// Make the left side of the label less compressible, can be compressed, the higher the less easy to compress
[self.leftLB1 setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    
// Or increase the tensile resistance of the left label. The higher the label is, the less likely it is to be stretched
// [self.leftLB1 setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
// The label on the right can be expanded by increasing its compressibility
// [self.rightLB1 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
// The label on the right can be expanded by reducing its tensile resistance
// [self.rightLB1 setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
Copy the code

(c) Effect

Two, common control equal spacing adaptive size

Equal spacing layout, width adaptive

(1) To achieve the effect

(2) Implementation

Four controls, horizontal layout, 30 control spacing, the first control to the parent container spacing 15, the last control to the parent container spacing 15

// Add the views that need to be laid out to an array
NSArray *array = @[v1,v2,v3,v4]; 

/* Use method, one time configuration: horizontal layout, control spacing 30, the first control and parent spacing 15, the last control and parent spacing 15, change MASAxisTypeVertical MASAxisTypeVertical is vertical layout */
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal 
    withFixedSpacing:30 leadSpacing:15 tailSpacing:15];
    
For each view in the array, set a constraint on the parent view perpendicular to the direction to be bisected. For example, if the parent view is bisected horizontally, give a vertical position
[array mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(self.bgView);
    make.height.equalTo(@100);
}];
Copy the code