滚动时集合视图中的图像变高

Posted 2023-03-08

【中文标题】滚动时集合视图中的图像变高

【英文标题】：Image in collection view gets taller when scrolling

【发布时间】：2017-07-17 15:21:16

【问题描述】：

我正在尝试构建一个集合视图（Xcode 8、Swift 3），它每行显示两个单元格。集合视图中的每个单元格都有（从上到下）：

一个图像视图 标题标签 字幕标签

我在情节提要中设置单元格如下：

单元尺寸：250 x 258 ImageView 固定到容器单元格（0 顶部，0 前导和 0 尾部）固定到标题标签（10 底部） 标题标签固定到容器单元格（前导 12，尾随 12）和字幕标签（底部 -0.5） 固定到容器单元格的字幕标签（前导 12，尾随 12，底部 0） 四周插入 10 节 行间距最小为 10

然后在我的控制器的 viewDidLoad 中设置以下内容：

let width = collectionView!.frame.width / 2
let layout = collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = CGSize(width: width - 15, height: width - 4)

当我运行应用程序时，显然一切都很好。但是，如果我开始上下滚动或切换到不同的选项卡并返回，一些图像看起来比它们应该的高（每个项目的单元格保持相同的大小，但图像更高并将标签推到下面）。

我假设这是自动布局的问题，但我不确定如何使集合视图每行显示两个单元格，同时保持单元格内的图像以相同的比例（图像为 250 x 矩形197)。我无法为图像设置固定的宽度和高度值，因为我需要它根据屏幕尺寸按比例缩放。

我已经在网上寻找解决方案，但大多数集合视图教程都使用方形图像，其中为宽度和高度设置了相同的值，因此它们没有讨论如何在矩形图像中保持比例。

【问题讨论】：

您是否在图像视图中勾选了“剪辑到边界”？

是的，不幸的是这并不能解决问题。它也是随机发生的，所有图像的大小都相同。

由于您不想静态设置宽度和高度，您可以将其纵横比设置为1:27 以保持图像与250x197 相同

您是否在图像视图上设置了纵横比约束？如果它始终是固定的纵横比，那么您也可以添加它。

纵横比约束似乎起到了作用。谢谢！

【参考方案1】：

这样可以将问题标记为已回答！:)

“由于您不想静态设置宽度和高度，您可以将其纵横比设置为1:27 以使您的图像保持与 250x197 相同的纵横比”