How align 2 uibuttons programmatically in a layout? - constraints

Question

I use the KLCPopup library to display a popup in my app.
I have to add 2 buttons horizontally on the bottom of this popup, like the standard iOS UIAlerView. I cannot align this two buttons horizontally.
Here is the result I want:
But here is the result I have:
Here is the code I use to create this popup:
UIView* contentView = [[UIView alloc] init];
contentView.translatesAutoresizingMaskIntoConstraints = NO;
UILabel* dismissLabel = [[UILabel alloc] init];
dismissLabel.translatesAutoresizingMaskIntoConstraints = NO;
dismissLabel.numberOfLines = 0;
[dismissLabel setTextAlignment:NSTextAlignmentCenter];
dismissLabel.lineBreakMode = NSLineBreakByWordWrapping;
dismissLabel.preferredMaxLayoutWidth = 200;
UIButton* dismissButton = [UIButton buttonWithType:UIButtonTypeCustom];
dismissButton.translatesAutoresizingMaskIntoConstraints = NO;
dismissButton.contentEdgeInsets = UIEdgeInsetsMake(10, 20, 10, 20);
[contentView addSubview:dismissLabel];
[contentView addSubview:dismissButton];
UIButton* cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
cancelButton.contentEdgeInsets = UIEdgeInsetsMake(10, 20, 10, 20);
[contentView addSubview:cancelButton];
NSDictionary* views = NSDictionaryOfVariableBindings(contentView, dismissButton, cancelButton, dismissLabel);
[contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-(16)-[dismissLabel]-(16)-[dismissButton]-(16)-[cancelButton]-(16)-|"
options:NSLayoutFormatAlignAllCenterX
metrics:nil
views:views]];
[contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-(18)-[dismissLabel]-(18)-|"
options:0
metrics:nil
views:views]];
// Show in popup
KLCPopupLayout layout = KLCPopupLayoutMake(KLCPopupHorizontalLayoutCenter,
KLCPopupVerticalLayoutCenter);
KLCPopup* popup = [KLCPopup popupWithContentView:contentView
showType:KLCPopupShowTypeFadeIn
dismissType:KLCPopupDismissTypeGrowOut
maskType:KLCPopupMaskTypeDimmed
dismissOnBackgroundTouch:NO
dismissOnContentTouch:NO];
[popup showWithLayout:layout];
I think the problem on my code is the constraint.I've tried many possibilities but I cannot find the right way to do this.
Any advice will be helpful!
Thanks

Answer 1

You've added all three views to the vertical constraint and that's why they are all one after another. Do something like this:
V:|-16-[dismissLabel]
V:|-80-[dismissButton]
V:|-80-[cancelButton]
H:|-18-[dismissLabel]-18-|
H:[dismissButton(50)]-100-[cancelButton(50)]
I haven't tested it but something like that could work. You might have to modify the last H value or maybe add a centering option to it. There are probably better ways where you could group some of those things but this should work too.