iOS create NSLayoutConstraint programmatically for table view cell content iOS create NSLayoutConstraint programmatically for table view cell content ios ios

iOS create NSLayoutConstraint programmatically for table view cell content


A couple of observations:

  1. 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.

  2. 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]
  3. Make sure to specify translatesAutoresizingMaskIntoConstraints to NO for all of the subviews, as I did in the above code sample.

  4. 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;}