Layout of custom UITableViewCell using Autolayout programmatically

Question

I have a custom UITableViewCell that works great on iPhone 5s, however since this projected started we now have to update it to support iPhone 6 en iPhone 6 Plus as well.

I've solved most of these upgrade issues using Autolayout in my .xib files. This Cell however does not have a .xib so I Have to do everything programmatically. For clarity I've temporarily drawn a border around my problematic label

This is how it looks on iPhone 5S

This is how it looks on iPhone 6

These tableviews are expandable/collapsable. In the screenshot you see it expanded.

This is the relevant code:

#import "LotsDetailTableViewCell.h"
#import "MSCellAccessory.h"


@interface LotsDetailTableViewCell ()

@property (nonatomic, strong) NSArray *data;
@property (nonatomic, strong) UIView *detailView;

@end

const float LABEL_HEIGHT = 22.0f;

@implementation LotsDetailTableViewCell

- (id)initWithData:(NSArray *)data reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    if (self) {
        self.data = data;
        [self setupDetailView];
        self.textLabel.textColor = RGB(39, 143, 191);
        self.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:16.0];

        self.autoresizingMask = UIViewAutoresizingFlexibleHeight;
        self.clipsToBounds = true;

    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];

    self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x,
                                      self.textLabel.frame.origin.y,
                                      self.textLabel.frame.size.width,
                                      43.5f);
   self.accessoryView.frame = CGRectMake(self.accessoryView.frame.origin.x, 6, 32, 32);
}

#pragma mark Detail View

- (void)setupDetailView
{
    self.detailView = [[UIView alloc] init];

    UILabel *previousLabel;

    for (NSObject *detail in self.data) {
        CGFloat frameY;
        NSString *keyText;
        NSString *valueText;

        if([detail isKindOfClass:[NSString class]]){
            keyText = @"";
            valueText = (NSString *)detail;
        } else if([detail isKindOfClass:[NSDictionary class]]){
            keyText = ((NSDictionary *)detail)[@"key"];
            valueText = [(NSDictionary *)detail objectForKey:@"value"];
        }

        if (previousLabel) {
            frameY = previousLabel.frame.origin.y+previousLabel.frame.size.height;
        } else {
            frameY = self.frame.origin.y+44.0f+[self.data indexOfObject:detail]*LABEL_HEIGHT;
        }

        UILabel *keyLabel = [[UILabel alloc] initWithFrame:
                             CGRectMake(self.frame.size.width*.05, frameY, self.frame.size.width*.45, [self heightForValueLabel:valueText])
                             ];

        UILabel *valueLabel = [[UILabel alloc] initWithFrame:
                           CGRectMake(self.frame.size.width*.5, frameY, self.frame.size.width*.45, [self heightForValueLabel:valueText])
                           ];

        valueLabel.lineBreakMode = NSLineBreakByWordWrapping;
        valueLabel.numberOfLines = 0;
        keyLabel.lineBreakMode = NSLineBreakByWordWrapping;
        keyLabel.numberOfLines = 0;
        valueLabel.textAlignment = NSTextAlignmentRight;
        keyLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:12.0];
        valueLabel.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
        keyLabel.textColor = RGB(119, 119, 119);
        valueLabel.textColor = RGB(39, 143, 191);
        keyLabel.text = keyText;
        valueLabel.text = valueText;

        valueLabel.layer.borderColor = [RGB(178, 178, 178) CGColor];
        valueLabel.layer.borderWidth = 1.0f;

        [self.detailView addSubview:keyLabel];
        [self.detailView addSubview:valueLabel];


        previousLabel = valueLabel;
    }

    [self addSubview:self.detailView];
}

- (CGFloat)heightForValueLabel:(NSString *)text
{
    return [[self class] heightForValueLabel:text width:self.frame.size.width*.5];
}

+ (CGFloat)heightForValueLabel:(NSString *)text width:(CGFloat)width
{
    CGSize constrainedSize = CGSizeMake(width, CGFLOAT_MAX);

    NSDictionary *attributesDictionary = [NSDictionary dictionaryWithObjectsAndKeys:
                                          [UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0], NSFontAttributeName,
                                          nil];

    NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:text attributes:attributesDictionary];

    CGRect requiredHeight = [string boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin context:nil];

    return requiredHeight.size.height+5.0;
}

+ (CGFloat)heightForData:(NSArray*)data width:(CGFloat)width
{
    CGFloat height = 0.0;

    for (NSObject *detail in data) {
        NSString *valueText;

        if([detail isKindOfClass:[NSString class]]){
            valueText = (NSString *)detail;
        } else if([detail isKindOfClass:[NSDictionary class]]){
            valueText = ((NSDictionary *)detail)[@"value"];
        }

        height = height + [self heightForValueLabel:valueText width:width];
    }

    return height;
}

@end

Most of the relevant drawing is performed in the setupDetailView method.

What I want: I want the label to be aligned to the right hand side of the tableviewcell to make best use of the available space.

What I tried: I've tried adding a NSLayoutConstraint programmatically in the setupDetailView using the following co

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:valueLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0 constant:1.0];

[valueLabel addConstraint:constraint];

[self needsUpdateConstraints];

but this has lead to run-time crashes.

If my problem can be easily solved without Autolayout I'm not opposed to that.

Edit: If I try to add the constraint, this is how it blows up:

2015-03-25 14:19:04.047 App[35277:10763464] The view hierarchy is not prepared for the constraint: <NSLayoutConstraint:0x7faf5049a630 UILabel:0x7faf50499a50'8050'.trailing == LotsDetailTableViewCell:0x7faf50494840'LotDetailInfoCell'.right + 1>
    When added to a view, the constraint's items must be descendants of that view (or the view itself). This will crash if the constraint needs to be resolved before the view hierarchy is assembled. Break on -[UIView _viewHierarchyUnpreparedForConstraint:] to debug.
2015-03-25 14:19:04.048 App[35277:10763464] View hierarchy unprepared for constraint.
    Constraint: <NSLayoutConstraint:0x7faf5049a630 UILabel:0x7faf50499a50'8050'.trailing == LotsDetailTableViewCell:0x7faf50494840'LotDetailInfoCell'.right + 1>
    Container hierarchy: 
<LotsDetailTableViewCell: 0x7faf50494840; baseClass = UITableViewCell; frame = (0 0; 320 44); layer = <CALayer: 0x7faf50494c50>>
   | <UITableViewCellContentView: 0x7faf5049c070; frame = (0 0; 320 44); gestureRecognizers = <NSArray: 0x7faf504a2530>; layer = <CALayer: 0x7faf50455b60>>
    View not found in container hierarchy: <UILabel: 0x7faf50499a50; frame = (156 44; 144 19.304); text = '8050'; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7faf50499870>>
    That view's superview: NO SUPERVIEW
2015-03-25 14:19:04.058 App[35277:10763464] *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Unable to install constraint on view.  Does the constraint reference something from outside the subtree of the view?  That's illegal. constraint:<NSLayoutConstraint:0x7faf5049a630 UILabel:0x7faf50499a50'8050'.trailing == LotsDetailTableViewCell:0x7faf50494840'LotDetailInfoCell'.right + 1> view:<LotsDetailTableViewCell: 0x7faf50494840; baseClass = UITableViewCell; frame = (0 0; 320 44); layer = <CALayer: 0x7faf50494c50>>'

Answer 1

Give leftConstarint to your label, after adding it as subView.

[_label setTranslatesAutoresizingMaskIntoConstraints:NO];


NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:_label
                                                                  attribute:NSLayoutAttributeLeft
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:[_label superview]
                                                                  attribute:NSLayoutAttributeLeft
                                                                 multiplier:1.0
                                                                   constant:10];

[_label addConstraint:leftConstraint];

[_label superview] must be your [self view]. //Might be. Hope, it helps. :)

Answer 2

When adding constraints between subview and superview, you have to add them to the superview:

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:valueLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0 constant:1.0];

[self addConstraint:constraint];

[self needsUpdateConstraints];