问题描述

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

I am trying to understand how one can utilize Auto Layout to position items relative to other views percentage-wise.

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

For example, I recently learned that you can specify a view's bottom should lie 4% higher than its superview's bottom by using this:

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

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

This makes sense to me because a multiplier of 1 would align it right at the view's bottom, so you can decrease that amount by 4 percent by changing the multiplier to 0.96.

但是你怎么能在另一个方向上做同样的事情呢?您要指定标签的顶部应从父视图顶部向下 4% 开始.如果您使用同一行但将属性更改为 .Top，这意味着它将比超级视图的顶部高 4%(但实际上并没有将其移出屏幕).我不认为你不能有一个负乘数，而且我不相信大于 1 的值在常量为 0 时有任何作用.那么你如何设置呢?

But how can you do the same in the other direction? You want to specify a label's top should begin 4% down from the superview's top. If you use that same line but change the attributes to .Top, that means it would be 4% higher than the superview's top (but it actually doesn't move it off screen). You can't have a negative multiplier I don't think, and I don't believe a value greater than 1 does anything when constant is 0. So how do you get that set up?

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

I have the same question for implementing leading and trailing. Trailing is easy. If you want it 10% from the right:

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%.但事实并非如此，我不知道为什么.

It makes sense because you dial it back 0.1 or 10% instead of aligning fully at 1.0. But how do you do the same for leading? I thought you might be able to set the label's leading relative to the view's trailing, then set the multiplier to 0.1. In my mind that would mean the label would start at the very far right but then be dialed back 90%, therefore obtaining the desired 10% from the left. But that's not the case, I'm not sure why.

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

Can you explain how this is works, how to properly use multiplier to obtain these relative layouts?

为了简单起见，假设您要创建一个标签，其顶部和底部各占父视图高度的 10%，尾随和前导占父视图宽度的 10%.在纵向的 iPhone 上，标签上方和下方的填充将比标签左侧和右侧的填充多，就像这样(是的，它是按比例绘制的):


但假设在 iPad 上，它将显示在一个完美的正方形视图中.因此，周围的填充量将是相同的，如下所示:


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

To make it easy, let's say you'd like to create a label that has top and bottom 10% of the superview's height, and trailing and leading 10% of the superview's width. On an iPhone in portrait there's going to be more padding above and below the label than there is padding to the left and right of it, like so (yes it's drawn to scale):


But let's say on the iPad it's going to be shown in a view that's a perfect square. Therefore the padding will be the same amount all around, like so:


The question is how do you define such constraints to be dynamic in value, as opposed to setting a fixed value for a constant. I already know how to do bottom and trailing, but top and leading has me stumped. I'm hoping to understand how to use multiplier to do more advanced layouts, for example, specifying a label's top should lie 10% beneath another label's bottom, as opposed to setting it to a fixed constant.

推荐答案

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

There are a couple ways to do this. In the simplest case, you've already almost got it: if you want the horizontal boundaries to be at 10% and 90%, then you need to specify both constraints with respect to the trailing edge of the superview -- so Subview.Trailing locks to Superview.Trailing with a multiplier of 0.9, as you say, but then Subview.Leading also locks to Superview.Trailing, just with a multiplier of 0.1:

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

(and similarly for top / bottom)

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

On the other hand, the case you mention at the end is a little more complicated: "specifying a label's top should lie 10% beneath another label's bottom." For that you probably won't be able to use fixed percentage insets like the previous case. Instead, you can create an invisible spacer view between them: add a constraint with Spacer.Height = 0.1 * Superview.Height and then attach it between the two labels. (You can also handle the previous case with these spacer views, but for that case it isn't really necessary.)

这篇关于了解自动布局中的乘数以使用相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！