ios - 如何优化通过 Parse.com 查询填充的 UICollectionView？

Question

我有一个包含大约 150 张图像的 Parse.com 查询，填充了一个 UICollectionView。图像根据用户点击以进入 UICollectionView 的按钮而变化。点击后，集合开始下载，您很快就能看到前三四张图片。

但是，当您滚动时，您会看到已下载的相同图像被复制并四处移动，并与尚未下载的图像交换位置。最终他们都下载了，但是需要很长时间。 (大约 90 秒。)最重要的是，直到用户滚动到图像的位置并等待它，图像才会开始加载。

我是一名开发新手，所以我不知道这是一个明显的修复还是需要一些认真的工作。我的代码在这里:

UICollectionView 代码:

var exp = ""

class CollectionCollectionViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

@IBOutlet weak var collectionView: UICollectionView!

 override func viewDidLoad() {
    images = []
    parseObjects = []
    imageNames = []
    imageExpansions = []

    var downloadCards = PFQuery(className: "Cards")
    downloadCards.whereKey("ExpansionNumber", equalTo:"\(exp)")
    downloadCards.limit = 200
    downloadCards.orderByAscending("Number")
    downloadCards.findObjectsInBackgroundWithBlock {

        (objects: [AnyObject]?, error: NSError?) -> Void in
        if error == nil {

            println("Successfully retrieved \(objects!.count) cards.")
            if let objects = objects as? [PFObject] {
                for object in objects {
                    parseObjects.append(object["Image"] as! PFFile)
                    imageNames.append(object["Number"] as! String)
                    imageExpansions.append(object["ExpansionNumber"] as! String)
                    self.collectionView.reloadData()
                }
            }
        } else {
            println("Error: \(error!) \(error!.userInfo!)")
        }
    }
}

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

    return parseObjects.count

}

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

    let cell: CardsCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! CardsCollectionViewCell
    parseObjects[indexPath.row].getDataInBackgroundWithBlock{

        (imageData: NSData?, error: NSError?) -> Void in

        if error == nil {

            let image = UIImage(data: imageData!)

            cell.cardsImg.image = image

        }   

    }
    //cell.cardLabel.text = imageNames[indexPath.row]
    return cell
}
}

此处的按钮转场/查询标识符代码:

var images = [UIImage]()
var parseObjects = [PFFile]()
var imageNames = [String]()
var imageExpansions = [String]()

class selectExpansionViewController: UIViewController {

@IBAction func xy1Button(sender: AnyObject) {
    exp = "59"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xy2Button(sender: AnyObject) {
    exp = "60"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xy3Button(sender: AnyObject) {
    exp = "61"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xy4Button(sender: AnyObject) {
    exp = "62"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xy5Button(sender: AnyObject) {
    exp = "63"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xydcButton(sender: AnyObject) {
    exp = "63-2"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func xy6Button(sender: AnyObject) {
    exp = "64"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw1Button(sender: AnyObject) {
    exp = "48"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw2Button(sender: AnyObject) {
    exp = "49"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw3Button(sender: AnyObject) {
    exp = "50"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw4Button(sender: AnyObject) {
    exp = "51"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw5Button(sender: AnyObject) {
    exp = "52"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw6Button(sender: AnyObject) {
    exp = "53"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw7Button(sender: AnyObject) {
    exp = "54"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw8Button(sender: AnyObject) {
    exp = "55"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw9Button(sender: AnyObject) {
    exp = "56"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw10Button(sender: AnyObject) {
    exp = "57"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func bw11Button(sender: AnyObject) {
    exp = "58"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func hgss1Button(sender: AnyObject) {
    exp = "43"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func hgss2Button(sender: AnyObject) {
    exp = "44"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

@IBAction func hgss3Button(sender: AnyObject) {
    exp = "45"
    self.performSegueWithIdentifier("jumpToCollectionView", sender: self)
}

Answer 1

主要问题是 UICollectionView 重用了单元格。

所以，当你使用:

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

您无法确定您是在使用新电池还是重复使用另一个电池。

您需要做的是用一些占位符图像(可能只是一个白色图像)设置 UIImageView。然后解析将在检索数据时更新图像。

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

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

        cell.cardsImg.image = "your placeholder image while the data are retrived from Parse"

        parseObjects[indexPath.row].getDataInBackgroundWithBlock{

            (imageData: NSData?, error: NSError?) -> Void in

            if error == nil {

                let image = UIImage(data: imageData!)

                cell.cardsImg.image = image

            }   

        }
        //cell.cardLabel.text = imageNames[indexPath.row]
        return cell
    }

还有一点。如果按钮执行几乎相同的操作，则必须重构 IBActions。您可以将多个按钮连接到同一个 IBAction，然后用标签识别被点击的按钮。因此，在 Storyboard 中，您为每个按钮设置了不同的标签，然后在函数中使用 sender.tag 读取该标签。您的代码会更好/更容易。