ios - 具有异步图像加载的自调整 UICollectionView 单元格

Question

我有一个水平的 UICollectionView，我在其中显示异步加载的图像。单元格的宽度应该适合图像。

在我的 View Controller 的 viewDidLoad 中，我设置了估计的单元格大小:

(collectionView.collectionViewLayout as? UICollectionViewFlowLayout)?.estimatedItemSize = CGSize(width: 400, height: 400)

在 cellForItem 中，我使用 Kingfisher 开始下载任务:

cell.imageView.kf.setImage(with: url) { (_, _, _, _) in 
    cell.layoutSubviews()
}

在我的单元格中，layoutSubviews 方法中有以下代码:

// 326 is the image view's height
// .aspectRatio is a custom extension that returns: size.width / size.height
imageViewWidthConstraint.constant = 326 * image.aspectRatio
layoutIfNeeded()

在 Storyboard中，我已正确设置布局约束，以便 imageViewWidthConstraint 符合单元格的宽度。

以下是运行我的应用程序时的结果:

如您所见，尽管图像已加载且布局已更新，但单元格的宽度为 400。结果，图像被拉伸(stretch)以填充 ImageView 。
当我向右滚动然后向后滚动时，单元格将从 Collection View 中删除并重新加载，现在已正确布局:

滚动时，单元格会调整它们的宽度，有时调整到正确的宽度，有时调整到错误的宽度。

我在这里做错了什么？

Answer 1

由于您的图像是异步传入的，因此加载可能需要一些时间。只有加载它们后，您才能真正知道图像的大小或比例。这意味着对于加载的每个图像，您都需要“重新加载”您的布局。从短搜索 this看起来很有前途。

至少这样你可能会得到一些动画，否则当图像开始加载时你的单元格会一直跳动。

无论如何，我建议您避免这种情况。如果我可以假设；您正在从服务器获取一些数据，您使用传送的 URL 从中下载图像并将它们显示在 Collection View 中。最好的方法(如果可能)是请求扩展 API，以便您也可以接收图像的尺寸。所以不是

{
    id: 1,
    image: "https://..."
}

你可以

{
    id: 1,
    image: {
        url: "https://...",
        width: 100,
        height: 100
    } 
}

您现在可以在下载图像之前使用这些值生成纵横比宽度/高度。

除此之外，我真的没有看到任何好的解决方案来使整个事情看起来不错(无需跳来跳去)。