了解自动布局中的乘数以使用相对定位

Question

我试图了解如何利用自动布局相对于其他视图按百分比定位项目.

例如,我最近了解到,您可以使用以下命令指定视图的底部应比其superview的底部高出4%:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 0.96, constant: 0))

这对我来说很有意义,因为1的乘数会在视图的底部对齐它,因此您可以通过将乘数更改为0.96来将该数量减少4%.

但是你怎么能在另一个方向做同样的事情呢？你想指定一个标签的顶部应该从superview的顶部开始下降4%.如果您使用相同的行但是将属性更改为.Top,这意味着它将比superview的顶部高4%(但它实际上不会将其移出屏幕).你不能有一个我不认为的负乘数,而且我不相信大于1的值在常数为0时会做任何事情.所以你如何得到这个设置？

我有同样的问题来实现前导和尾随.尾随很容易.如果你想从右边10%:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 0.9, constant: 0))

这是有道理的,因为你拨回0.1或10%而不是完全对齐1.0.但你如何做同样的领导？我以为你可以设置标签相对于视图尾部的前导,然后将乘数设置为0.1.在我看来,这意味着标签将从最右边开始,然后被拨回90%,因此从左边获得所需的10%.但事实并非如此,我不确定为什么.

你能解释一下这是如何工作的,如何正确使用乘数来获得这些相对布局？

为了方便起见,假设您想要创建一个标签,该标签具有超视图高度的10%的顶部和底部,并且尾随并超过超视图宽度的10%.在iPhone的纵向上,标签上方和下方的填充比在左侧和右侧的填充更多,就像这样(是的,它是按比例绘制的):


但是,让我们在iPad上说它将会在一个完美的正方形视图中显示出来.因此,填充将是相同的数量,如下所示:


问题是如何将这些约束定义为动态值,而不是为常量设置固定值.我已经知道如何做到底部和尾随,但顶部和领先让我难过.我希望了解如何使用乘数来进行更高级的布局,例如,指定标签的顶部应该位于另一个标签底部下方10%,而不是将其设置为固定常量.

Answer 1

有几种方法可以做到这一点.在最简单的情况下,你已经几乎得到了它:如果你想要的水平边界是在10%和90%,那么你需要指定两个方面制约了上海华盈的后缘-这样Subview.Trailing锁Superview.Trailing与0.9正如你所说的那样,乘数Subview.Leading也会锁定Superview.Trailing,只需乘以0.1:

(同样适用于上/下)

另一方面,你在最后提到的情况稍微复杂一点:"指定标签的顶部应该在另一个标签的底部下方10%." 为此,您可能无法像前一种情况那样使用固定百分比插入.相反,您可以在它们之间创建一个不可见的间隔视图:添加约束,Spacer.Height = 0.1 * Superview.Height然后将它附加在两个标签之间.(您也可以使用这些间隔视图处理前一种情况,但对于这种情况,它并不是必需的.)

Answer 2

在我看来,"你不能有一个负面的乘数,我不认为,并且我不相信大于1的值在常数为0时做任何事情"暴露了你的理解偏差.

引擎盖下的规则只是一个线性方程式:

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant

全部以分数衡量.如您所见,乘数(NSLayoutConstraint的属性)不是常数的乘数.按照等式,你不明白的将是清楚的.

至于你的具体例子,@ Archaeopterasa提出了一个很好的解决方案,另一个如下所示:

基于你知道如何做底部和尾随的事实,我想你已经完成了这两个.然后添加另外两个约束,效果将是你想要的:

最后,如果你想在另一个标签的底部指定标签的顶部位置10%,看起来如果不编写一行代码就无法实现它.在运行时已知superview的高度后,必须使用代码来设置连接FirstItem和SecondItem的NSLayoutConstraint对象的常量.

首先,控制从一个标签拖动到另一个标签并选择"垂直间距".(或者您可以通过其他方式执行此操作)

其次,需要一个引用插座:

@IBOutlet weak var tenPercentOfSuperview: NSLayoutConstraint!

然后,在适当的位置执行此操作(例如,在viewDidLoad()中)

let heightOfSuperview = self.view.bounds.height
tenPercentOfSuperview.constant = heightOfSuperview * 0.1

现在一切都好.

如果您想了解有关此主题的更多信息,建议使用Apple的文档:https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

Answer 3

这是

极其简单

方法来做到这一点。

只需添加“助手”或“测量”视图：

示例中的“计算助手”视图为黄色。

一般技术是如此简单明了——不需要任何解释，你可以从图像中得到它。

这是 iOS 中他们“不教你”的“房间里的大象”的事情之一。但它在所有布局中都不断使用。

（事实上​​，Apple 应该为此目的制定一个特殊的 UIView 子类“措施”——事实上，许多大型团队正是这样做的，并具有明显的功能。）

注意图标 #1 位于“View 1/4”辅助视图右端的中心。

注意图标 #3 位于“View 3/4”辅助视图左端的中心。

完成了，来杯霞多丽吧。

方便的是，在助手视图中，只需根据想要的感觉将乘数设置为您想要的任何值即可。然后更改代码中的内容、使用 IBInspectable、 a​​nimate等等非常容易......