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 :

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.

Klockau

Answer 1

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.

Klockau

I was going to use your method, thanks for sharing, but then I came across the table​View(_:​will​Display:​for​Row​At:​) delegate method; I've added an answer here and don't want to duplicate it here but thought I'd let you know :-) – Fleshy

Answer 2

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

Adaptive

You're right is something like that, I'll make an answer for that now – Klockau

I tried this way, but after calling reloadData(), uicollectionView disappears and then loaded. – Ambriz

Is there any way not to reload the entire collectionView and insert new rows at the bottom and scrolls to desired position? – Ambriz

@Ambriz I think you need to append new data to the array instead of reinit that array. – Adaptive

Answer 3

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.

Dearth