如何使用百分比设置约束？

Posted 2023-03-15

【中文标题】如何使用百分比设置约束？

【英文标题】：How to set a constraint using percentage?

【发布时间】：2015-05-15 13:00:29

【问题描述】：

只是一个非常直接的问题，但我们花了很多时间试图找到一个可行的解决方案但失败了。

在Xcode，故事板中，如何设置一个约束，以便一个视图可以位于父视图顶部的总窗口的30％高度？我们需要它适用于所有方向的所有受支持的 ios 设备。

请看我的插图。

【参考方案1】：

我将在下面演示这一点 - 您只需更改乘数的值。

【讨论】：

优秀的答案

详细说明：每个约束都是'pos=multiplier*SECOND_ITEM + 常量'形式的线性函数，所以如果你需要你的视图距离父视图的左边40%，选择trailing 作为您的“SECOND_ITEM”，将 constant 设置为 0，并将 multiplier 设置为 0.4。这将给出 'pos=0.4*TRAILING+0'，它是尾随距离（宽度）的 40%。对垂直定位执行类似操作...

【参考方案2】：

更新

对不起，我误解了你的问题。

您需要像这样从代码中添加约束（xConstraint 完全是任意的，但您必须定义 x、y 位置、宽度和高度，以实现明确的布局）：

@IBOutlet weak var imageView: UIImageView!

    override func viewDidLayoutSubviews() 
        super.viewDidLayoutSubviews()

        let yConstraint = NSLayoutConstraint(item: imageView, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: view.bounds.height / 3)

        let xConstraint = NSLayoutConstraint(item: imageView, attribute: .Leading, relatedBy: .Equal, toItem: view, attribute: .Leading, multiplier: 1, constant: 30)

        NSLayoutConstraint.activateConstraints([yConstraint, xConstraint])
    

这样，等式将是：

imageView.top = 1 * view.top + (view.width / 3)

原答案

自动布局使用以下公式进行约束：

aView.property = Multiplier * bView.property + Constant

基于此，您可以简单地添加一个相等的宽度/高度约束，然后添加一个乘数：

所以等式将是：

view.height = 0.3 * superView.height + 0

【讨论】：

不应该是 view.top 而不是 view.height 吗？你不能在 IB 中编写这种约束（涉及两个不同的属性），你必须在代码中进行。

谢谢！！它看起来可行，但是，这是我的错，我应该说最好不用编码就可以完成......你看，我们有一个一般规则，一个愚蠢的规则，所有与 UI 相关的东西都应该在故事板中，除非它是 100%必要的。所以我正在寻找的是一个解决方案，也许是通过添加一些嵌套的 UIViews？我的意思是我可以在 html 中只使用 CSS 来完成它，为什么我们不能在情节提要中完成呢？我真的认为我们可以...

好吧，在这种情况下，只需添加一个固定到顶部布局指南的UIView，其高度是超级视图高度的 1/3（就像我最初解释的那样），并且一种不可见的背景颜色。并在其下方添加您的图像视图，距离为 0。

我知道这只是一种解决方法，但我不相信没有一些代码约束本身是可能的（正如@Cyrille 指出的那样）。

我现在知道了。看来你是对的。我要关闭这个线程并给你功劳。仍然认为它很常见，也许苹果会将它添加到未来的 xcode 版本中。谢谢你们！！

【参考方案3】：

你应该计算一下。

1.计算ImageView从上到中有多少百分比

2.将垂直中心设置为ImageView

3.在垂直中心约束中配置乘数，从1设置乘数

例如：乘数 0.5 将是 ImageView 从顶部到中心的 25%。所以你的乘数将是 ~0.6

顺便说一句，还有另一种方法：

1.创建从顶部到 imageView 的透明视图

2. 将高度设置为等于您的子视图

3.将此高度限制的乘数设置为 0.3

4. 将 imageView 的底部空间设置为这个透明视图等于零

【参考方案4】：

在Equal Heights Constraint 属性窗格中，将乘数设置为“1:3”（即除法表示法中的 30%）。

【讨论】：

不是视图的 height 应该是其父级高度的 1/3，而是它的 top margin 应该是 1 /3 的 height 父级。在 IB 中可撤销。

我读得太快了。事实上，在构建更具适应性的界面时，我们很快就达到了 IB 的极限。这就是为什么我更喜欢在代码中定义我的接口。

对我禁用了等高限制，我缺少什么吗？

【参考方案5】：

为避免每次在layoutSubviews 之后都必须重新计算常数，请使用UILayoutGuide。

创建一个等于视图高度 30% 的布局指南，然后使用它来对齐子视图的顶部。无需手动布局计算。

// Create a layout guide aligned with the top edge of the parent, with a height equal to 30% of the parent
let verticalGuide = UILayoutGuide()
parent.addLayoutGuide(verticalGuide)
verticalGuide.topAnchor.constraint(equalTo: parent.topAnchor).isActive = true
verticalGuide.heightAnchor.constraint(equalTo: parent.heightAnchor, multiplier: 0.3).isActive = true

// Align the top of the child to the bottom of the guide
child.topAnchor.constraint(equalTo: verticalGuide.bottomAnchor).isActive = true

UILayoutGuide 可以像任何视图一样使用约束进行布局，但不会出现在视图层次结构中。