Align two labels vertically with different font size

Question

I have a parent UIView where I place two labels on it. Each of these labels only has one line as can be seen here:

The problem now is that the baseline is wrong. I'm using auto layout and the question is how should my constraints should look like in this case? Especially the verticaly positioning of the labels. These are the constraints I currently have:

H:|-[title]-2-[description]-(>=5)-| //with NSLayoutFormatOptions.AlignAllFirstBaseline
V:|[title]|
V:|[description]|

The above constraints leads to

Unable to simultaneously satisfy constraints.

because the centering and the first baseline constraint are fighting each other. The labels should take the full height of the parent, but with different font size.

I tried to pin the labels to the top/bottom but that doesn't work for all cases.

How should I vertically position my labels?

Answer 1

To see what happens, make the background of the label yellow. You have ambiguous constraints.

To fix it, remove the last vertical constraint. You don't need it.

This here works in my testing playground:

let titleLabel = UILabel()
titleLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
titleLabel.font = UIFont.boldSystemFontOfSize(30)
titleLabel.text = "title"

hostView.addSubview(titleLabel)

let descriptionLabel = UILabel()
descriptionLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
descriptionLabel.font = UIFont.boldSystemFontOfSize(20)
descriptionLabel.text = "description"

hostView.addSubview(descriptionLabel)

let views = ["title": titleLabel, "description": descriptionLabel]
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[title]-2-[description]-(>=5)-|", options: NSLayoutFormatOptions.AlignAllFirstBaseline, metrics: nil, views: views))
NSLayoutConstraint(item: titleLabel, attribute: .CenterY, relatedBy: .Equal, toItem: hostView, attribute: .CenterY, multiplier: 1.0, constant: 0.0).active = true

Result:

Answer 2

Instead of using two different label for rich text you can use AttributedString. Here is a example:

- (NSMutableAttributedString*)getRichText {
    NSString *str1 = @"I am bold ";
    NSString *str2 = @"I am simple";

    NSMutableAttributedString *attString=[[NSMutableAttributedString alloc] initWithString:[str1 stringByAppendingString:str2]];

    UIFont *font1=[UIFont fontWithName:@"Helvetica-Bold" size:30.0f];
    UIFont *font2=[UIFont fontWithName:@"Helvetica" size:20.0f];
    NSInteger l1 = str1.length;
    NSInteger l2 = str2.length;
    [attString addAttribute:NSFontAttributeName value:font1 range:NSMakeRange(0,l1)];
    [attString addAttribute:NSFontAttributeName value:font2 range:NSMakeRange(l1,l2)];
    return attString;
}

In View did load you can set the string to label as below:

UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 50)];
[self.view addSubview:textLabel];
textLabel.attributedText = [self getRichText];

Output:

Answer 3

what you need to do is fairly simple. You two labels (the objects) just need to have the same size in height.

To do so add constraints to your first label (for exemple 40 px). When it's done elect the first AND the second label then in your contraints menu on the bottom of the screen (the one one the left, add new alignement constraint) select top edges and bottom edges.

Then you can set your width top bottom etc however you want.

Enjoy