swift iOS - 快速滚动后 UICollectionView 图像混淆

Question

我是 swift 和 iOS 编程的新手，但我已经能够在 Xcode 中为我的应用程序构建一个基本稳定的启动界面。 CollectionView 从我的家庭网络服务器上的 csv 文件创建的字典数组中抓取图像和文本。 cvs 文件包含以下格式的数据（注意，url 已更改以保护许可图像）：

csv 文件

csv file is @ url https://myserver.com/csv.txt and contains the following

Title";"SeriesImageURL
Title1";"https://licensedimage.com/url1
Title2";"https://licensedimage.com/url2
...
Title1000";"https://licensedimage.com/url1000

问题是当在 CollectionView 中快速滚动时，单元格会抓取不正确的图像。值得注意的是，如果您进行慢速或中等滚动，则会在正确的图像渲染到正确的单元格之前显示不同的图像（单元格的标签文本始终正确，只有图像永远关闭）。发生图像与带标签的正确单元格不匹配后，CollectionView 中的所有其他单元格也会显示不正确的图像。

例如单元格 1-9 将显示 Title1-9 和正确的 Image1-9 缓慢滚动时，单元格 19-27 将显示标题 19-27，将短暂显示图像 10-18，然后显示正确的图像 19-27。 当快速滚动大量单元格时（例如从单元格 1-9 到单元格 90-99），单元格 90-99 将显示标题 90-99，将显示图像 10-50ish，然后将错误地停留在图像 41-50 （或附近）。进一步滚动时，单元格 100+ 将显示正确的标题，但仅显示图像 41-50 范围内的图像。

我认为这个错误要么是因为单元重用没有正确处理，要么是因为图像缓存没有正确处理，或者两者兼而有之。这也可能是我作为初学者 iOS/swift 程序员看不到的东西。我尝试使用完成修饰符实现请求，但似乎无法按照我的代码设置方式使其正常工作。我将不胜感激这方面的任何帮助以及解释为什么修复程序会以这种方式工作。谢谢！

相关代码如下。

SeriesCollectionViewController.swift

class SeriesCollectionViewController: UICollectionViewController, UISearchBarDelegate {

let reuseIdentifier:String = "SeriesCell"

// Set Data Source Models & Variables
struct seriesModel {

    let title: AnyObject
    let seriesimageurl: AnyObject
}
var seriesDict = [String:AnyObject]()
var seriesArray = [seriesModel]()

// Image Cache
var imageCache = NSCache() 

override func viewDidLoad() {
    super.viewDidLoad()
    // Grab Data from Source
    do {

        let url = NSURL(string: "https://myserver.com/csv.txt")
        let fullText = try NSString(contentsOfURL: url!, encoding: NSUTF8StringEncoding)
        let readings = fullText.componentsSeparatedByString("\n") as [String]
        var seriesDictCount = readings.count
        seriesDictCount -= 1
        for i in 1..<seriesDictCount {
            let seriesData = readings[i].componentsSeparatedByString("\";\"")
            seriesDict["Title"] = "\(seriesData[0])"
            seriesDict["SeriesImageURL"] = "\(seriesData[1])"
            seriesArray.append(seriesModel(
                title: seriesDict["Title"]!,
                seriesimageurl: seriesDict["SeriesImageURL"]!,
            ))
        }
    } catch let error as NSError {
        print("Error: \(error)")
    }
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    imageCache.removeAllObjects()
    // Dispose of any resources that can be recreated.
}

//...
//...skipping over some stuff that isn't relevant
//...

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> SeriesCollectionViewCell {
    let cell: SeriesCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! SeriesCollectionViewCell

    if (self.searchBarActive) {
        let series = seriesArrayForSearchResult[indexPath.row]
        do {
            // set image
            if let imageURL = NSURL(string: "\(series.seriesimageurl)") {
                if let image = imageCache.objectForKey(imageURL) as? UIImage {
                        cell.seriesImage.image = image
                } else {
                    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), {
                        if let tvimageData = NSData(contentsOfURL: imageURL) {
                            let image = UIImage(data: tvimageData)
                            self.imageCache.setObject(image!, forKey: imageURL)
                                dispatch_async(dispatch_get_main_queue(), { () -> Void in
                                    cell.seriesImage.image = nil
                                    cell.seriesImage.image = image
                                })
                        }
                    })
                }
            }
            cell.seriesLabel.text = "\(series.title)"
        }
    } else {
        let series = seriesArray[indexPath.row]
        do {
            // set image
            if let imageURL = NSURL(string: "\(series.seriesimageurl)") {
                if let image = imageCache.objectForKey(imageURL) as? UIImage {
                        cell.seriesImage.image = image
                } else {
                    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), {
                        if let tvimageData = NSData(contentsOfURL: imageURL) {
                            let image = UIImage(data: tvimageData)
                            self.imageCache.setObject(image!, forKey: imageURL)
                            dispatch_async(dispatch_get_main_queue(), { () -> Void in
                                cell.seriesImage.image = nil
                                cell.seriesImage.image = image
                            })
                        }
                    })
                }

            }
            cell.seriesLabel.text = "\(series.title)"
        }
    }
    cell.layer.shouldRasterize = true
    cell.layer.rasterizationScale = UIScreen.mainScreen().scale
    cell.prepareForReuse()
    return cell
}

SeriesCollectionViewCell

class SeriesCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var seriesImage: UIImageView!
@IBOutlet weak var seriesLabel: UILabel!

}

Answer 1

您需要了解 dequeue 如何正常工作。这方面有很好的文章。

总结一下：

为了保持滚动流畅度，使用了 dequeue，它本质上是 在一定限制后重复使用单元格。假设您有 10 个可见单元格 时间，它可能会创建 16-18（上面 3-4，下面 3-4，只是粗糙 估计）只有细胞，即使您可能需要 1000 个细胞。

现在当你这样做时-

let cell: SeriesCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! SeriesCollectionViewCell

您正在从已创建的单元格中重用现有单元格。这就是为什么您会在一段时间内看到旧图像，然后在加载后看到新图像。

您需要在出列单元格后立即清除旧图像。

cell.seriesImage.image = UIImage()    //nil

您实际上将在图像中以这种方式设置一个空白占位符，而不是在您的情况下将 imageCache 设置为 nil。

解决了这个问题-

值得注意的是，如果您进行慢速或中速滚动，则会在正确的图像被渲染到正确的单元格之前显示不同的图像（单元格的标签文本始终正确，只有图像永远关闭）。

现在在为当前单元格分配图像时，您需要再次检查您分配的图像是否属于该单元格。您需要检查这一点，因为您分配给它的图像视图正在被重复使用，并且它可能与 indexPath 处的单元格相关联，该 indexPath 与生成图像加载请求时的位置不同。

当您将单元格出列并将 image 属性设置为 nil 时，请让 seriesImage 为您记住当前的 indexPath。

cell.seriesImage.indexPath = indexPath

稍后，如果 imageView 仍然属于先前分配的 indexPath，则只需将图像分配给它。这 100% 可以重复使用单元格。

if cell.seriesImage.indexPath == indexPath
cell.seriesImage.image = image

您可能需要考虑在 UIImageView 实例上设置 indexPath。这是我为类似场景准备并使用的东西- UIView-Additions

它在 Objective-C 和 Swift 中都可用。

Answer 2

在您的自定义单元格类中实现func prepareForReuse()。并在 prepareForReuse() 函数中重置您的图像。所以它会在重用单元格之前重置图像视图。