Showing cells in demands in UICollectionView with vertical infinite scroll

Question

I would like to know how to achieve using a UICollectionView the desired effect of loading in demand like in the Amazon app when you make a search, it returns only a number of items until the scroll ends, then a loading indicator it set to load more cells and go on until all the products in the search it's showed.

Something like the following picture for example :

enter image description here

Normally you have to set in the numberOfItemsInSection, the number of items of the data source, how it's the way?, you set the total of items and then load it lazy or something?

Thanks in advance.

score 11 · Accepted Answer · answered Feb 05 '15 at 15:55

Using the scrollViewDidScroll function like crazy_phage did above you can observe when finally reach the final of the CollectionView then you can update the numberOfRowInSections and call the reloadData in the following way :

class CollectionSampleViewController: UICollectionViewController {

    private let reuseIdentifier1 = "Cell"
    private var numberOfItemsPerSection = 9    

    override func viewDidLoad() {
       super.viewDidLoad()        
    }

    override func didReceiveMemoryWarning() {
       super.didReceiveMemoryWarning()
    }

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
       return 1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return numberOfItemsPerSection
    }    

    override func scrollViewDidScroll(scrollView: UIScrollView) {
       let offsetY = scrollView.contentOffset.y
       let contentHeight = scrollView.contentSize.height

       if offsetY > contentHeight - scrollView.frame.size.height {            
          numberOfItemsPerSection += 6
          self.collectionView.reloadData()
       }
    }   
}

When the reloadData function its called the scroll remains in the same place and the new data it's loaded.

In the above code you can use an Activity Indicator View or anything else you want to add to your code.

I was going to use your method, thanks for sharing, but then I came across the tableView(_:willDisplay:forRowAt:) delegate method; I've added an answer [here](http://stackoverflow.com/a/42902171/882630) and don't want to duplicate it here but thought I'd let you know :-) — lukkea, Mar 20 '17 at 11:19

score 5 · Answer 2 · answered Feb 04 '15 at 01:50

I am also working on infinity scroll on UICollectionView. Here is the function which you need.

func scrollViewDidScroll(scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    let contentHeight = scrollView.contentSize.height
    if offsetY > contentHeight - scrollView.frame.size.height {
        println("this is end, see you in console")
    }
}

And you can write your code in if clause. reloadData() I think.

// load data for collection view
func loadGroundData(){
    AVCloud.callFunctionInBackground("GroundWaterFallList", withParameters: [:]) {
        (result: AnyObject!, error: NSError!) -> Void in
        if error == nil {
            NSLog("ground users count: \(result.count)")
            NSLog("\(result[0])")
            self.ground_water_fall_people = result as NSArray
            self.collectionView?.reloadData()
        }
    }
}

well, I am still working on it, hope this help. And hope someone can explain these two functions. collectionView(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) scrollViewDidScroll

You're right is something like that, I'll make an answer for that now — Victor Sigler, Feb 05 '15 at 15:44
I tried this way, but after calling reloadData(), uicollectionView disappears and then loaded. — Mansuu...., Nov 05 '17 at 17:20
Is there any way not to reload the entire collectionView and insert new rows at the bottom and scrolls to desired position? — Mansuu...., Nov 05 '17 at 17:22
@Mansuu.... I think you need to append new data to the array instead of reinit that array. — crazy_phage, May 14 '18 at 05:06

score 4 · Answer 3 · answered Aug 19 '18 at 16:45

We can use willDisplay method:

var endOfData = false

...

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    if indexPath.row == model.data.count - 5 && !endOfData {
        loadNextData()
    }
}

It looks like the simplest way.

Showing cells in demands in UICollectionView with vertical infinite scroll

3 Answers3

Linked