我有一个 UICollectionView,它在网格中显示图像,但当我快速滚动时,它会暂时在单元格中显示错误的图像,直到从 S3 存储下载图像,然后显示正确的图像。
我之前在 SO 上看到过与此问题相关的问题和答案,但没有一个解决方案对我有用。字典 let items = [[String: Any]]()
在 API 调用后被填充。我需要单元格从回收单元格中丢弃图像。现在有一种令人不快的图像“跳舞”效果。
这是我的代码:
var searchResults = [[String: Any]]()
let cellId = "cellId"
override func viewDidLoad() {
super.viewDidLoad()
collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: cellId)
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! MyCollectionViewCell
let item = searchResults[indexPath.item]
cell.backgroundColor = .white
cell.itemLabel.text = item["title"] as? String
let imageUrl = item["img_url"] as! String
let url = URL(string: imageUrl)
let request = Request(url: url!)
cell.itemImageView.image = nil
Nuke.loadImage(with: request, into: cell.itemImageView)
return cell
}
class MyCollectionViewCell: UICollectionViewCell {
var itemImageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.layer.cornerRadius = 0
imageView.clipsToBounds = true
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.backgroundColor = .white
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
---------
}
override func prepareForReuse() {
super.prepareForReuse()
itemImageView.image = nil
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
我将我的单元格图像加载更改为以下代码:
cell.itemImageView.image = nil
APIManager.sharedInstance.myImageQuery(url: imageUrl) { (image) in
guard let cell = collectionView.cellForItem(at: indexPath) as? MyCollectionViewCell
else { return }
cell.itemImageView.image = image
cell.activityIndicator.stopAnimating()
}
这是我的 API 管理器。
struct APIManager {
static let sharedInstance = APIManager()
func myImageQuery(url: String, completionHandler: @escaping (UIImage?) -> ()) {
if let url = URL(string: url) {
Manager.shared.loadImage(with: url, token: nil) { // internal to Nuke
guard let image = $0.value as UIImage? else {
return completionHandler(nil)
}
completionHandler(image)
}
}
}
如果用户滚动超过内容限制,我的收藏 View 将加载更多项目。这似乎是单元格重用重用图像的问题的根源。加载新项目时,单元格中的其他字段(例如项目标题)也会交换。
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (scrollView.contentOffset.y + view.frame.size.height) > (scrollView.contentSize.height * 0.8) {
loadItems()
}
}
这是我的数据加载函数
func loadItems() {
if loadingMoreItems {
return
}
if noMoreData {
return
}
if(!Utility.isConnectedToNetwork()){
return
}
loadingMoreItems = true
currentPage = currentPage + 1
LoadingOverlay.shared.showOverlay(view: self.view)
APIManager.sharedInstance.getItems(itemURL, page: currentPage) { (result, error) -> () in
if error != nil {
}
else {
self.parseData(jsonData: result!)
}
self.loadingMoreItems = false
LoadingOverlay.shared.hideOverlayView()
}
}
func parseData(jsonData: [String: Any]) {
guard let items = jsonData["items"] as? [[String: Any]] else {
return
}
if items.count == 0 {
noMoreData = true
return
}
for item in items {
searchResults.append(item)
}
for index in 0..<self.searchResults.count {
let url = URL(string: self.searchResults[index]["img_url"] as! String)
let request = Request(url: url!)
self.preHeatedImages.append(request)
}
self.preheater.startPreheating(with: self.preHeatedImages)
DispatchQueue.main.async {
// appendCollectionView(numberOfItems: items.count)
self.collectionView.reloadData()
self.collectionView.collectionViewLayout.invalidateLayout()
}
}
最佳答案
当 Collection View 将单元格滚动到边界外时, Collection View 可能会重新使用该单元格来显示不同的项目。这就是为什么您从名为 dequeue<b>Reusable</b>Cell(withReuseIdentifier:for:)
的方法中获取单元格的原因.
您需要确保,当图像准备就绪时, ImageView 仍应显示该项目的图像。
我建议您更改您的 Nuke.loadImage(with:into:)
使用闭包而不是 ImageView 的方法:
struct Nuke {
static func loadImage(with request: URLRequest, body: @escaping (UIImage) -> ()) {
// ...
}
}
这样,在collectionView(_:cellForItemAt:)
,你可以像这样加载图像:
Nuke.loadImage(with: request) { [weak collectionView] (image) in
guard let cell = collectionView?.cellForItem(at: indexPath) as? MyCollectionViewCell
else { return }
cell.itemImageView.image = image
}
如果 Collection View 不再在任何单元格中显示项目,图像将被丢弃。如果 Collection View 在任何单元格中显示项目(即使在不同的单元格中),您将图像存储在正确的 ImageView 中。
关于ios - 当异步附加新项目时,UICollectionView 快速滚动在单元格中显示错误的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44077100/