ios - UICollectionView 在单元格中显示错误的图像

Question

我正在构建一个 UITableView，其中将包含具有不同布局的单元格。我遇到问题的单元格中嵌入了一个从 API 生成的 UICollectionView。

类别名称和 ID 正确填充到单元格中，但 UICollectionView 中的图像没有。图像加载，但它们不适合该类别。 Screen capture of how the collection is loading currently

我尝试过的一些事情:

• 对每个类别的 ID 进行硬编码，而不是动态生成它们。当我这样做时，正确的图像加载(有时但不总是)......如果它们正确加载，当我滚动图像时，图像会变为错误的图像

• prepareForReuse() 函数......我不确定我会把它放在哪里以及我会在其中重置什么(我有代码我相信已经有点 nils 图像 [下面包含的代码] )

我花了几个小时试图解决这个问题，但我被卡住了......任何建议都会受到赞赏。

我的 View Controller :

class EcardsViewController: BaseViewController {

@IBOutlet weak var categoryTable: UITableView!

var categories = [CategoryItem]()

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    self.categoryTable.dataSource! = self
    self.categoryTable.delegate! = self

    DispatchQueue.main.async {
        let jsonUrlString = "https://*********/******/category"
        guard let url = URL(string: jsonUrlString) else { return }

        URLSession.shared.dataTask(with: url) { (data, response, err) in
            guard let data = data else { return }

            if err == nil {
                do {
                    let decoder = JSONDecoder()
                    let ecardcategory = try decoder.decode(Category.self, from: data)
                    self.categories = ecardcategory.category
                    self.categories.sort(by: {$0.title < $1.title})
                    self.categories = self.categories.filter{$0.isFeatured}
                } catch let err {
                    print("Err", err)
                }

                DispatchQueue.main.async {
                    self.categoryTable.reloadData()
                }
            }
        }.resume()
    }
}

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

}

extension EcardsViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return categories.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "EcardsCategoriesTableViewCell", for: indexPath) as! EcardsCategoriesTableViewCell
            cell.categoryName.text = ("\(categories[indexPath.row].title)**\(categories[indexPath.row].id)")
            cell.ecardCatId = String(categories[indexPath.row].id)
            return cell

    }

}

我的表格单元格:

class EcardsCategoriesTableViewCell: UITableViewCell {

@IBOutlet weak var categoryName: UILabel!
@IBOutlet weak var thisEcardCollection: UICollectionView!


var ecardCatId = ""
var theseEcards = [Content]()
let imageCache = NSCache<NSString,AnyObject>()

override func awakeFromNib() {
    super.awakeFromNib()

    // Initialization code
    self.thisEcardCollection.dataSource! = self
    self.thisEcardCollection.delegate! = self

    DispatchQueue.main.async {
        let jsonUrlString = "https://**********/*******/content?category=\(self.ecardCatId)"
        guard let url = URL(string: jsonUrlString) else { return }
        URLSession.shared.dataTask(with: url) { (data, response, err) in
            guard let data = data else { return }

            if err == nil {
                do {
                    let decoder = JSONDecoder()
                    let ecards = try decoder.decode(Ecards.self, from: data)
                    self.theseEcards = ecards.content
                    self.theseEcards = self.theseEcards.filter{$0.isActive}

                } catch let err {
                    print("Err", err)
                }

                DispatchQueue.main.async {
                    self.thisEcardCollection.reloadData()
                }
            }
        }.resume()
    }
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state

}
}

extension EcardsCategoriesTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource {

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return theseEcards.count > 7 ? 7 : theseEcards.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "EcardCategoriesCollectionViewCell", for: indexPath) as! EcardCategoriesCollectionViewCell
    cell.ecardImage.contentMode = .scaleAspectFill
    let ecardImageLink = theseEcards[indexPath.row].thumbSSL
    cell.ecardImage.downloadedFrom(link: ecardImageLink)
    return cell
}

}

Collection View 单元格:

class EcardCategoriesCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var ecardImage: UIImageView!
}

“下载”图像的扩展:

extension UIImageView {

func downloadedFromReset(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFit, thisurl: String) {
    contentMode = mode
    self.image = nil
    // check cache
    if let cachedImage = ImageCache.shared.image(forKey: thisurl) {
        self.image = cachedImage
        return
    }

    URLSession.shared.dataTask(with: url) { data, response, error in
        guard
            let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
            let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
            let data = data, error == nil,
            let image = UIImage(data: data)
            else { return }
        ImageCache.shared.save(image: image, forKey: thisurl)
        DispatchQueue.main.async() {
            self.image = image
        }
        }.resume()
}
func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFit) {
    guard let url = URL(string: link) else { return }
    downloadedFromReset(url: url, contentMode: mode, thisurl: link)
}
}

Answer 1

UICollectionViewCell 和 UITableViewCell 都被重用了。当一个人滚出屏幕顶部时，它会重新插入可见单元格下方，作为将出现在屏幕上的下一个单元格。单元保留在此出队/重新排队过程中它们拥有的任何数据。 prepareForReuse 的存在是为了让您可以将 View 重置为默认值并清除上次显示时的所有数据。这在使用异步进程(例如网络调用)时尤为重要，因为它们的生命周期可能超过显示单元格的时间。此外，您在 awakeFromNib 中进行了大量非设置工作。每次显示单元格时不会调用此方法，它只会在第一次显示单元格时调用。如果该单元格离开屏幕并被重复使用，则不会调用 awakeFromNib。这可能是您的 Collection View 包含错误数据的一个重要原因，当它们出现在屏幕上时，它们从不发出网络请求。

EcardsCategoriesTableViewCell:

prepareForReuse 应该被实现。此方法中需要发生一些事情:

• theseEcards 应该为空。当表格 View 滚出屏幕时，您希望摆脱 Collection View 数据，否则下次显示该单元格时，它可能会显示错误单元格的 Collection View 数据。
• 您应该保留对在 awakeFromNib 中运行的 dataTask 的引用，然后在 prepareForReuse 中对该 dataTask 调用取消。如果不这样做，单元格可以显示、消失，然后在 dataTask 完成之前被重新使用。如果是这种情况，它可能会将预期值替换为上一个 dataTask 中的值(应该在滚动到屏幕外的单元格上运行的值)。

此外，网络调用需要移出awakeFromNib:

• 您只会在 awakeFromNib 中进行网络调用。只有在第一次创建单元格时才会调用此方法。当您重用一个单元格时，它不会被调用。此方法应该用于从 nib 执行任何额外的 View 设置，但不是向单元格添加数据的主要入口点。我会在您的单元格上添加一个方法，让您设置类别 ID。这将发出网络请求。它看起来像这样:

  func setCategoryId(_ categoryId: String) {
      DispatchQueue.main.async {
          let jsonUrlString = "https://**********/*******/content?category=\(categoryId)"
          guard let url = URL(string: jsonUrlString) else { return }
          URLSession.shared.dataTask(with: url) { (data, response, err) in
              guard let data = data else { return }
  
              if err == nil {
                  do {
                      let decoder = JSONDecoder()
                      let ecards = try decoder.decode(Ecards.self, from: data)
                      self.theseEcards = ecards.content
                      self.theseEcards = self.theseEcards.filter{$0.isActive}
  
                  } catch let err {
                      print("Err", err)
                  }
  
                  DispatchQueue.main.async {
                      self.thisEcardCollection.reloadData()
                  }
              }
          }.resume()
      }
  }
  

这将在 EcardsViewController 的 cellForRowAt dataSource 方法中调用。

EcardCategoriesCollectionViewCell:

这个单元格有类似的问题。您正在异步设置图像，但不会在要重新使用单元格时清除图像并取消网络请求。 prepareForReuse 应该被实现并且下面应该发生在里面:

• 应清除 ImageView 中的图像或将其设置为默认图像。
• 应该取消图像请求。这将需要一些重构来完成。您需要在 Collection View 单元格中保留对 dataTask 的引用，以便您可以在适当的时候取消它。

---

在单元格中实现这些更改后，您可能会注意到 TableView 和 Collection View 感觉很慢。数据不是立即可用的。您需要缓存数据或以某种方式预加载数据。这是一个比适合本主题的讨论更大的讨论，但这将是您的下一步。