在模拟器中的UI布局正常时调试视图层次结构时,为什么会出现这些布局问题

Question

我使用可视化格式在单元格中布局子视图,如下所示:

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)

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

但是,调试视图层次结构时会出现一些布局问题:

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

上面的可视格式字符串有问题吗？或者是Xcode的错误？

如何删除这些布局问题？

Answer 1

好吧,我不是一个有限制的专家,但我确实看到一个"可纠正"的问题和一个"这很奇怪也许这是一个错误"问题.

据我了解,自动布局将尝试满足约束 - 即使它们是模棱两可的.如果它失败了,那么你会在控制台中看到错误信息,通常是"将试图通过破解......来满足".

因此,您看到的警告信息Debug View Hierarchy比"修复此错误"指令更具信息性.

那说......

你必须accountLabel和timeLabel相互制约,但它们都具有相同的Compression Resistance.因此,只要每个标签中的文本量"适合",一切都可以.

但是假设accountLabel得到一个文本字符串"这个用户名太长了,不适合这里"？

应该是这样的(我使用背景颜色来帮助看到框架):

或者像这样:

这就是为什么水平位置和宽度显示为"模糊"的原因.

您可以通过添加一行来解决该问题.假设你想accountLabel被截断:

    accountLabel.setContentCompressionResistancePriority(749, for: .horizontal)

会做的.默认值为750,因此该行告诉自动布局以提供timeLabel更高的电阻.

显示模糊的高度和垂直位置似乎不正确.我没有看到约束有什么问题.

如果我对所有三个标签使用相同的字体？没有含糊不清的警告.

如果我使用了不同的字体大小timeLabel(如你在图片显示),现在是在调试视图层次的警告.

除了...如果我滚动所以细胞被重复使用？警告已经消失了!

编辑:正如OP在他的评论中指出的那样,通过给和提供不同的Content Hugging Priority值,可以消除(在滚动之前)垂直模糊度.accountLabelcontentLabel

由于默认Hugging优先级是250:

    accountLabel.setContentHuggingPriority(249, for: .vertical)

清除警告.

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