为啥 UITableViewCell 相互重叠？

Posted 2023-03-12

【中文标题】为啥 UITableViewCell 相互重叠？

【英文标题】：Why UITableViewCell's overlap each other?为什么 UITableViewCell 相互重叠？

【发布时间】：2019-03-20 08:19:29

【问题描述】：

我有一个简单的UITableViewCell，其中包含UIImageView 和3 个UILabel。在这里，我提供一个正常的单元格外观以深入理解问题：

正如您所注意到的，描述标签可能​​很长，所以我将numberOfLines 设置为 0。但是当描述为空或小时，就会出现问题。细胞开始相互重叠。以下是描述为空或较小时的外观：

如果您注意到，图片会相互重叠。我对视图的限制如下：

UIImageView：通向superview，宽高，垂直居中

BookName(顶部粗体标签)：顶部和尾随到superview，指向UIImageView

AuthorName(橙色标签)：顶部到书名，尾随到superview，指向UIImageView

描述（灰色标签）：尾随和底部到超级视图，顶部到 AuthorName 并导致 UIImageView（书籍图片）

我还提供了Content Hugging and Compression Resistance Priorities。我只为UILabel 提供它们。我为描述标签设置了最小的，以使其增长和缩小。

我做了什么来解决这个问题？

我意识到，如果描述为空，则单元格会变小。换句话说，标签决定了单元格的大小。另外，考虑到UIImageView 仅垂直居中这一事实，我认为我的约束不正确。所以，我决定摆脱UIImageView 垂直居中。我只为UIImageView 设置了顶部、前导、宽度和高度约束。其他约束与上述相同。但这并没有帮助，结果如下：

如您所见，UIImageView 超出了单元格边界。我认为这是因为我没有为UIImageView 提供底部约束。但我提供它是为了描述。因此，下一次尝试实际上是提供底部约束。因此，我为UIImageView 提供了顶部、左侧、底部和宽度约束。我让其他约束保持不变。最初，结果令我惊讶。以下是没有描述时单元格的外观：

看起来，一切都很好（无论如何，图像太小，它试图适应单元格大小，由标签控制），但是在滚动UITableView 之后，单元格正在改变它们的大小并以某种方式更新它们的约束。这是发生了什么：

我也尝试设置estimatedRowHeight和自动维度，但没有帮助，我不认为问题是通过这种方式解决的。因此，任何帮助表示赞赏。

【问题讨论】：

为您的描述标签设置一个高度限制，并将其 >= 设置为不会生成图像剪辑的值。

【参考方案1】：

保持图像视图上的约束导致超级视图、宽度、高度、垂直居中。保持对书名和作者标签的约束。现在在详细标签上将约束设置为作者标签的顶部，拖到超级视图，前导或左侧到图像视图，底部到超级视图。对于详细标签上的底部到超级视图约束，在属性检查器中将关系更改为大于或等于。将常数更改为您需要的值。我建议增加常数并进行测试，直到获得所需的结果。从 20 或 30 左右开始，然后进行测试，然后将值增加到其他值，直到获得所需的效果。在此常数的某个值下，您将获得效果。 希望这可以帮助。

注意：这是假设您的书名标签和作者标签至少有一些文字。它可能在其他设备上失败，因此也可以使用大小类来设置不同的约束

【讨论】：

谢谢！我会接受您的回答，但是您如何提出解决方案？你怎么猜到改变关系和常数会起作用？

还有，你说“所以也使用大小类来设置不同的约束”是什么意思？

@abay 详细标签通过您原来的关系约束设置附加到单元格的底部。在这种情况下，假设它是 20。所以在任何时候细节标签底部和超级视图底部之间的距离都将保持为 20。这可能导致图像超出单元格的范围。当您说大于或等于并提供一些恒定值假设为 30 时，细节标签底部和超级视图之间的距离永远不会小于 30。它不会低于 30，因此单元格不会变短，从而保持图像在其范围内。

@abay 简而言之，你说我的单元格不应该变得比某个特定值更短，当你说，细节标签底部和超级视图底部之间的约束关系大于或等于。

@abay 可视化约束关系相等且常数值为 20。在这种情况下，距离必须始终为 20。现在图像需要固定高度。单元格需要具有最小高度才能将图像保持在其范围内。当您的详细标签没有文本时，其高度为“0”。它将单元的底部向上拉，以根据常数保持 20 的距离。拉起时，单元格的高度可能会小于将图像保持在边界内所需的最小高度。结果，图像超出范围。