iOS create NSLayoutConstraint programmatically for table view cell content

Question

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:

NSLayoutCon         


        

Answer 1

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