时间戳

首页 > 解决方案 > 具有异步图像加载的自调整 UICollectionView 单元格

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

问题描述

我有一个水平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，尽管已加载图像并更新了布局。结果，图像被拉伸以填充图像视图。
当我向右滚动然后返回时，单元格将从集合视图中删除并重新加载，现在布局正确：

右单元格宽度

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

我在这里做错了什么？

标签： iosswiftasynchronousuicollectionview

解决方案

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

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

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

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

你可以有

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

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

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

推荐阅读