Cannot satisfy constraints - Visual Format Language - ios

Question

I started to use autolayout and constraints programatically, but I cannot understand why I get the following warning
Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSLayoutConstraint:0x7fbbd142ead0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7fbbd162ec70(44)]>",
"<NSLayoutConstraint:0x7fbbd1431740 V:|-(20)-[UILabel:0x7fbbd174e520'Liked'] (Names: '|':UITableViewCellContentView:0x7fbbd162ec70 )>",
"<NSLayoutConstraint:0x7fbbd1431790 V:[UILabel:0x7fbbd174e520'Liked']-(NSSpace(8))-[UILabel:0x7fbbd174e7e0's']>",
"<NSLayoutConstraint:0x7fbbd14317e0 V:[UILabel:0x7fbbd174e7e0's']-(20)-| (Names: '|':UITableViewCellContentView:0x7fbbd162ec70 )>"
)
I know that the line of code that is causing the error is:
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-20-[nameLbl]-[notificationLbl]-[textLabel]-20-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
but I cannot understand why the constraint cannot be satisfied. This can be a silly question, but I am new to autolayout and the topic is confusing, because of the incomplete documentation. I tried different variations and solutions but failed to find the correct one. What am I missing? I am also pasting the code of my custom table view cell for more detailed inspection.
#implementation NotificationCell
#synthesize nameLbl,notificationLbl,textLabel,timeLbl,profileImgView,notificationImgView,clockImgView,didSetupConstraints;
-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
nameLbl = [[UILabel alloc]init];
[nameLbl setTextColor:[UIColor blueColor]];
nameLbl.translatesAutoresizingMaskIntoConstraints = NO;
[nameLbl setTextAlignment:NSTextAlignmentLeft];
[nameLbl setNumberOfLines:1];
[nameLbl setBackgroundColor:[UIColor redColor]];
[self.contentView addSubview:nameLbl];
notificationLbl = [[UILabel alloc]init];
[notificationLbl setTextColor:[UIColor lightGrayColor]];
notificationLbl.translatesAutoresizingMaskIntoConstraints = NO;
[notificationLbl setTextAlignment:NSTextAlignmentLeft];
[notificationLbl setNumberOfLines:1];
[self.contentView addSubview:notificationLbl];
textLabel = [[UILabel alloc]init];
[textLabel setTextColor:[UIColor blueColor]];
textLabel.translatesAutoresizingMaskIntoConstraints = NO;
[textLabel setTextAlignment:NSTextAlignmentLeft];
[textLabel setNumberOfLines:0];
[textLabel setBackgroundColor:[UIColor grayColor]];
[self.contentView addSubview:textLabel];
timeLbl = [[UILabel alloc]init];
[timeLbl setTextColor:[UIColor grayColor]];
timeLbl.translatesAutoresizingMaskIntoConstraints = NO;
[timeLbl setTextAlignment:NSTextAlignmentLeft];
[timeLbl setNumberOfLines:1];
[self.contentView addSubview:timeLbl];
profileImgView = [[UIImageView alloc]init];
[profileImgView setTranslatesAutoresizingMaskIntoConstraints:NO];
[profileImgView setBackgroundColor:[UIColor redColor]];
[profileImgView.layer setCornerRadius:20];
[profileImgView.layer setMasksToBounds:YES];
[self.contentView addSubview:profileImgView];
clockImgView = [[UIImageView alloc]init];
[clockImgView setTranslatesAutoresizingMaskIntoConstraints:NO];
[clockImgView setBackgroundColor:[UIColor blueColor]];
[clockImgView.layer setCornerRadius:10];
[clockImgView.layer setMasksToBounds:YES];
[self.contentView addSubview:clockImgView];
notificationImgView = [[UIImageView alloc]init];
[notificationImgView setTranslatesAutoresizingMaskIntoConstraints:NO];
[notificationImgView setBackgroundColor:[UIColor purpleColor]];
[notificationImgView.layer setCornerRadius:10];
[notificationImgView.layer setMasksToBounds:YES];
[self.contentView addSubview:notificationImgView];
/*[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[_headerView(==80)]-0-[_tableView]-|"
options:NSLayoutFormatDirectionLeadingToTrailing
metrics:nil
views:elementsDict]];*/
}
return self;
}
-(void)updateConstraints{
if (self.didSetupConstraints == NO) {
NSDictionary *views = NSDictionaryOfVariableBindings(nameLbl,notificationLbl,notificationImgView,textLabel,timeLbl,profileImgView,clockImgView);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[profileImgView(40)]-10-[textLabel]-[clockImgView(20)]-[timeLbl(20)]-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[profileImgView]-10-[nameLbl]-[clockImgView]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[profileImgView]-10-[notificationImgView(20)]-[notificationLbl]-[clockImgView]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-20-[nameLbl]-[notificationLbl]-[textLabel]-20-|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[notificationImgView(20)]-[textLabel]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-15-[profileImgView(40)]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-15-[clockImgView(20)]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-15-[timeLbl]" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views];
[self.contentView addConstraints:constraints];
self.didSetupConstraints = YES;
}
[super updateConstraints];
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self.contentView setNeedsLayout];
[self.contentView layoutIfNeeded];
self.textLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.textLabel.frame);
}

Answer 1

A couple of thoughts:
Make sure you are neither explicitly setting rowHeight property on the table view, nor implementing tableView:heightForRowAtIndexPath: in your UITableViewDelegate. Either one of those will establish conflicting constraints with a cell that performs constraint-based height calculations.
While I haven't found it necessary, "Luke said" (in WWDC 2014 video What's New in Table and Collection Views) one should set estimatedRowHeight for the table view (e.g. in viewDidLoad) when using constraint generated row heights.
self.tableView.estimatedRowHeight = 44;
I also haven't found it necessary to do so, but in the same WWDC 2014 video, the presenter, Luke, was getting strange constraint errors similar to yours until he added the following line to his code:
self.tableView.rowHeight = UITableViewAutomaticDimension;
He said that this wouldn't be necessary in the next seed, but in his demonstration, it was necessary.
I've noticed that you can still often receive the unsatisfiable constraints error (even if you've done the above and all of your constraints are fine). I have found that if you change one of your cell's vertical constraints to have a priority less than 1000, it seems to resolve this issue (and the cell appears to be formatted properly.
Note, this behavior of automatically calculated row heights differs in iOS 7. But in iOS 8, the above should do it. If you're still having problems, create a test project that manifests the problem and upload it somewhere where we can look at it.

Answer 2

This happens because the height of your cell is 44 points, however you have vertically placed labels, where only the spaces are 20 + std spacing + std spacing + 20 which is definitely more than 44, and there still is the label height, which you have to take into account: V:|-20-[nameLbl]-[notificationLbl]-[textLabel]-20-|. So you should increase the height of your cell.

Answer 3

you need to set self.tableView.rowHeight = UITableViewAutomaticDimension; It will make tableViewCell height dynamically.
you might also need to set height constraints to label greater then equally so that if not content it's height can be 0.

Answer 4

Some suggestions from my experience with dynamic cell heights:
First, do not override the updateConstraints method in the NotificationCell. instead add your constraints in the init method, after you added all the subviews to the contentView.
Then, change your implementation of heightForRow
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *) indexPath {
NotificationCell *cell = [[NotificationCell alloc] init];
// Do all your configuration here
cell.nameLabel.text = [_names objectAtIndex:indexPath.row];
// Add all the rest too ...
CGFloat cellHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingSizeCompressedSize].height;
// Add a breakpoint here to see if your constraints are right and if the height is calculated correctly
return height + 1;
}
If your labels are not multiline, even without setting the text, the height should be calculated correctly. However, if they can stretch over multiple lines, then you need to set the value for the text in the heightForRow method.
Hope this fixes your problem.