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

Posted

技术标签:

【中文标题】了解自动布局中的乘数以使用相对定位【英文标题】:Understanding multiplier in auto layout to use relative positioning 【发布时间】:2014-11-17 01:24:39 【问题描述】:

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

例如,我最近了解到,您可以使用以下命令指定视图的底部应该比其父视图的底部高 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%。

但是你怎么能在另一个方向上做同样的事情呢?您要指定标签的顶部应从父视图顶部向下 4% 开始。如果您使用同一行但将属性更改为.Top,这意味着它将比超级视图的顶部高 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%,而不是将其设置为固定常量。

【问题讨论】:

你能用图表说明你想要达到的目标吗? 对于这个非常古老的 QA .. 基本方法是使用“间隔”或“测量”视图。只需将它们标记为隐藏。他们为您完成所有计算。 【参考方案1】:

有几种方法可以做到这一点。在最简单的情况下,您几乎已经掌握了它:如果您希望水平边界位于 10% 和 90%,那么您需要指定 both 相对于superview -- 所以Subview.Trailing 锁定到Superview.Trailing,乘数为0.9,正如你所说,但随后Subview.Leading 也锁定到Superview.Trailing,只是乘数为0.1

(同样适用于顶部/底部)

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

【讨论】:

您的回答澄清了我认为最重要的自动布局问题之一。非常感谢!【参考方案2】:

在我看来,“我不认为你不能有一个负乘数,而且我不相信当常数为 0 时大于 1 的值不会有任何作用”暴露了你的理解偏差。

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

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

现在一切正常。

如果想进一步了解这个话题,推荐苹果的文档:https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

【讨论】:

【参考方案3】:

这里是

非常简单

方法。

只需添加“帮助”或“测量”视图:

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

通用技术是如此简单明了 - 它不需要任何解释,你可以从图像中得到它。

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

(事实上,Apple 应该为此专门制定一个特殊的 UIView 子类“措施”——事实上,许多大型团队就是这样做的,具有明显的功能。)

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

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

大功告成,来一杯霞多丽。

方便的是,在帮助视图中,只需将乘数设置为您想要的任何值,具体取决于想要的感觉。然后在您的代码中更改这些内容、使用 IBInspectable、animate 等等非常容易......

【讨论】:

以上是关于了解自动布局中的乘数以使用相对定位的主要内容,如果未能解决你的问题,请参考以下文章

以编程方式在相对布局中定位按钮

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

自动布局中的相对中心

前端3 浮动布局,固定定位,绝对定位,相对定位

cocosStudio2.x怎么进行相对布局编辑

css 笔记:前端开发中的“居中”,绝对定位,transform和flex布局:相对绝对定位 - 1