UITableViewCell 无法将标签约束到右边缘

Posted 2023-02-27

【中文标题】UITableViewCell 无法将标签约束到右边缘

【英文标题】：UITableViewCell Can Not Constrain Label to Right Edge

【发布时间】：2015-06-17 05:13:29

【问题描述】：

我已将UITableViewCell 子类化（带有 xib），并且我注意到当我使用自动布局/约束时，我放置在 Interface Builder 中的标签在运行时无法正确显示。

首先，我将三个标签相对于单元格的内容视图左、中、右对齐。

当我运行我的应用程序时，最左边的标签在左边，中间的标签在右边，最右边的标签看不到。

我在-tableView:cellForRowAtIndexPath:（在承载表格视图的UIViewController 子类中）记录了单元格内容视图的框架，我得到了这个值：

(0.0, 0.0, 600.0, 43.5)

据报道宽度为 600，但我认为这是通用的“任何设备”故事板大小（尽管奇怪的是，单元来自单独的 xib，只有单元视图，而不是故事板或 xib视图控制器的），并且在传递给它后将由表视图相应地调整大小（作为旁注，请注意高度为 43.5，不是 44！ )。

我尝试了几件事，发现如下：

如果我在标签上针对单元格的前导（左）、顶部和底部边缘设置约束，它会正确显示。 如果我将标签放置在 Interface Builder 中单元格的最右侧边缘，没有任何限制，它会显示我放置它的位置（当然，在旋转到横向时，它会与左边缘保持固定距离，而不是紧贴右边缘）。 如果我将标签放置在任何地方，并向容器的后（右）边缘添加约束，它是否显示取决于约束指定的距离。也就是说，约束似乎被固定在单元格的原始右边缘 +600 上。如果我将它放在最左边的边缘附近，但将约束拖到后沿，它会出现在右边的某个地方。

我尝试从单元格的代码中记录标签的框架，如下所示：

override func layoutSubviews()

    super.layoutSubviews()

    // (...label should be at the right position now?)

    println("Label frame: \(rightLabel.frame)") 

在 Interface Builder 上，标签为 41 x 21，位于 (271, 11) 处。 上面的日志在一行中被调用两次，并给出：

Label frame: (271.0, 11.0, 41.0, 21.0)
Label frame: (544.0, 11.0, 41.0, 21.0)

相反，如果我删除尾随约束并将其替换为内容视图左边缘的前导约束，并将标签留在 Interface Builder 中的相同位置，则上述日志给出：

Label frame: (271.0, 11.0, 41.0, 21.0)
Label frame: (278.0, 11.0, 41.0, 21.0)

那么，表格视图单元格上的尾随约束是怎么回事？如何将标签与右边缘对齐？？

编辑：我将以下行添加到单元格的 layoutSubviews() 方法中：

println("Own frame: \(self.frame)")

我得到这个输出：

Label frame: (271.0, 11.0, 41.0, 21.0)
Own frame: (0.0, 0.0, 600.0, 44.0)
Label frame: (544.0, 11.0, 41.0, 21.0)
Own frame: (0.0, 0.0, 600.0, 44.0)

因此，单元格保持在 600 磅宽，即使在放入表格视图之后！

编辑 2： 所以，我发现了问题，显然它在其他地方：表格本身卡在 600 点宽，因为我没有将它限制在 Interface Builder 中的视图控制器的视图边缘。

真傻！

一旦我将表格视图的四个边缘固定到其父视图的边缘，问题就会自行解决。

第一次在 Interface Builder 中使用表格视图...

【问题讨论】：

你有多少个标签

现在，只有这个rightLabel。我删除了所有其他内容以查明原因。

表示表格视图单元格右侧只有一个标签

但是如果您将标签放置在距左边缘 600 点的位置，则它不会显示在任何手机中，您只想在横向模式下显示

能否请您发布一张图片，说明您想如何在 tableview 单元格上显示标签，然后我可以完全帮助您

【参考方案1】：

首先从这三个标签中删除所有约束，然后按照此步骤逐个添加约束，如下所述。

对于左标签选择您的标签，转到 pin 菜单并为其添加这 5 个约束。：

为中心标签添加这两个约束，使其始终出现在中心：

对于右标签添加这 5 个约束：

结果将适用于所有屏幕：

HERE 是示例项目。

【讨论】：

我添加了您建议的约束，但没有更改。恐怕我的视图控制器/表格视图设置有问题，表格视图有 600 点宽（部分不在屏幕上）？

我自己发现了真正的问题，请参阅我的问题的编辑。非常感谢您的帮助。

我正在将示例项目添加到答案中，以便对其他人有所帮助..:)

【参考方案2】：

将此约束应用于您的标签

左标签的约束 1. 引导到superview 2. 顶到superview 3. 修复高宽

中心标签的约束 1.水平到superview 2. 顶到superview 3. 修复高宽

右标签的约束 1. 追踪到superview 2. 顶到superview 3. 修复高宽

【讨论】：

现在，我只有正确的标签（删除了其他所有内容），但应用你说的约束没有效果。