Why are items outside the view? - ios

Question

I had two buttons in a UIView, then I add the view to main view, but I eventually got something like this:
As you can see these two buttons went outside the red view.
I wanted a little bit of margin on top, so I use constraintsWithVisualFormat:#"V:|-100-[buttonGroup]-10-|", I'm not sure if that matters.
Here's the original code:
- (UIButton*) getButtonWithTitle: (NSString*) title
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 0.5f;
button.layer.cornerRadius = 2.0f;
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
[button setTitle:title forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState: UIControlStateNormal];
return button;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self.view setTranslatesAutoresizingMaskIntoConstraints:NO];
UIButton *loginBtn = [self getButtonWithTitle:#"Login"];
UIButton *registerBtn = [self getButtonWithTitle:#"Register"];
UIView *buttonGroup = [[UIView alloc] init];
[buttonGroup setTranslatesAutoresizingMaskIntoConstraints:NO];
[buttonGroup addSubview: loginBtn];
[buttonGroup addSubview: registerBtn];
[self.view addSubview: buttonGroup];
[buttonGroup setBackgroundColor:[UIColor redColor]];
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(loginBtn, registerBtn, buttonGroup);
[buttonGroup addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[loginBtn]-20-[registerBtn(==loginBtn)]-|"
options:0
metrics:nil
views:viewsDictionary
]];
NSArray *verticalConstraints = [NSLayoutConstraint
constraintsWithVisualFormat:#"V:|-100-[buttonGroup]-10-|"
options:0
metrics:nil
views:viewsDictionary];
NSArray *horizontalConstraints = [NSLayoutConstraint
constraintsWithVisualFormat:#"H:|-[buttonGroup]-|"
options:0
metrics:nil
views:viewsDictionary];
[self.view addConstraints: horizontalConstraints];
[self.view addConstraints: verticalConstraints];
}
EDIT
The constraints I added:
[buttonGroup addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[loginBtn]-|"
options:0
metrics:nil
views:viewsDictionary
]];
[buttonGroup addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[registerBtn]-|"
options:0
metrics:nil
views:viewsDictionary
]];
It looks like I did extra work ...

Answer 1

You never created any vertical constraints between the buttons and buttonGroup; add those, and you should be good. Also, you shouldn't set translatesAutoresizingMaskIntoConstraints to NO for the controller's self.view (only for subviews that you add to it).

Answer 2

In the VFL , the | means the superview, but your two buttons(loginBtn, registerBtn) are the subviews of the buttonGroup. So you should define the V relation about the loginBtn, registerBtn with the buttonGroup. As rdelmar said, the self.view should set the translatesAutoresizingMaskIntoConstraints to No. This can close the autosizingmask function. I think the best way to do this things in xib or storyboard.