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

Question

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

在我的视图控制器的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()

在情节提要中，我已正确设置布局约束，以便单元格宽度尊重imageViewWidthConstraint。

以下是运行我的应用时的结果：

如您所见，单元格的宽度为 400，尽管已加载图像并更新了布局。因此，图像会被拉伸以填充图像视图。
当我向右滚动然后返回时，单元格将从集合视图中删除并重新加载，现在布局正确：

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

我在这里做错了什么？

Answer 1

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

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

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

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

你可以有

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

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

除此之外，我真的没有看到任何好的解决方案让整个事情看起来不错（不跳来跳去）。