How to vertically center two views & divide the width equally relative to the super view?

172 views Asked by At

I'm trying to align two Buttons in a View (appearing in cyan). They get aligned vertically in the View. When i try to horizontally align them, their heights get changed. I want their widths should be the same according to the super view's width unlike smaller Next button. Can this be achieved only using VFL?

2 Buttons to in a container view

Here's the code:

[self prepareButton:saveButton label:@"SAVE"];
[buttonContainerView addConstraint:[NSLayoutConstraint constraintWithItem:saveButton
                                                              attribute:NSLayoutAttributeCenterY
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:buttonContainerView
                                                              attribute:NSLayoutAttributeCenterY
                                                             multiplier:1.00f
                                                               constant:0]];
[saveButton layoutIfNeeded];

[self prepareButton:nextButton label:@"NEXT"];
[buttonContainerView addConstraint:[NSLayoutConstraint constraintWithItem:nextButton
                                                              attribute:NSLayoutAttributeCenterY
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:buttonContainerView
                                                              attribute:NSLayoutAttributeCenterY
                                                             multiplier:1.00f
                                                               constant:0]];
[nextButton layoutIfNeeded];
[buttonContainerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[saveButton]-[nextButton]-|"
                                                                          options:0
                                                                          metrics:metrics
                                                                            views:viewDictionary]];
[saveButton layoutIfNeeded];
[nextButton layoutIfNeeded];

-(void)prepareButton:(UIButton *)button
           label:(NSString *) label
{
    [buttonContainerView addSubview:button];
    button.translatesAutoresizingMaskIntoConstraints = NO;
    button.backgroundColor = [UIColor redColor];
    button.layer.cornerRadius = 2.50f;
    [button setTitle:label forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
}
1

There are 1 answers

0
NullPointer On BEST ANSWER

Solved the issue by setting equal height & assigning priority in VFL:

[buttonContainerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[saveButton]-[nextButton(==saveButton@1000)]-|"
                                                                          options:0
                                                                          metrics:metrics
                                                                            views:viewDictionary]];

Equal sized buttons in a container view