我有一个水平的 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 中删除并重新加载,现在已正确布局:
滚动时,单元格会调整它们的宽度,有时调整到正确的宽度,有时调整到错误的宽度。
我在这里做错了什么?
最佳答案
由于您的图像是异步传入的,因此加载可能需要一些时间。只有加载它们后,您才能真正知道图像的大小或比例。这意味着对于加载的每个图像,您都需要“重新加载”您的布局。从短搜索 this看起来很有前途。
至少这样你可能会得到一些动画,否则当图像开始加载时你的单元格会一直跳动。
无论如何,我建议您避免这种情况。如果我可以假设;您正在从服务器获取一些数据,您使用传送的 URL 从中下载图像并将它们显示在 Collection View 中。最好的方法(如果可能)是请求扩展 API,以便您也可以接收图像的尺寸。所以不是
{
id: 1,
image: "https://..."
}
你可以
{
id: 1,
image: {
url: "https://...",
width: 100,
height: 100
}
}
您现在可以在下载图像之前使用这些值生成纵横比宽度/高度。
除此之外,我真的没有看到任何好的解决方案来使整个事情看起来不错(无需跳来跳去)。
关于ios - 具有异步图像加载的自调整 UICollectionView 单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55259704/