约束 UIImageView 高度以尊重 UITableViewCell 中的动态 UILabel 高度

Posted

技术标签:

【中文标题】约束 UIImageView 高度以尊重 UITableViewCell 中的动态 UILabel 高度【英文标题】:Constraining UIImageView height to respect dynamic UILabel height in UITableViewCell 【发布时间】:2018-10-02 04:33:33 【问题描述】:

我有一个 UITableView 填充了一种类型的自定义 UITableViewCell。每个单元格包含一个title(UILabel)、subtitle(UILabel)和thumbnail(UIImageView),如下所示。

三个子视图的宽度都是固定的,但只有字幕标签的高度是固定的。标题标签的高度根据文本量是动态的。我已将标题标签的 numberOfLines 设置为 0 以反映这一点。

我的目标:单元格的高度应该由标题标签的高度决定。换句话说,单元格高度应该是两个标签的高度加上三个垂直填充间隙的总和。图像高度应设置为单元格的结果高度。

我当前的实现:我设置了以下自动布局约束:

缩略图在顶部、左侧和底部与 superview 挂钩 缩略图宽度与父视图宽度成 0.2 的倍数成正比 缩略图的右侧与标题和副标题挂钩(尾随空格 = 8) 标题与顶部和右侧的超级视图挂钩(尾随空格 = 8) 标题底部与副标题挂钩(尾随空格 = 8) 标题高度大于等于24 字幕在右侧和底部与 superview 挂钩(尾随空格 = 8) 字幕高度等于20

另外:

标题numberOfLines = 0 缩略图contentMode = 纵横比填充 缩略图clipToBounds = true

问题:图片高度不尊重标签高度,所以单元格高度设置为图片全高,标题标签垂直拉伸。考虑到我使用的限制,这是可以理解的,但这不是我想要发生的。

我的问题:如何约束 UIImageView 的高度以尊重单元格高度(由动态标签高度确定),而不是让单元格高度尊重 UIImageView 高度?

我的环境

Xcode 10 ios 11 和 12 斯威夫特 4.2

【问题讨论】:

【参考方案1】:

尝试设置thumbnail垂直compression resistance低于title垂直hugging priority。在代码中它看起来像这样:

    thumbnail.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
    titleLabel.setContentHuggingPriority(.required, for: .vertical)

【讨论】:

您不应该也为标签设置优先级吗?这样如果图像视图更大,那么适当的标签会被调整大小,而另一个标签会留下一个?或者如果没有设置优先级,它们的大小是否相同? 有问题的字幕设置了高度限制的固定高度,因此不需要它。在其他情况下是的,我们也必须为其更改一些优先级【参考方案2】:

我将解释使这成为可能的垂直限制。

使用足够的填充将标签的顶部固定到 contentView,以便图像视图留在其中。 将 subtitleLabel 的顶部固定到 titleLabel 的底部。 将字幕的底部固定在 contentView 的底部,以便图像视图留在其中。

您的单元格现在具有基于上述约束的高度。现在您只需确保将图像视图放置在此高度内。

将缩略图顶部固定到标签顶部,底部固定到字幕标签底部。

例子:

titleLabel.top -> contentView.top + 10 subtitleLabel.top -> titleLabel.bottom + 5 subtitleLabel.bottom -> contentView.bottom - 10 imageView.top -> titleLabel.top - 5 imageView.bottom -> subtitleLabel.bottom + 5

【讨论】:

这确实有效,但我选择了其他解决方案,因为它看起来更适合我的用例。 @WillB 我知道它更短,但它如何更干净? 真的没有太多。我只需要选择一个,虽然两种解决方案都同样强大,但无论出于何种原因,我都更喜欢调整压缩阻力和拥抱优先级的想法,而不是我必须做的事情。 @WillB 自动布局代码不会破坏您的任何约束,因此不会在运行时根据拥抱优先级进行额外的计算检查需要破坏哪些约束,这使得自动布局代码更快 IMO。同意另一个答案更容易,但 IMO 不是最优的。 默认使用更高的固有尺寸,因为默认的抗压性高于默认的拥抱优先级

以上是关于约束 UIImageView 高度以尊重 UITableViewCell 中的动态 UILabel 高度的主要内容,如果未能解决你的问题,请参考以下文章

自动布局约束没有得到尊重

使用Xcode 6中的AutoLayout约束模拟方面适合行为

如何以编程方式更改 UIImageView 的高度?

UIImageView 创建额外的宽度/高度约束

UIImageView 高度不是自动布局约束后子图像高度的高度。

动画 UIImageView 高度约束空白