具有自动布局配置的 UITableCell 被截断的多行 UILabel

Posted 2023-02-27

【中文标题】具有自动布局配置的 UITableCell 被截断的多行 UILabel

【英文标题】：UITableCell with auto layout configured multiline UILabel being truncated

【发布时间】：2017-07-08 20:13:58

【问题描述】：

我正在努力让一些多行标签在 tableview 单元格中表现。如本问题所述，我已经远离了根本无法可靠工作的堆栈

UILabel inside nested UIStackViews inside UITableViewCell sometimes truncating

我在 cmets 的帮助下修复了我的一个观点，但另一个观点对我不起作用，即使在移动到自动布局非堆栈视图设置之后也是如此。然后，我最终将无法使用的单元格移动到使用类似布局的视图中，并达到了在同一视图中有两个单元格的地步，一个有效，一个无效。我已经将它导出到一个新的测试应用程序中，我已经上传了here

在这个应用程序中有一个简单的表格视图，其中包含 2 个单元格。一个单元格正确显示大的多行文本并根据需要扩展单元格。如您在此处看到的，另一个单元格会停止并截断多行标签

在我看来，这两个单元格的约束条件几乎相同，所以我很困惑为什么一个有效而另一个无效。以下是它们的约束概述

由于我一直在尝试找出导致其中一个单元无法工作的原因，因此没有安装一些约束。

如果有人可以向我解释是什么导致这两个单元格的行为不同，或者更重要的是为什么其中一个标签没有填满它的表格单元格，那将不胜感激，因为我花了几个小时寻找和只是似乎无法弄清楚。

干杯！

【参考方案1】：

编辑：

首先解释一下出了什么问题……

Cell2 中右侧的“标签标签”具有显式Preferred Width = 300。我不知道内部情况，所以不能确切地说出发生了什么，但我的印象是自动布局在计算文本边界框高度时会考虑 Preferred Width 值，然后 em> 继续约束、内容、内在大小等。

只需取消选中显式选项即可解决问题。

---

原答案：

我发现从头开始创建一个新单元比尝试修改您设置的约束更容易，所以...希望可以重现。

准备：添加新的“Cell3”类；对代码进行基本编辑以适应 Cell3。如果我为标签值设置一些变量并设置元素的背景颜色以便于视觉检查和测试，我也会发现事情变得更容易。

第 1 步：添加新原型；紫色背景； TableViewCell3 类和“Cell3”重用ID；垂直拉伸它以使其足够高以使用（它不会影响运行时高度）。

第 2 步：为左侧标签添加 UIView。 Leading = 8 到 Superview。 Width = 200; Height = 100;垂直居中。高度和宽度值稍后会更改。

第 3 步：将两个左侧标签 - 1 和 2（正文字体） - 添加到 UIView。约束1Left = 0； Top = 0。约束2Left = 0； Bottom = 0.

第 4 步：将垂直间距约束从 2 添加到 7.5 的 1 并将 UIView 的高度约束更改为 >= 20（运行时可能总是 超过 20）。

第 5 步：更改 UIView 的 Width 约束为 >= 40（运行时可能总是超过 40）；为两个左侧标签添加Trailing Space to Container 约束，并将它们设置为>= 0。

第 6 步：将顶部和底部“到 Superview”约束添加到 UIView 的 >= 0。

第 7 步：添加右侧标签（Caption 1 字体，行数 0）。将Top >= 0、Right = 0、Bottom >= 0全部约束到Superview；也垂直居中。

第 8 步：添加一个水平间距约束从右侧标签到 UIView，设置为20。给右侧标签一个宽度约束= 40（运行时可能总是超过40），并将优先级设置为250。这允许包含左侧标签的UIView 控制宽度。

第 9 步：分配 IBOutlets 并运行应用程序。尝试更改文本。使左侧标签更短或更长...尝试将右侧标签设置为仅足够一行的文本...等等。

此时，事情应该看起来不错 - 直到...您在左侧标签之一中放置了太多文本，此时您将拥有一个非常、非常窄、非常非常高的右侧标签。所以...

第 10 步：将 另一个 宽度约束添加到 UIView 并将其设置为 <= 200。根据您的实际内容，您可能需要对其进行修改 - 或者将其设置为 <= 为单元格宽度的百分比。

我更新了我的原始 GitHub 存储库，以便您查看。它应该对上面列出的每个“步骤”都有一个提交，这可能会更容易遵循 - https://github.com/DonMag/CellTest2

结果：

【讨论】：

再次感谢您提供非常详细的回复。早上我会好好看看。在过去的几天里，我一直在复制单元作为备份，并同意这不是一种太糟糕的工作方式。不幸的是，显示的示例在我的原始应用程序中显示在我已经使用了一段时间的单元格中，尽管带有截断标签。它有一些更复杂的布局，但是当我最终将它剥离到与我的测试应用程序中显示的相同的复杂性时，仍然存在显示的问题，我认为值得尝试发布另一个问题。

我将尝试构建这个单元的一个希望修复的版本。正如您在我的测试应用程序中看到的那样，我的一个单元格工作了另一个看似相同受限的单元格没有。我只是不顾一切地试图找出破碎的牢房中到底有什么东西坏了，这样我就可以修复它，并在未来避免这个错误。有了您重新从头开始的建议，您是在说您不确定有什么问题吗？也许这是另一个 ios 错误示例，甚至可能只是模拟器，我还没有在实际设备上尝试过。

无论如何，再次感谢您的光临。这周我会好好看看并解决这个问题，当我对发生的事情有了更多的了解时，我会再次回复。我从没想过会在看起来如此简单的事情上花费这么多时间。单元格中的一些文本！有时，自动布局似乎是一头残酷的野兽！干杯！

啊...回去再次查看您的项目。在“单元格 2”版本中，您将截断文本，右侧的“标签标签”具有显式 Preferred Width = 300。我不为 Apple 工作，所以我无法准确告诉你发生了什么，但我觉得 Auto-Layout 在计算文本边界框高度时会考虑该值。只需取消选中该显式选项即可解决问题。

你真的是明星！感谢所有答案的所有努力，但您刚刚所做的评论是这个特定问题/示例的关键答案。如果您想将其提升为答案，我会再次接受。我记得在该单元格的早期版本中添加了该约束，然后我才使其宽度与当时的任何自动布局怪癖一起工作。然后我将它从 stackviews 转换为您的自动布局建议，然后我猜它开始导致问题。似乎是一个错误或怪癖，好像标签设置了宽度，它仍然应该能够解决所有问题。