UIStackView 比例布局仅具有内在内容大小

2024-03-12

我在 UIStackView 中排列子视图的布局方面遇到问题，想知道是否有人可以帮助我了解发生了什么。

所以我有 UIStackView 有一些间距（例如 1，但这并不重要）和 .fillProportionally 分布。我添加的排列子视图仅具有 1x1 的内在内容大小（可以是任何东西，只是方形视图），并且我需要它们在 stackView 中按比例拉伸。

问题是，如果我添加没有实际框架而仅具有内在尺寸的视图，那么我会得到错误的布局

否则，如果我添加具有相同大小的框架的视图，一切都会按预期工作，

但我真的不想设置视图的框架。

我很确定这都是关于拥抱和压缩阻力优先级的，但无法弄清楚正确的答案是什么。

这是一个 Playground 示例：

import UIKit
import PlaygroundSupport

class LView: UIView {

    // If comment this and leave only intrinsicContentSize - result is wrong
    convenience init() {
        self.init(frame: CGRect(x: 0, y: 0, width: 1, height: 1))
    }

    // If comment this and leave only convenience init(), then everything works as expected
    public override var intrinsicContentSize: CGSize {
        return CGSize(width: 1, height: 1)
    }
}

let container = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
container.backgroundColor = UIColor.white

let sv = UIStackView()
container.addSubview(sv)


sv.leftAnchor.constraint(equalTo: container.leftAnchor).isActive = true
sv.rightAnchor.constraint(equalTo: container.rightAnchor).isActive = true
sv.topAnchor.constraint(equalTo: container.topAnchor).isActive = true
sv.bottomAnchor.constraint(equalTo: container.bottomAnchor).isActive = true
sv.translatesAutoresizingMaskIntoConstraints = false
sv.spacing = 1
sv.distribution = .fillProportionally

// Adding arranged subviews to stackView, 24 elements with intrinsic size 1x1
for i in 0..<24 {
    let a = LView()
    a.backgroundColor = (i%2 == 0 ? UIColor.red : UIColor.blue)
    sv.addArrangedSubview(a)
}
sv.layoutIfNeeded()

PlaygroundPage.current.liveView = container

这显然是实现中的一个错误UIStackView（即系统错误）。

DonMag已经在他的评论中给出了指向正确方向的提示：

当您设置堆栈视图的spacing为 0，一切都按预期进行。但是当您将其设置为任何其他值时，布局就会中断。

这是原因的解释：

ℹ️ 为了简单起见，我假设堆栈视图有

a 横轴 and
10 个排列的子视图

随着.fillProportionally分配UIStackView创建系统约束如下：

对于每个排列的子视图，它添加一个等宽约束（UISV-fill-proportionally）与堆栈视图本身相关乘数:
```
arrangedSubview[i].width = multiplier[i] * stackView.width
```
如果你有n在堆栈视图中排列子视图，你会得到n这些限制。让我们称呼他们为proportionalConstraint[i] (where i表示各个视图在视图中的位置arrangedSubviews array).
这些限制是不需要（即它们的优先级不是 1000）。相反，对第一个元素的约束arrangedSubviews第一个数组的优先级为 999，第二个数组的优先级为 998，依此类推：
```
proportionalConstraint[0].priority = 999 
proportionalConstraint[1].priority = 998 
proportionalConstraint[2].priority = 997 
proportionalConstraint[3].priority = 996
...         
proportionalConstraint[n–1].priority = 1000 – n
```
这意味着所需的约束总是会克服这些比例限制!
为了连接排列的子视图（可能有间距），系统还创建n–1称为约束UISV-spacing:
```
arrangedSubview[i].trailing + spacing = arrangedSubview[i+1].leading
```
这些限制是required（即优先级 = 1000）。
（系统还将创建一些其他约束（例如，对于垂直轴以及将第一个和最后一个排列的子视图固定到堆栈视图的边缘），但我不会在这里详细介绍，因为它们与理解什么无关出错了。）

苹果的文档 https://developer.apple.com/documentation/uikit/uistackviewdistribution/1616217-fillproportionally on the .fillProportionally分布状态：

一种布局，其中堆栈视图调整其排列视图的大小，以便它们沿着堆栈视图的轴填充可用空间。视图根据其沿堆栈视图轴的内在内容大小按比例调整大小。

所以根据这个multiplier为了proportionalConstraints 应计算如下for spacing = 0:

totalIntrinsicWidth = ∑_i intrinsicWidth[i]
multiplier[i] = intrinsicWidth[i] / totalIntrinsicWidth

如果我们排列的 10 个子视图都具有相同的固有宽度，则这将按预期工作：

multiplier[i] = 0.1

for all proportionalConstraints。然而，一旦我们将间距更改为非零值，则计算multiplier变得更加复杂，因为必须考虑间距的宽度。我已经完成了数学计算和公式multiplier[i] is:

Example:

对于堆栈视图配置如下：

堆栈视图宽度 = 400
stackView.spacing = 2

上面的等式将得出：

multiplier[i] = 0.0955

您可以通过将其相加来证明这是正确的：

(10 * width) + (9 * spacing)
    = (10 * multiplier * stackViewWidth) + (9 * spacing)
    = (10 * 0.0955 * 400) + (9 * 2)
    = (0.955 * 400) + 18
    = 382 + 18
    = 400
    = stackViewWidth

然而，系统分配了不同的值：

multiplier[i] = 0.0917431

总宽度加起来为

(10 * width) + (9 * spacing)
    = (10 * 0.0917431 * 400) + (9 * 2)
    = 384,97
    < stackViewWidth

明显地，这个值是错误的。

因此，系统必须打破约束。当然，它打破了最低优先级的约束，即proportionalConstraint最后排列的子视图项目的。

这就是屏幕截图中最后排列的子视图被拉伸的原因。

如果您尝试不同的间距和堆栈视图宽度，您最终会得到各种看起来奇怪的布局。但他们都有一个共同点：间距始终优先。（如果将间距设置为更大的值，例如 30 或 40，您将只能看到前两个或三个排列的子视图，因为其余空间已完全被所需间距占据。）

总结一下：

The .fillProportionally分发仅适用于spacing = 0.

对于其他间距，系统会使用不正确的乘数创建约束。

这打破了布局

如果乘数小于应有的值，则必须拉伸任一排列的子视图（最后一个）
如果乘数大于应有的值，则必须压缩多个排列的子视图。

解决这个问题的唯一方法是“滥用”普通UIView具有所需的固定宽度约束作为视图之间的间距。（通常情况下，UILayoutGuide为此目的引入了 s，但您甚至不能使用它们，因为您无法将布局指南添加到堆栈视图。）

恐怕由于这个错误，没有干净的解决方案可以做到这一点。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)