AutoLayout - equal heights based on taller view

Question

This is conceptually similar to Autolayout height equal to MAX(multiple view heights) except that question is sizing a container view, but I am wanting both buttons to be sized to the height of the maximum height button.

---

I have two buttons that are side-by-side in a footer section of a view. I want the buttons to be the same width, so I applied a constraint to make them the same width and that works fine. I also want them to the the same height, in case one of the buttons ends up taking more than one line for its title. I tried setting the heights of both buttons the same, but when I do that, the button that is shorter always is used when determining the height for both buttons. For example, if the first button is just one line of text and the second button is three lines of text, then both buttons will be sized for just one line of text. The same thing happens if the text is swapped so that the first button is supposed to be taller.

I have set the content hugging and compression resistance priorities for both buttons too, but that still doesn't seem to help, or I am setting them wrong.

[self->_firstButton setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
[self->_firstButton setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
        
[self->_firstButton setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
[self->_firstButton setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical];

And the same priorities are set for the second button.

Here are the constraints that make both buttons the same size and these do work as the buttons are the same width and they are the same height, but again the problem is that the height is the height of the shorter button (the button with a shorter title text).

[self.firstButton.heightAnchor constraintEqualToAnchor:self.secondButton.heightAnchor],
[self.firstButton.widthAnchor constraintEqualToAnchor:self.secondButton.widthAnchor]

Does anyone see what I might be doing wrong? Or does anyone know how to fix this so that both buttons will be the height of the taller button (the button with a longer title) and not the height of the button with a shorter title?

Answer 1

My comments were not quite correct...

IF you have properly set constraints inside your custom view / control, or if you're setting its intrinsic size correctly, you can get the desired result with very few constraints... even if the views are not contained in a stack view or other "container" view.

For example, this code:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UILabel *v1 = [UILabel new];
    v1.backgroundColor = [UIColor cyanColor];
    v1.textAlignment = NSTextAlignmentCenter;
    v1.numberOfLines = 0;
    v1.text = @"One Line";
    
    UILabel *v2 = [UILabel new];
    v2.backgroundColor = [UIColor greenColor];
    v2.textAlignment = NSTextAlignmentCenter;
    v2.numberOfLines = 0;
    v2.text = @"Lots of text to force the label to wrap onto multiple lines.";

    for (UIView *v in @[v1, v2]) {
        v.translatesAutoresizingMaskIntoConstraints = NO;
        [self.view addSubview:v];
    }
    
    UILayoutGuide *g = [self.view safeAreaLayoutGuide];

    [NSLayoutConstraint activateConstraints:@[
        
        [v1.leadingAnchor constraintEqualToAnchor:g.leadingAnchor constant:20.0],
        [v2.trailingAnchor constraintEqualToAnchor:g.trailingAnchor constant:-20.0],
        
        [v1.bottomAnchor constraintEqualToAnchor:g.bottomAnchor constant:-20.0],
        [v2.bottomAnchor constraintEqualToAnchor:g.bottomAnchor constant:-20.0],

        [v1.widthAnchor constraintEqualToAnchor:v2.widthAnchor],
        [v2.leadingAnchor constraintEqualToAnchor:v1.trailingAnchor constant:20.0],
        
        [v1.heightAnchor constraintEqualToAnchor:v2.heightAnchor],
        
    ]];
    
    // not striclty needed, but to make sure they don't compress
    [v1 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
    [v2 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
}

produces this result:

and, by changing only the text in the two labels: