首页 > 解决方案 > 除非滚动,否则 UICollectionViewCells 不会加载

问题描述

我有一个UICollectionView,我用单元格填充它。

我有一个加载动画,它停止指示所有单元格都已被填充,但单元格在我滚动之前不会显示(可能需要几次尝试)。

这与此类似:

UICollectionView 在我滚动之前没有完全加载

但不同的是,我的不会部分加载 - 但根本不会。

我的UICollectionViewDataSource

extension ProductsCollectionViewController: UICollectionViewDataSource
{

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        if searchActive
        {
            return filtered.count
        }
        else
        {
            return products.count    //return number of rows in section
        }
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "product_collection_cell", for: indexPath) as! ProductsCollectionViewCell
        cell.ProductImageView.image = nil
        cell.ProductName.text = nil
        cell.ProductPrice.text = nil
        cell.productUniqueID = nil

        let prodInCell =  searchActive ? filtered[indexPath.row] : products[indexPath.row]

        let prodID = prodInCell.getUniqueID()
        let dbRef = Storage.storage().reference().child(prodID).child("pic0.jpg")
        cell.contentMode = .scaleAspectFit
        cell.ProductImageView.image = #imageLiteral(resourceName: "DefaultProductImage")
        dbRef.downloadURL(completion:
            {
                url, error in
                if let error = error
                {
                    print (error)
                }
                else if let url = url
                {
                    cell.ProductImageView.loadImageUsingUrlString(urlString: url.absoluteString)
                    cell.ProductImageView.contentMode = UIViewContentMode.scaleToFill
                    cell.layoutIfNeeded()
                }
        })
        cell.ProductImageView.clipsToBounds = true

        //cell.ProductName = UILabel()
        cell.ProductName.text = prodInCell.getName()

        //cell.ProductPrice = UILabel()
        cell.ProductPrice.text = String(prodInCell.getPrice())
        cell.productUniqueID = prodInCell.getUniqueID()
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
    {
        // Display selected Item
        prodToLoad = products[indexPath.row]
        performSegue(withIdentifier: "view_product_information", sender:self  )
    }

    // Swift 3.0
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: CGFloat((collectionView.frame.size.width / 3) - 20), height: CGFloat(100))
    }
}

我究竟做错了什么 ?

标签: swiftuicollectionviewuicollectionviewcell

解决方案


在里面cellForRowAt,你有 2 个异步操作

1-

dbRef.downloadURL(completion:

2-

cell.ProductImageView.loadImageUsingUrlString(urlString: url.absoluteString)

考虑使用SDWebImage,因为这将保持多次下载相同的图像

//

urlStr在数组项自定义类/结构中创建一个可选属性,并在下载时设置它

if let str = prodInCell.urlStr {

    cell.ProductImageView.sd_setImage(with: URL(string:str), placeholderImage: UIImage(named: "placeholder.png"))
}
else {

       let dbRef = Storage.storage().reference().child(prodID).child("pic0.jpg")
       cell.contentMode = .scaleAspectFit
       cell.ProductImageView.image = #imageLiteral(resourceName: "DefaultProductImage")
       dbRef.downloadURL(completion:
        {
            url, error in
            if let error = error
            {
                print (error)
            }
            else if let url = url
            {
               prodInCell.urlStr = url.absoluteString // store for upcoming need
               cell.ProductImageView.sd_setImage(with: URL(string:url.absoluteString), placeholderImage: UIImage(named: "placeholder.png"))      
               cell.ProductImageView.contentMode = UIViewContentMode.scaleToFill
               cell.layoutIfNeeded()
            }
    })

 }

//

还记得

import SDWebImage

并设置要加载的项目包中的任何占位符图像,直到下载真实图像


推荐阅读