首页 > 解决方案 > UITableViewCell中带有图像的动态标签?

问题描述

我们有两个(第一个标签动态高度)标签和一个在 UITableview 和我们的图像大小静态假设 120*70

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

我们正在使用UITableViewAutomaticDimension

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

如果我们尝试对标签进行底部约束并将高度和宽度固定到图像,那么单元格底部会出现空白。

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

单元设计图像

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

输出:

图片

约束图像:

图片

标签: iosswiftuitableview

解决方案


您可以通过将底部约束设置为大于或等于底部标签和图像视图来轻松完成此操作。

首先,确保您使用的是:

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 100

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

对于单元原型,我有(背景颜色,所以我们可以看到框架):

  • 多行标签约束顶部8和前导8(来自超级视图,不使用边距)
  • 图像视图限制顶部8和尾随0(来自超级视图,不使用边距)和宽度119高度87(基于您发布的图像)
  • 1-Line Label 约束前导和尾随到多行标签,以及顶部4到多行标签
  • 多行标签也被限制8到图像视图的尾随

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

  • 将 1 行标签的>= 8底部约束到超级视图的底部
  • 将图像视图的底部约束>= 8到超级视图的底部

在此处输入图像描述

现在,单元格高度将自动扩展以适应更高的元素:

在此处输入图像描述

并且,它在没有彩色背景的情况下看起来如何:

在此处输入图像描述

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


推荐阅读