UICollectionViewCell 中图像的异步加载导致标签消失

Posted 2023-03-14

【中文标题】UICollectionViewCell 中图像的异步加载导致标签消失

【英文标题】：Asynchronous loading of image in UICollectionViewCell causes labels to disappear

【发布时间】：2018-03-12 22:34:23

【问题描述】：

我正在开发一个照片库应用程序，它基本上由一个导航控制器组成，在该控制器上加载了一个集合视图的实例。每个集合视图单元都包含一个 UIImageView 和一个图像名称标签。单元格异步加载图像。

第一次加载每个集合视图时，这一切都很好，但是如果您退回到前一个集合视图并再次前进，标签就会消失。

我认为它必须与异步加载图像有关，好像我删除图像加载标签很好，有正确的文本并且不会消失。

我不知道我在加载图像时哪里出错了......

各种组件是：

使用此扩展方法加载图像：

extension UIImageView 
public func imageFromServerURL(url: URL) 

    if ImageData.realPhotoCache.keys.contains(url.absoluteString)
        self.image = ImageData.realPhotoCache[url.absoluteString];
    else


        URLSession.shared.dataTask(with: url, completionHandler:  (data, response, error) -> Void in

            if error != nil 
                print(error)
                return
            
            DispatchQueue.main.async(execute:  () -> Void in
                let image = UIImage(data: data!)
                ImageData.realPhotoCache[url.absoluteString] = image;
                self.image = image
            )

        ).resume()
    

集合视图的单元格是这样连接的：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

    var cell: UICollectionViewCell;

    cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath);

    let imageProvider = self.imageProviderForIndexPath(indexPath: indexPath);
    (cell as! tsPhotoCollectionViewCell).photoView.imageFromServerURL(url: imageProvider.GetThumbImageUrl());
    (cell as! tsPhotoCollectionViewCell).titleLabel.text = imageProvider.GetImageTitle()!;

    return cell

集合视图在返回时被重置，如下所示：

 func reset()
    photoProviders = [ImageDataProvider]();
    self.collectionView?.reloadSections(IndexSet(integer: 0))
    startLoad()



override func viewWillAppear(_ animated: Bool) 
    if(hasNavigatedAway)
        hasNavigatedAway = false;
        self.reset();
    

集合的第一次加载通常会很好（绿色单元格，红色标签）：

https://imgur.com/g3p03yF

但在离开并返回集合视图时，标签消失了：

https://imgur.com/If2FQZS

标签有时也会随着滚动来来去去。我已经尝试了我能想到的一切，但没有任何运气..

【问题讨论】：

如何布置图像视图和标签？你使用动态单元格大小吗？此外，您的异步图像加载有潜在的错误 - 如您所知，当您滚动集合视图时，单元格会被重用，所以假设您的图像视图正在加载一个巨大的图像，并且当它这样做时您滚动集合并分配新的图像 URL到加载速度比前一个更快的单元格。之后，第一个图像被下载并覆盖第二个。

你能检查一下imageProvider.GetImageTitle()!是否返回非空字符串吗？

@DanKarbayev 单元格在主情节提要中定义，它们使用约束来定位图像和标题标签。是的，图片加载的下一步是添加一些东西来取消请求，或者检查下载完成后应用的图片是否正确，您会推荐一种特定的方法吗？

@DanKarbayev 我将单元格创建更改为将GetImageTitle() 放入变量并打印出来，它肯定包含正确的非空字符串标题。

@HenryThomas 尝试增加 UILabel 的垂直内容抗压缩优先级

【参考方案1】：

从你的截图来看，UILabels 的高度似乎被扩展的 UIImageView 压缩到了 0。尝试将 UILabel 的垂直内容压缩阻力优先级提高到 1000，使其变为不可压缩（进而使自动布局引擎压缩 UIImageView 或间距 - 取决于您的约束）。