在 UICollectionView 中显示错误的图像答案

【问题标题】：Show wrong images in UICollectionView在 UICollectionView 中显示错误的图像
【发布时间】：2017-07-24 14:03:10
【问题描述】：

那里！我需要你的帮助。我在 UICollectionView 中有 UIImage，它位于 UITableView 中。当我第一次从 API 获取数据时，它会正确显示图像，但是当我开始向下滚动并返回时，它会显示错误的图像。我的代码如下所示：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! AllPostsOfUserCollectionViewCell

    let post = allPostsOfUserArray[collectionView.tag]
    if post.imageLinks.count != 0 {
        let imageLink = post.imageLinks[indexPath.row]

        if imageLink.imageLink != nil {
            let url = URL(string: imageLink.imageLink!)

            cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
            })
        }
    }

    return cell
}

我的模型如下所示：

class UserContent {

var name = ""
var imageLinks = [UserImages]()

init(name: String, imageLinks: [UserImages]?) {        
    self.name = name
    if imageLinks != nil {
        self.imageLinks = imageLinks!
    }
}

init() { }

deinit {
    imageLinks.removeAll()
  }
}


class UserImages {

var imageLink: String?

init(imageLink: String?) {
    self.imageLink = imageLink
}

init() { }

deinit {
    imageLink = ""
   }
 }

我在 UITableView 中做什么

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let index = indexPath.row

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! AllPostsOfUserTableViewCell

    cell.collectionView.tag = index

    let post = allPostsOfUserArray[index]
    if post.imageLinks.count == 0 {
        cell.collectionView.isHidden = true
    } else {
        cell.collectionView.isHidden = false
    }

    return cell
}

UPD： 我将 cell.collectionView.reloadData() 添加到 func tableView(cellForRowAt indexPath)。现在它工作正常。

【问题讨论】：

在您的所有else（您没有这样做）中，您需要删除图像或放置一个占位符。

标签： ios swift uitableview uicollectionview

【解决方案1】：

你能试试这个代码吗：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! AllPostsOfUserCollectionViewCell
    cell.imageOfAnimalInCollectionView.image = UIImage(named: "App-Default")
    let post = allPostsOfUserArray[collectionView.tag]
    if post.imageLinks.count != 0 {
        let imageLink = post.imageLinks[indexPath.row]

        if imageLink.imageLink != nil {
            let url = URL(string: imageLink.imageLink!)

            cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
            })
        }
    }

    return cell
}

【讨论】：

【解决方案2】：

这个问题有点像竞态条件。你可以参考我在similair question的回答

您可能需要找到另一个模块来下载图像并手动设置为单元格。

【讨论】：

【解决方案3】：

cell.imageOfAnimalInCollectionView.image = nil
if post.imageLinks.count != 0 {
    let imageLink = post.imageLinks[indexPath.row]

    if imageLink.imageLink != nil {
        let url = URL(string: imageLink.imageLink!)

        cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
        })
    }

}

(未测试，但应该可以工作。你也可以使用sd_image的方法分配一个空的url，用一个占位符图像来显示占位符图像。或者只给一个空的url字符串''而不带占位符图片）

每当您滚动时，单元格都会被重新使用，并且分配给单元格的图像会重新出现，因为它仍在单元格上。您必须使用 else 子句为您将图像分配给 imageView 的每个 if 删除这些图像。

希望这会有所帮助。

【讨论】：

谢谢，不过还是有些麻烦。我想，也许是因为模型不对。
@DmytroRyshchuk 很高兴您找到了解决方案。尽管如此，我认为将图像设置为 nil 或占位符图像是一个好习惯。如果您要处理更多数据，这将很有帮助

【解决方案4】：

你必须像下面这样写 else 条件 ..

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! AllPostsOfUserCollectionViewCell

    let post = allPostsOfUserArray[collectionView.tag]
    if post.imageLinks.count != 0 {
        let imageLink = post.imageLinks[indexPath.row]

        if imageLink.imageLink != nil {
            let url = URL(string: imageLink.imageLink!)

            cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
            })
        }
else{ 
      cell.imageOfAnimalInCollectionView = "defaultImage"
    }
 }
else{ 
     cell.imageOfAnimalInCollectionView = "defaultImage"
    }
    return cell
}

原因在将单元格出列后，cellectionView 会为所有下一个单元格重用创建的单元格，因此如果您不编写 else 条件或不使用 prepareForReuse 方法，它将始终在其缓存中的前一个单元格的数据。

【讨论】：