图像在表格视图单元格中下载后调整大小

Posted

技术标签:

【中文标题】图像在表格视图单元格中下载后调整大小【英文标题】:Image getting resized after download in tableview cell 【发布时间】:2018-06-12 21:17:15 【问题描述】:

我从表格视图单元格中的 URL 获取图像。图像视图拥抱表格视图单元格中单元格的右上角和右下角。图片左边是文字。我希望文本自动设置表格视图单元格的高度,并且我希望图像符合文本设置的大小。我该怎么做?现在它正在工作,但是当下载图像时,单元格会调整大小以变得更大,因为它使用了图像的大尺寸。结果,表格视图中的单元格变得非常高。我该如何解决这个问题?

我知道问题是因为我在两个标签之间使用了大于或等于约束,您可以在下面的屏幕截图中看到。但我需要大于或等于约束。

这是我的约束的样子:

这是他们的样子,也是我想要的样子:

【问题讨论】:

设置图像视图高度等于文本高度? 我试过了,它仍然在扩展。我尝试设置图像视图的顶部以匹配最高文本的顶部和图像视图的底部以匹配文本的底部,并且发生了同样的问题 我将不等式约束更改为常量约束,但我仍然遇到同样的问题。我还尝试将所有标签放在一个视图中,然后将该视图设置为等于图像视图的高度,但这并没有解决它。这就是你的建议吗? 这是有道理的,这就是我摆脱不平等的原因。但问题仍然存在。我希望标签成为单元格高度的决定因素。按照我的设置方式,我必须将其中一个标签设置为比其他标签具有更低的内容拥抱优先级。图像视图仍然具有最低的内容拥抱优先级,但我认为这在这里并不重要。是否可以主要使用标签来设置高度?并让图像视图符合标签的大小? 这正是我所拥有的,但是一旦图像被下载,图像视图仍然会继续扩展单元格。如果这有什么不同,我正在使用翠鸟下载图像。我添加了一个新图像,其中包含我的约束外观 【参考方案1】:

这似乎是一个或多或少按照您的意愿布置的单元:

第一个标签有三行。第二个标签有四行。第三个标签有一行。第一个标签对单元格内容视图有一个前导约束和一个尾随约束;其他两个标签的前缘和后缘与之对齐。从上到下有四个约束,内容视图到第一个标签到第二个标签到第三个标签到内容视图。

图像视图的顶部与第一个标签顶部对齐,底部与第三个标签底部对齐,其前缘约束到第一个标签后缘,其后缘约束到内容视图。

就是这样。

编辑对不起,我遗漏了一部分。对于您的用例,图像视图的垂直内容压缩阻力需要低于任何标签的垂直拥抱优先级。那就是:“让标签决定我能有多高。”您的标签具有 251 的垂直拥抱优先级,所以 250 就可以了。

【讨论】:

我确实在做同样的事情,但由于某种原因它不起作用。我什至使用的是静态图像而不是下载它。您一定是在调整其中一个标签的内容拥抱优先级吧? 现在@do2 说的有效。当我将图像视图的高度设置为等于单元格的高度时,就解决了问题 如果我不调整它们,情节提要给我一个错误我该如何摆脱这个错误? 忽略它。故事板不了解自我调整大小的单元格。运行时没有问题。 [我认为您可以通过将最底部的约束转换为 >= 不等式来消除警告,但我没有打扰。] 查看我编辑的答案,这应该澄清。如果你愿意,我会在你的 github 项目上提出一个 pull request 来实现这个修复。【参考方案2】:

您已经为 3 个标签设置了约束,现在为图像视图设置 equal height 到您的单元格(90-95% 应该这样做)。所以标签控制单元格的高度,然后单元格控制图像视图的高度。

编辑:我认为你把事情复杂化了。您所有的单元格都将具有相同的高度(标题、预览、分别为 3、4、1 行的来源),让它们设置高度,您不需要按照我建议的方式拥抱内容优先级。 我会使用相等的宽度来设置单元格中所有项目的宽度,我会设置水平中心,对于约束之间的间距,你可以使用上下约束或设置垂直中心,你就完成了。

请记住,自上而下的领先并不总是最好的选择,有时(像这样)会引起头痛。

【讨论】:

标签没有控制单元格的高度,因为我正在更改单元格中一个标签的内容拥抱优先级以停止错误。我不应该这样做吗? 不,单元格的高度可能不同。我在情节提要中分别将行设置为 3、4、1 行,但这并不一定意味着每个标签中都有足够的文本来填充所有行。我希望标签根据标签中的文本量来设置高度。根据我的经验,一旦您在设置单元格高度的单元格中有 UILabel,其中一个标签需要具有较低的内容拥抱优先级。我在容器内垂直居中右侧的图像视图 源是1行,预览是4行,除非整篇文章少于4行??所以唯一的机会是标题会小于 3,更糟糕的情况是场景 2?现在 1 行是否值得破坏 tableView 的统一性? 我从您对 matt 的评论中看到我的回答解决了您的问题,请考虑接受它。

以上是关于图像在表格视图单元格中下载后调整大小的主要内容,如果未能解决你的问题,请参考以下文章

ios在表格视图单元格中视觉调整图像大小

异步下载后图像调整大小 AFNetworking UiTableView

在表格视图单元格中动态调整子视图的大小

自调整大小表格单元格中的 ImageView 在应用 Aspect Fit 之前使用图像的高度

在集合视图单元格中自行调整图像大小

为啥自调整大小的表格视图单元格中的 UIImageView 具有内容模式 AspectFit 的原始高度?