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

Posted 2023-03-10

【中文标题】在集合视图单元格中自行调整图像大小

【英文标题】：Self sizing images in collection view cell

【发布时间】：2018-10-31 02:56:58

【问题描述】：

我想将照片添加到我的收藏视图单元格之一，类似于 snapchat 所做的...

只有两个主要要求：

照片的数量会有所不同，因此整个单元格的高度也必须有所不同。

每张照片都应保持其纵横比。

我最初的想法是在单元格出队之前显示要显示的图像数组，计算每个单元格的大小，保持其纵横比，然后使用该数据在单元格内的集合视图中显示图像。但是我的结果是缺乏的。

图像的大小似乎正确，但是 UICollectionViewFlowLayout 处理的图像布局没有正确放置图像

这是计算尺寸的方法。

func calculateImageSize(images: [UIImage], bounds: CGRect) -> [CGSize] 

    var imageSizes: [CGSize] = []

    var imageWidth: Int!
    var imageHeight: Int!
    var aspectRatio: CGSize!
    var convertedRect: CGRect!

    for i in 0..<images.count 

        imageWidth = images[i].cgImage?.width
        imageHeight = images[i].cgImage?.height

        aspectRatio = CGSize(width: imageWidth, height: imageHeight)
        convertedRect = AVMakeRect(aspectRatio: aspectRatio, insideRect: bounds)

        imageSizes.append(CGSize(width: convertedRect.width, height: convertedRect.height))
    
return imageSizes

最小行间距和项间距都设置为零。

有什么建议吗？

【参考方案1】：

我认为这与图像大小无关。这是您需要自定义的布局。我进行了快速搜索，发现这个库可能会有所帮助：https://github.com/rubygarage/collection-view-layouts

【讨论】：

我认为 UICollectionViewFlowLayout 可以处理布局，因为它非常简单。如果该行中的项目没有空间，请将其移动到下一行，它实际上是这样做的，但我不明白为什么项目间的间距在发生时会发生变化。有什么想法吗？