UICollectionView重复单元

Question

我有一个UICollectionView，在每个单元格中都有一个图像。这些图像由URL加载。但是，当一个单元格滚动出视图时，它会在加载之前显示另一个单元格的图像。我不知道为什么会这样。

这是我的代码：

我的UIImageView扩展从url加载：

extension UIImageView {
    public func imageFromUrl(urlString: String) {

        Alamofire.request(.GET, urlString).responseJSON{
            response in

            if let tilbudimage = UIImage(data: response.data!){
                self.image = tilbudimage

            }

        }
    }
}

UICollectionView：

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        print(DealArr.count)

        return DealArr.count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("DealCell", forIndexPath: indexPath) as! DealCell

        let deal = self.DealArr[indexPath.row]

        cell.backgroundColor = UIColor.whiteColor()

        cell.DealImage.imageFromUrl(deal["image"].string!)
        cell.DealLabel.text = deal["title"].string! + ", " + String(deal["price"].int!) + "kr."
        cell.DealDescription.text = deal["description"].string!
        cellarr.append(cell)



        return cell




    }


    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(collectionView.frame.width, 450)
    }


    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(0, 0, 0, 0)
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0.0
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1.0
    }

Answer 1

当显示单元格时，您不会清除图像。单元格从屏幕上删除后会被重用，所以在显示之前，您需要确保清除任何不应该结转的数据。通常这是通过将任何数据设置为新值来处理的。在映像的情况下，它不会立即设置新映像，而是分派一个异步任务来获取映像，然后在单元格中显示该图像。因此，图像将被重新分配，但它将等待直到从服务器接收到新映像的响应，然后才清除旧映像。

要解决这个问题，在加载新映像之前，应该将图像设置为等于零。

cell.DealImage.image = nil
cell.DealImage.imageFromUrl(deal["image"].string!)

或者您的扩展也可以通过在加载新映像之前清除图像来开始。

extension UIImageView { 
    public func imageFromUrl(urlString: String) {
        image = nil
        Alamofire...

您还可以通过在重用单元格时取消任何挂起的请求来提高加载的效率。如果您感兴趣，可以在raywenderlich上提供一个很好的教程：http://www.raywenderlich.com/85080/beginning-alamofire-tutorial

您还可以通过下载图像后缓存它们来提高性能。为此，您可以使用NSCache实例。

let imageCache = NSCache()

extension UIImageView { 
    public func imageFromUrl(urlString: String) {
        if let image = imageCache.objectForKey(urlString) as? UIImage {
            self.image = image
        }
        else {
            Alamofire.request(.GET, urlString).responseJSON{
                response in
                if let tilbudimage = UIImage(data: response.data!){
                    self.image = tilbudimage
                    imageCache.setObject(tilbudimage, forKey: urlString)
                }
            }
        }
    }
}

Answer 2

您可以从自定义的UICollectionViewCell类中使用这个。

override func prepareForReuse() {
    self.imageView.image = nil // or placeholder image

    super.prepareForReuse()
}