Subviews centered on contentview using constraints

I have a content view with two subzones. I assembled the vertical add-ins 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 the bottom of the label view.

How can i do this? upper and lower bounds with priorities?

EDIT:

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

The buttonView is too far up

I tried to make a gap between the View Button and the Label -1-

but didn't help. and this is how I need it:

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 are hardcoded and I'd rather avoid it if possible.

+3


source to share


1 answer


To get exactly what you are asking for, you need to specify a number of specific restrictions. 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 causes the button and label to stretch to meet the constraints. So instead, just tell the system what we want. We'll start with your code as this gives us 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 this 4.0 come from? This is half the default subnet spacing -

(8), aligning the bottom with the center Y, but bringing the middle line up a bit.

Also, you will notice that I removed NSLayoutFormatAlignAllCenterX

it because it is not doing anything meaningful at the moment, and it was not actually aligning the views to the center of observation X, just to each other.



Edit:

I made a simple example app that has one ViewController and a button and label are added to the view. See code as entity . This gives 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 it NSLayoutAlignAllCenterX

didn't centering):

Example app with questioner's constraints

I am wondering if you have another button (is this a custom class?) And contentView

.

+6


source







All Articles