CODEWITHSUNDEEP
iosobjective-cautolayoutnslayoutconstraint
Padin215
Padin215

Reputation: 7484

subviews centered in a contentview using constraints

I have a content view with two subviews. I've stacked the subviews vertically and centered them horizontally (x axis) in the content view:

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[buttonView]-[label]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(buttonView, label)]];

Now i want to center them vertically (y-axis). I want equal space from the top of the buttonView and bottom of the label view.

how can i do that? top and bottom constraints with priorities?

EDIT:

Scott, here is how the code you suggested makes it look:

The buttonView is too far up

I tried making the spacing between the buttonView and label -1- but didn't help. and this is how i need it to look:

enter image description here

Here is the code i used to achieve it:

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-13-[buttonView]-[label]-10-|" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(buttonView, label)]];

my constraints work, but is hard coded which i would prefer to stay away from if possible.

Upvotes: 3

Views: 8183

Answers (1)

Scott Robertson
Scott Robertson

Reputation: 266

To get exactly what you're asking for, you'll need to specify a number of specific constraints. A naive attempt might start with (don't use the following line):

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[buttonView]-[label]-|" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(buttonView, label)]];

But this results in the button and label being stretched to satisfy the constraints. So instead let's just tell the system what we want. We'll start with your code, since that gives us a basic alignment.

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[buttonView]-[label]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(buttonView, label)]];
[contentView addConstraint:[NSLayoutConstraint constraintWithItem:buttonView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:-4.0]];
[contentView addConstraint:[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
[contentView addConstraint:[NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:contentView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

Where did that 4.0 come from? It's half of the default subview spacing - (8), aligning the bottom with the center Y, but up a bit to let the middle line up.

Also, you'll note I removed the NSLayoutFormatAlignAllCenterX, because it doesn't do anything meaningful at this point, and wasn't actually aligning the views with the superview's center X, just with each others.

Edit:

I made a simple example app, which has a single ViewController and a button and label added to a view. See the code as a gist. This produces the following output:

Example app with my constraints

As a comparison, here's just using your original constraint in this app (which is why I thought NSLayoutAlignAllCenterX wasn't doing the centering):

Example app with questioner's constraints

I'm wondering if there's more going on with your button (is it a custom class?) and the contentView.

Upvotes: 6

Related Questions