Set AutoLayout constraints to align multiline label

Question

I'm new to iOS and AutoLayout. In one of my table views I have cells that contain 2 labels (let's say title and subtitle)

Title can be quite long so I want it to expand to 2 rows if needed. Subtitle always have 1 line.

I've made some screens to present the problem (I attached links because I don't have enough reputation points)

Let's the first photo be the start point. I would like to have constant 8px space between labels and also (here is where problem starts) I need them to be centered verticaly (space between title and superview.top should be equal to space between subtitle and superview.bottom)

I'm able to this but only if title label have 1 line. What constraints are needed to get it look like on photo 2? At this moment I have pinned them like so:

8px between title and subtitle (varticaly) - priority 1000

16px between title and superview.top - priority 750

16px between subtitle and superview.bottom - priority 750

But it doesn't work.

PS. I have set number of lines to 0.

Thanks for any help.

As an aside, Apple is introducing `UIStackView` in iOS 9. It will eliminate the need for many of Auto Layout constraints you currently would need to add. Based on the info you provided in your comment, you could use nested stack views. The outer (vertical) stack would handle the title and (horizontally stacked) subtitle; the inner (horizontal) stack would handle the 4 subtitle labels. — , Aug 24 '15 at 16:39

score 0 · Answer 1 · 2015-08-24T17:27:22.807

UITableViewCellStyleSubtitle has built-in support for self-sizing.

It will support an image, multi-line title, and a subtitle, without you needing to write or maintain any custom code to handle what it can already do.

Update:

Here is an example of using attributed text to take the place of 4 different "labels" for a subtitle:

In tableView:cellForIndexPath:

cell.detailTextLabel.attributedText = [self attributedTextForBookSources:sourcesValue];

Helper methods:

/**
 The attributed text string corresponding to the referenced gospel books

 @param sourcesValue An integer number representing a bitfield of gospel books that have source details for a pericope

 @return The attributed string identifying the gospel book sources
 */
- (NSAttributedString *)attributedTextForBookSources:(NSInteger)sourcesValue
{
    UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline];

    UIColor *textcolor = [self textColorForPericopeSource:sourcesValue & CGIPericopeSourcesMatt];
    NSMutableAttributedString *books = [[NSMutableAttributedString alloc] initWithString:@"Matt " attributes:@{NSFontAttributeName : font, NSForegroundColorAttributeName : textcolor}];

    textcolor = [self textColorForPericopeSource:sourcesValue & CGIPericopeSourcesMark];
    [books appendAttributedString:[[NSAttributedString alloc] initWithString:@" Mark " attributes:@{NSFontAttributeName : font, NSForegroundColorAttributeName : textcolor}]];

    textcolor = [self textColorForPericopeSource:sourcesValue & CGIPericopeSourcesLuke];
    [books appendAttributedString:[[NSAttributedString alloc] initWithString:@" Luke " attributes:@{NSFontAttributeName : font, NSForegroundColorAttributeName : textcolor}]];

    textcolor = [self textColorForPericopeSource:sourcesValue & CGIPericopeSourcesJohn];
    [books appendAttributedString:[[NSAttributedString alloc] initWithString:@" John" attributes:@{NSFontAttributeName : font, NSForegroundColorAttributeName : textcolor}]];

    return [[NSAttributedString alloc] initWithAttributedString:books];
}

- (UIColor *)textColorForPericopeSource:(BOOL)included
{
    return included ? [UIColor darkGrayColor] : [UIColor clearColor];
}

My code just hides or shows a book, but you may be able to also use an attributed string based on your four labels.

Anytime you can use the built-in styles, it generally means less code for you to write, maintain, and support, down the road, and more likelihood of it still working in a future version of iOS.

That app's cell self-sizes itself, and you see it can handle a multi-line title as you need.

Ok, I have simplified my issue a little bit cause I didn't know it matters. Actually my bottom label consists of 4 separated labels. What then? — HombreLobo, Aug 24 '15 at 16:18
The built-in labels support attributed text. If that still doesn't handle your needs, refer to the [accepted answer of how to use Auto Layout for dynamic cell layout](http://stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights). It walks you though all the details of self-sizing and his GitHub repository has more answers for any issues you may experience. — , Aug 24 '15 at 16:26

Set AutoLayout constraints to align multiline label

1 Answers1