UITableViewCell中带有图像的动态标签？

Posted 2023-03-12

【中文标题】UITableViewCell中带有图像的动态标签？

【英文标题】：Dynamic label with image in UITableViewCell?

【发布时间】：2018-08-09 14:48:05

【问题描述】：

我们有两个（第一个标签动态高度）标签和一个在 UITableview 中，我们的图像大小静态假设为 120*70

我们正在将图像底部约束设置为单元格超级视图，但是当标签内容高度大于图像高度时，第二个标签会自动进入单元格内。

我们正在使用 UITableViewAutomaticDimension

这里我们混淆了为标签设置约束，如何按比例设置标签和图像的高度。

如果我们尝试标签的底部约束和图像的固定高度和宽度，那么单元格底部会出现空白。

我的单元格设计如下图所示：

使用以下约束检查我的输出

输出：

约束图像：

【问题讨论】：

进入单元格的意思是文本被剪切了？能否请您解释的更清楚一点。

在标签中使用不同数量的文本显示您想要的内容。如果文本多于图像的高度，您希望布局看起来如何？如果顶部标签有多行，而底部标签只有一行？两个标签只有一行？等等……

@nasir 多行正常出现，但第二个标签进入表格内

@DonMag 底部标签总是只有一行，更新问题

@karthikeyan - 我的理解是顶部标签是多行，底部是单行。你有一个固定大小的图像。单行标签应始终与图像底部对齐？如果是这种情况，那么有几种情况： 1. 如果标签 1 的文本超出单元格中可能显示的范围，会发生什么情况？细胞是否也增加了它的大小？ 2.如果两个标签都有1行文字，标签之间会出现间距吗？

【参考方案1】：

您可以通过为底部标签和图像视图设置大于或等于底部约束来轻松做到这一点。

首先，确保您使用的是：

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 100

因此单元格/行将自动调整大小以适应内容。

对于单元格原型，我有（背景颜色，因此我们可以看到框架）：

多行标签受限于顶部 8 和前导 8（来自超级视图，不使用边距） 图像视图受限顶部8 和尾部0（来自超级视图，不使用边距），宽度119 高度87（基于您发布的图像） 1-Line Label 将前导和尾随限制为多行标签，顶部4 限制为多行标签 多行标签也被限制在图像视图的尾随8

现在关键是接下来的两个约束...

将>= 8 处的 1 行标签底部约束到父视图底部 将 >= 8 处的图像视图的底部也约束到父视图的底部

现在，单元格高度将自动扩展以适应较高的元素：

以及，没有彩色背景的外观：

完整的项目可以在这里找到：https://github.com/DonMag/AnotherExpandingCell

【讨论】：

非常感谢，感谢您的回答！！！我们通过在第二个标签下方添加一个标签并为该标签赋予底部约束来完成它，然后我们将其优先级从 1000 更改为 250。现在工作正常。而且您的答案很好，无需在其中添加额外的控件。

如果可能的话分享你的样本

@karthikeyan - 我在 GitHub 上的一个完整项目的答案底部添加了一个链接

是否可以将图像视图标签内容更多地居中？还是我必须去编程？

当标签文本超过五行时，我们在图像底部看到空白，以填充我们正在考虑将图像视图居中到超级视图