使用 Xcode 和手动编码了解约束 [英] Understanding Constraints using Xcode and Manually Coding

问题描述

我只阅读了很少有关如何以编程方式操作约束编号的信息，但我认为我需要使用 Xcode 直观地查看它.所以我决定放一个像这样的 UIView 看看约束是怎么回事:

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 :

它会自动创建 4 个约束:

automatically it will create 4 constraints :

修改数字后，我明白了这一切是什么意思.我们有 2 个垂直空间和 2 个水平空间.但让我们先关注垂直...

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...

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

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.

现在，当它变成代码时，我真的不明白如何给出这2个数字.据我所知，以下是如何使用代码设置约束:

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];

让我们假设 _screenView 是一个超级视图，而 _container 是放置在它上面的 UIView.我有 3 个问题:

let's assume _screenView is a superview and _container is UIView placed on top of it. I have 3 questions :

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

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 multiplier used for? because I don't see that option in storyboard.

非常感谢.

推荐答案

我认为在处理约束时考虑 Apple 的自动布局指南中的这个公式很重要:

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

y = m*x + b, where:

y and x are attributes of views.

m and b are floating point values.

你可以这样想 _container 顶部的约束:

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

_containter.top = m*_screenView.top + b

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

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 *myConstraint =[NSLayoutConstraint
                                   constraintWithItem:_container
                                   attribute:NSLayoutAttributeTop
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:_screenView
                                   attribute:NSLayoutAttributeTop
                                   multiplier:1.0
                                   constant:30.0];

底部约束是:

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

还要记住，在 UIKit 坐标系中，X 值从左到右上升，Y 值从上到下上升.换句话说，0,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.

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

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.

这篇关于使用 Xcode 和手动编码了解约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！