UIRefreshControl at Bottom of UICollectionView (load more data)

Question

I have a UICollectionView which displays images from an online database. I first load 10 images, and then when the user scrolls to the bottom of the UICollectionView I load another 10 images in the background and refresh the view. I accomplish this using the following method :

func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
    if (self.localFeedContent != nil && self.localFeedContent!.count > 0) {
         if indexPath.item == (self.localFeedContent!.count-1) {
        loadMoreData()
    }
    }

}

Now this works perfectly fine, however there is no indication to the user that the process is complete and unless he scrolls further down, he won't notice that new content has been added. I would like to implement a UIRefreshControl which will be attached to the bottom of the UICollectionView and mimic the same exact behaviour as the regular UIRefreshControl on top of the screen does. I have already implemented one on top of the screen, however I am not sure how to do this at the bottom as well.

Solution 1

I've written something similar - I return another cell at the bottom that just shows a UIActivityIndicator. So your datasource would be something similar to:

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return array.count + 1
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    if indexPath.item == array.count{
        // return the new UICollectionViewCell with an activity indicator
    }
    // return your regular UICollectionViewCell
}

func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
    if indexPath.item == array.count{
        // loadMoreData()
    }
}

Or instead of calling loadMoreData() in willDisplayCell, you could call it in the cellForItemAtIndexPath method (when you're returning the new UICollectionViewCell with a UIActivityIndicator). Either could work.

Solution 2

You don't need to implement a UIRefreshControl on the bottom, just implement a scrollView method to do some action when the scroll reach the bottom of screen. You can use some flags inside the conditional to more get a more specific action.

override func scrollViewDidScroll(scrollView: UIScrollView) {
        let threshold = 100.0 as CGFloat!
        let contentOffset = scrollView.contentOffset.y
        let maximumOffset = scrollView.contentSize.height - scrollView.frame.size.height;
        if (maximumOffset - contentOffset <= threshold) && (maximumOffset - contentOffset != -5.0) {            //Add ten more rows and reload the table content.

            runMoreAPI()
        }
    }

Comments

[Nermin Sehic]

The point is to have an indicator that the API is loading data.

[xaphod]

I'm not sure why you're using indexPath.row in a collectionView, probably you meant indexPath.item?

[Daven]

@xaphod both work, but I'll edit my answer to use .item as it's probably more relevant to UICollectionView :)

[Mansuu....]

I can't see Refresh control at the bottom implementing this method@kileros

[kileros]

This method execute the runMoreApi() when the scroll reach the bottom of the screen. The idea is: when reach the bottom, refresh

[Halpo]

how do you then hide that new cell once there are no more pages to load?

[Daven]

@Halpo If you are keeping track of a Boolean on whether you can load more pages or not, say canLoadNextPage, then in numberOfItems method you return canLoadNextPage ? array.count + 1 : array.count. Hope that helps!