使用 Xcode 和手动编码了解约束

Understanding Constraints using Xcode and Manually Coding

提问by Saint Robson

I just read few information about how to manipulates constraints number programatically, but I think I need to see it visually using Xcode. So I decided to put a UIView like this and see what's going on with Constraints :

我只是阅读了一些关于如何以编程方式操作约束数的信息，但我认为我需要使用 Xcode 直观地查看它。所以我决定放置一个这样的 UIView 并看看 Constraints 发生了什么：

automatically it will create 4 constraints :

它将自动创建 4 个约束：

after modifying the number, I got what's the meaning of all this. there we have 2 vertical space and 2 horizontal space. but let's focus on vertical first...

修改数字后，我明白了这一切的含义。我们有 2 个垂直空间和 2 个水平空间。但让我们首先关注垂直...

one of vertical space measured from top of the screen (superview, I guess), I give this number 30. and other vertical space measured from the bottom, I give -50.

从屏幕顶部测量的垂直空间之一（我猜是超级视图），我给这个数字 30。从底部测量的其他垂直空间，我给 -50。

now, when it turns into code, I really don't understand how to give this 2 numbers. as far as I know, here's how to set constraint with code :

现在，当它变成代码时，我真的不明白如何给出这两个数字。据我所知，这是使用代码设置约束的方法：

NSLayoutConstraint *myConstraint =[NSLayoutConstraint
                                   constraintWithItem:_screenView
                                   attribute:NSLayoutAttributeHeight
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:_container
                                   attribute:NSLayoutAttributeHeight
                                   multiplier:20
                                   constant:200];
[_screenView addConstraint: myConstraint];

let's assume _screenViewis a superview and _containeris UIView placed on top of it. I have 3 questions :

让我们假设_screenView是一个_container超级视图，并且 UIView 放在它上面。我有3个问题：

1. How to set both vertical space (30 and -50) manually with code? because from storyboard I don't see any different name or ID of vertical space. they both have same name. do I have to create 2 NSLayoutConstraint?
2. Then how to add it into _screenView? do I have to create this : [_screenView addConstraint: myConstraint];twice?
3. what multiplierused for? because I don't see that option in storyboard.

1. 如何使用代码手动设置垂直空间（30 和 -50）？因为从情节提要中我看不到任何不同的垂直空间名称或 ID。他们都有相同的名字。我必须创建 2NSLayoutConstraint吗？
2. 那么如何将其添加到_screenView中呢？我必须创建这个：[_screenView addConstraint: myConstraint];两次吗？
3. 有什么multiplier用？因为我在故事板中没有看到该选项。

thank you very much.

非常感谢您。

回答by Alex

I think it's important to think of this formula from Apple's Auto Layout Guide when working with constraints:

我认为在处理约束时考虑 Apple 的 Auto Layout Guide 中的这个公式很重要：

y = m*x + b, where:

y and x are attributes of views.

m and b are floating point values.

You can think the constraint for the top of _container like this:

您可以像这样考虑 _container 顶部的约束：

_containter.top = m*_screenView.top + b

When you are creating a constraint using NSLayoutConstraint constraintWithItem:...the multiplier argument is "m" and constant is "b" in this formula. To create a constraint that keeps the top of _container 30 points below the top of _screenView you would do this:

当您使用NSLayoutConstraint constraintWithItem:...乘数参数创建约束时，此公式中的参数为“m”，常量为“b”。要创建一个约束，使 _container 的顶部低于 _screenView 的顶部 30 点，您可以这样做：

NSLayoutConstraint *myConstraint =[NSLayoutConstraint
                                   constraintWithItem:_container
                                   attribute:NSLayoutAttributeTop
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:_screenView
                                   attribute:NSLayoutAttributeTop
                                   multiplier:1.0
                                   constant:30.0];

The bottom constraint would be:

底部约束是：

NSLayoutConstraint *myConstraint =[NSLayoutConstraint
                                   constraintWithItem:_container
                                   attribute:NSLayoutAttributeBottom
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:_screenView
                                   attribute:NSLayoutAttributeBottom
                                   multiplier:1.0
                                   constant:-50.0];

Also keep in mind that in the UIKit coordinate system X values go up from left to right and Y values go up from top to bottom. In other words, 0,0 is at the top-left of screen and the values go up from there.

还要记住，在 UIKit 坐标系中，X 值从左到右上升，Y 值从上到下上升。换句话说，0,0 位于屏幕的左上角，值从那里上升。

If you want to create the four contraints you show above you will have to create them all individually. You could also use the constraintsWithVisualFormat:options:metrics:views:method of NSLayoutConstraint to make multiple at once. I find it more clear to write them out the way I did above.

如果要创建上面显示的四个约束，则必须单独创建它们。您也可以使用constraintsWithVisualFormat:options:metrics:views:NSLayoutConstraint的方法一次制作多个。我发现按照我上面的方式写出来会更清楚。