preface

The first two chapters give a detailed look at Content Stretch Priority and Content Compression Resistance Priority. This article will use a combination of these two attributes to address the actual requirements in a project.

I. Review of key points:

1.Content Hugging Priority

View tensile priority, the smaller the value, the easier the view will be stretched,

2. Content Compression Resistance Priority:

View compression priority. The smaller the value is, the easier the view is compressed.

Two. Practical application

Let me first look at how this effect can be achieved by setting the Content Compression Resistance Priority and Content Hugging Priority properties, without calculating the width of the text and modifying the constraint:

Effect description:

  • This is part of the user information that’s on the community comment page
  • On the far left: user image
  • Yellow Label: user nickname (nickname length is uncertain)
  • Blue Label: Comment published time (length of time is uncertain)

Two requirements:

  • 1. Yellow label(display nickname), whose width is determined by the length of user’s nickname, blue label(display time), whose width is determined by the length of time,
  • 2. When the user’s nickname length becomes longer, the blue label automatically moves to the right. When it moves to the edge of the screen, the user’s nickname continues to increase, and the nickname will be displayed as thumbnail 3. When the user nickname becomes shorter, the blue label automatically moves to the left.

Three. Code examples

Create a new project, add a view to the page, and add constraint fixed position and size, add three views to this view, respectively:

1. ImageView, used to display user image 2. Yellow label, used to display user nickname 3. Blue label, used to display the time

Add the following constraints:

ImageView:0And then make a left0Under the,0The aspect ratio1:1On the yellow label:0And then make a left0Under the,0, blue label: on0And then make a left0Under the,0Right,0Neither yellow label nor blue label has a width constraint, which is determined by the length of the textCopy the code

After the constraint is added, the following error is reported:

This error means:

  • Yellow label, and blue label are both dynamic widths (no width constraints added),
  • When the sum of the width of the two is greater than the total width of the region on the right,AutoLayout does not know which label to compress first.
  • When the sum of the width of the two is less than the total width of the region on the right,AutoLayout does not know which label to stretch first.
  • Let’s add the Content Hugging Priority and Content Compression Resistance Priority constraints to both,

Let’s add these two constraints:

  • 1. Obviously, when the user nickname is too long, we want to omit the part that is too long (that is, when the nickname is too long, the yellow label is compressed first, and its horizontal anti-compression priority is lower)
  • 2. When the user nickname is too short, we hope that the blue label will move to the left (that is, if the nickname is too short, the blue label will move to the left and be elongated, and its transverse tensile priority will be lower).

The horizontal Priority of yellow label Content Compression Resistance Priority is 749, as follows:

Modify the Content Hugging Priority of the blue label to 250, as follows:

After the addition, we right click and drag the two labels to generate variables, and start a timer, and set the yellow label text as:

Nickname that is a long long nickname Nickname - this is a very long intimate Nickname it is a long long nickname this is a very long Nickname that is a long long long nickname - this is a nickname that long is a nickname that is long long nickname this nickname Nickname that long nickname that is long a nickname that long is a nickname that is a nickname that is a very long It's a long, long nickname. It's a long, long nicknameCopy the code

No need to calculate the text width, no need to modify the constraints, to achieve the above effect.

The code is as follows:


#import "ViewController.h"

static NSString *const NameText = "Long nickname that's a long nickname.";
static NSInteger changeLength = - 1;// Record the single change length

@interface ViewController(a)
@property (weak.nonatomic) IBOutlet UILabel *nameLab;
@property (weak.nonatomic) IBOutlet UILabel *timeLab;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _nameLab.text = NameText;/ / initial value
    _timeLab.text = @" A week ago";/ / initial value

    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(action) userInfo:nil repeats:YES]; } - (void)action{
     /** Current nickname */
    NSString *name = [NameText substringToIndex:_nameLab.text.length+changeLength];
    NSLog(@" Current nickname :\n%@",name);
    
    _nameLab.text = name;// Set the nickname
    
    if(_nameLab.text.length<=3) {// Minimum width
        changeLength = 1;/ / long
    }else if(_nameLab.text.length==NameText.length){// Maximum width
        changeLength = - 1;/ / cut short}} - (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Copy the code

Iii. Summary:

The smaller the Content Hugging Priority value, the faster the view will be stretched

The smaller the priority value of Compression Resistance is, the more compressed it is.

These two attributes are widely used in UITableViewCell automatic height, the next chapter will focus on complex TableViewCell, in the case of excluding the operator text height, without the third-party TableViewCell automatic height framework, how to achieve automatic height.

Code address :github.com/CoderZhuXH/…