ios - 为什么 collectionView 在滚动时卡住？

Question

我正在尝试创建一个带有照片滤镜的简单应用，例如 Instagram。所以，我捕获了我的图像，然后我需要对该图像实现过滤器。在底部我有一个 UICollectionView(水平滚动)，我可以在其中查看我有哪些过滤器以及它们在我的图像上的外观。

但是当我滚动我的 UICollectionView - 它卡住并且我的过滤器应用于每个新单元格(因为重用过程)。但是 Instagram 是如何做到的，当我滚动过滤器时它们不会卡住？

我已经试过了:

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell: imageFilterCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! imageFilterCell

let queue = NSOperationQueue()

    let op1 = NSBlockOperation { () -> Void in
        let img = UIImage(data: UIImageJPEGRepresentation(self.image!, 0.1)!)
        let img1 = self.applyFilterTo(img!, filter: self.filtersImages[indexPath.row])

        NSOperationQueue.mainQueue().addOperationWithBlock({ () -> Void in
            cell.imageView.image = img1
        })
    }

    queue.addOperation(op1);

    return cell
}

但它仍然在滚动时卡住，我看到每次我的过滤器如何应用于我的单元格。我可以只执行一次然后滚动不执行任何操作，只显示应用滤镜后照片的外观吗？

Answer 1

你可以做以下两件事之一:

1. 不要使用 Collection View 的重用特性。简单地创造一组单元格并将这些单元格传递给 cellForRowAtIndexPath。这应该可以正常工作，如果你没有大量的过滤器。像这样的东西:

   func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       var cell: imageFilterCell? = nil
       if (cellsArray.count <= indexPath.row) {
           //This assumes imageFilterCell is created in code
           //If you use storyboards or xibs load it accordingly
           cell = imageFilterCell()
           cellsArray.append(cell)
       } else {
           cell = cellsArray[indexPath.row]
       }
       let priority = DISPATCH_QUEUE_PRIORITY_DEFAULT
       dispatch_async(dispatch_get_global_queue(priority, 0)) {
          let img = UIImage(data: UIImageJPEGRepresentation(self.image!, 0.1)!)
          let img1 = self.applyFilterTo(img!, filter: self.filtersImages[indexPath.row])
   
          dispatch_async(dispatch_get_main_queue()) {
                cell!.imageView.image = img1
          }
   }
   
       return cell
   

2. 为异步操作实现取消机制，因为如果在后台线程仍在应用过滤器时重复使用单元格，最终单元格将最终具有多个过滤器。为此，您可以使用 NSOperation 类中的 cancel 方法。为此，您可以在名为 operation 的自定义单元格上创建一个属性，例如:

   func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       let cell: imageFilterCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! imageFilterCell
       cell.operation.cancel()    
   
       //make the queue an instance variable
       //let queue = NSOperationQueue()
   
       let op1 = NSBlockOperation { () -> Void in
           let img = UIImage(data: UIImageJPEGRepresentation(self.image!, 0.1)!)
           let img1 = self.applyFilterTo(img!, filter: self.filtersImages[indexPath.row])
   
           NSOperationQueue.mainQueue().addOperationWithBlock({ () -> Void in
               cell.imageView.image = img1
           })
       }
   
       queue.addOperation(op1);
       cell.operation = op1
   
       return cell