iOS create NSLayoutConstraint programmatically for table view cell content
autolayout, ios
Solution
A couple of observations:
Your creation of this particular constraint is correct. Clearly, you can't just set the left constraint, but you need to specify all of the constraints that will unambiguously define the `frame` of the cell's subviews. For example, define not only the left (or leading) constraint, but also the top, bottom, and width constraints. Or define the left constraint plus the the width and height constraints, and specify the vertical y constraint. Lots of different ways to do it, but the key is that you have to add all of the constraints that will unambiguously define the `frame` of all of the subviews.
For example, you might have something like the following:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
UIImageView *customImageView;
UILabel *customLabel;
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
customImageView = [[UIImageView alloc] init];
customImageView.translatesAutoresizingMaskIntoConstraints = NO;
customImageView.tag = IMAGEVIEWTAG;
[cell.contentView addSubview:customImageView];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customImageView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:25.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customImageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:30.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customImageView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:3.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customImageView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-3.0]];
customLabel = [[UILabel alloc] init];
customLabel.translatesAutoresizingMaskIntoConstraints = NO;
customLabel.tag = LABELTAG;
[cell.contentView addSubview:customLabel];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customLabel
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:customImageView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customLabel
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-10.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customLabel
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:3.0]];
[cell.contentView addConstraint:[NSLayoutConstraint constraintWithItem:customLabel
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:cell.contentView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-3.0]];
}
else {
customImageView = (id)[cell.contentView viewWithTag:IMAGEVIEWTAG];
customLabel = (id)[cell.contentView viewWithTag:LABELTAG];
}
customImageView.image = ...;
customLabel.text = ...;
return cell;
}
Clearly, you'd frequently use a `UITableViewCell` subclass to facilitate the process of keeping track of your custom controls, but I wanted to keep the example simple.
If you're ever unsure of whether the constraints have been defined unambiguously, run the app and after the UI has been presented, pause the app and enter the following at the `(lldb)` prompt:
po [[UIWindow keyWindow] _autolayoutTrace]
This will inform you if any of the views are ambiguously defined (i.e. whether there are any constraints missing).
If you want to see what the `frame` is for all of the views, you can enter the following at the `(lldb)` prompt:
po [[UIWindow keyWindow] recursiveDescription]
Make sure to specify `translatesAutoresizingMaskIntoConstraints` to `NO` for all of the subviews, as I did in the above code sample.
While you can define the constraints using `constraintWithItem`, frequently people will use `constraintsWithVisualFormat`, as you can often define constraints more concisely that way. Contrast the above code sample with this code sample:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
UIImageView *customImageView;
UILabel *customLabel;
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
customImageView = [[UIImageView alloc] init];
customImageView.translatesAutoresizingMaskIntoConstraints = NO;
customImageView.tag = IMAGEVIEWTAG;
[cell.contentView addSubview:customImageView];
customLabel = [[UILabel alloc] init];
customLabel.translatesAutoresizingMaskIntoConstraints = NO;
customLabel.tag = LABELTAG;
[cell.contentView addSubview:customLabel];
NSDictionary *views = NSDictionaryOfVariableBindings(customImageView, customLabel);
[cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-25-[customImageView(30)]-[customLabel]|" options:0 metrics:nil views:views]];
[cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-3-[customImageView]-3-|" options:0 metrics:nil views:views]];
[cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-3-[customLabel]-3-|" options:0 metrics:nil views:views]];
}
else {
customImageView = (id)[cell.contentView viewWithTag:IMAGEVIEWTAG];
customLabel = (id)[cell.contentView viewWithTag:LABELTAG];
}
customImageView.image = ...;
customLabel.text = ...;
return cell;
}
Problem
I want to add in the cellForRowAtIndexPath some views to my cell content view and for them constraints but nothing works. I have something like this: ``` NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:cell.contentView attribute:NSLayoutAttributeLeft multiplier:1.0f constant:10.0f]; [cell.contentView addConstraint:constraint]; ``` How should I do this?