ios - 为什么在模拟器中的 UI 布局正常的情况下调试 View 层次结构时会出现这些布局问题

Question

我使用视觉格式在单元格中布局 subview ，如下所示:

contentView.addSubview(accountLabel)
contentView.addSubview(contentLabel)
contentView.addSubview(timeLabel)

let views: [String : Any] = [
    "accountLabel": accountLabel,
    "contentLabel": contentLabel,
    "timeLabel": timeLabel
]

let hConstraint1 = NSLayoutConstraint.constraints(withVisualFormat: "H:|-15-[accountLabel]-[timeLabel]-8-|", options: [.alignAllCenterY], metrics: nil, views: views)
let hConstraint2 = NSLayoutConstraint.constraints(withVisualFormat: "H:[contentLabel]-8-|", options: [], metrics: nil, views: views)
let vConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|-12-[accountLabel]-8-[contentLabel]-12-|", options: [.alignAllLeading], metrics: nil, views: views)
NSLayoutConstraint.activate(hConstraint1+hConstraint2+vConstraint)

在模拟器中运行时看起来还不错:

但是，在调试 View 层次结构时会出现一些布局问题:

为什么在运行时 UI 看起来正常的情况下会出现这些布局问题？

是不是上面的视觉格式字符串有问题？还是Xcode的bug？

如何消除这些布局问题？

Answer 1

好吧，我不是有限制的专家，但我确实看到了一个“可纠正”的问题和一个“这很奇怪，可能是一个错误”的问题。

据我了解，自动布局将尝试满足约束条件——即使它们不明确。如果它失败，那么您会在控制台中看到错误消息，通常是“will attempt to satisfy by breaking...”

因此，您在 Debug View Hierarchy 中看到的警告信息比“修复此错误”指令更具信息性。

也就是说……

---

您有 accountLabel 和 timeLabel 相对约束，但它们都具有相同的 Compression Resistance。因此，只要每个标签中的文本量“适合”，就可以了。

但是假设 accountLabel 得到一个文本字符串“这个用户名太长，这里放不下”？

它应该看起来像这样吗(我使用背景颜色来帮助查看框架):

或者像这样:

这就是水平位置和宽度显示为“不明确”的原因。

您可以通过添加一行来解决该问题。假设您希望截断 accountLabel:

    accountLabel.setContentCompressionResistancePriority(749, for: .horizontal)

会成功的。默认值为 750，因此该行告诉自动布局为 timeLabel 提供更高的阻力。

---

显示为不明确的高度和垂直位置似乎不正确。我没有发现约束有任何问题。

如果我对所有三个标签使用相同的字体？ 没有模棱两可的警告。

如果我为 timeLabel 使用不同的字体大小(如您在图像中显示的那样)，现在调试 View 中会出现 警告层次结构。

Except... 如果我滚动以便重复使用单元格？警告消失了!

编辑:正如 OP 在他的评论中所述，可以通过为 accountLabel 提供不同的 Content Hugging Priority 值来消除垂直歧义(在滚动之前) 和 contentLabel。

因为默认的拥抱优先级是250:

    accountLabel.setContentHuggingPriority(249, for: .vertical)

清除该警告。

我不相信这是必要的...但它确实似乎可以完成这项工作。