self sizing collectionView with flowLayout

Question

When I use collectionView without

let flowLayout = collectionView.collectionViewLayout as!  UICollectionViewFlowLayout 
flowLayout.estimatedItemSize = CGSize (width: self.collectionView.frame.width, height: 100)

then all the cells are displayed but when I use flowLayout then cells are not displayed I've been sitting here for a week on this and can not understand why this is happening.

here my code

override func viewDidLoad() {
    super.viewDidLoad()

    collectionView.delegate = self
    collectionView.dataSource = self

    let flowLayout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

    flowLayout.estimatedItemSize = CGSize(width: self.collectionView.frame.width, height: 100)



    requestD(url: url)

}

// MARK: UICollectionViewDataSource

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}


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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if modals.count == 0 {
        return UICollectionViewCell()
    }
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCellAudio


    cell.name?.text = modals[indexPath.row].name


    let u = URL(string: "http://www.---.com" + (modals[indexPath.row].ImageViewURL))
    cell.ImageView.sd_setImage(with: u, placeholderImage: UIImage(named: "white"),
                               options: [.continueInBackground,.scaleDownLargeImages]) { (image, error, cacheType, url) in

                                self.modals[indexPath.row].ImageView = cell.ImageView.image!

    }  

    return cell  
}

func requestD(url:String){


    var urlRequest = URLRequest(url: URL(string: url)!)
    urlRequest.timeoutInterval = 300



    let task = URLSession.shared.dataTask(with: urlRequest) { (data,response,error) in

        if error != nil{
            print(error ?? 0)
            return
        }
        do{
            let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as! [String : Any]

            if let main = json["LIBRARY"] as? [String:[String : Any]]{

                for (_, data) in main {
                    let info = ModalAudio()
                    info.id = data["ID"] as? String
                    info.name = data["NAME"] as? String
                    info.AboutBook = data["DETAIL_TEXT"] as? String
                    info.ImageViewURL = data["PICTURE"] as! String

                    self.modals.append(info)


                }
            }

        } catch let error {
            print(error)
        }

        DispatchQueue.main.sync {

            self.isMoreDataLoading = false
            self.iNumPage += 1

        }
    }

    self.collectionView?.reloadData()
    task.resume()

}

Reinier Melian Reinier Melian · Accepted Answer · 2017-07-29T19:38:34

In the viewDidLoad the frame of your collection view is undefined yet, so put this code in your viewDidLayoutSubView method, after reviewing your project your issues is related to use of flowLayout.estimatedItemSize as you can read in the property declaration comment

@available(iOS 8.0, *)
open var estimatedItemSize: CGSize // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:

So use this code, it works!

    override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
            let flowLayout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

            //flowLayout.estimatedItemSize = CGSize(width: self.collectionView.frame.width, height: 100) don't show your cells
            flowLayout.itemSize = CGSize(width: self.collectionView.frame.width, height: 100)//show your cells
            flowLayout.invalidateLayout() 
        }

Hope this helps

self sizing collectionView with flowLayout

1 Answers