ariandr / uiscrollview-infinitescroll Goto Github PK

Infinite scroll implementation as a category for UIScrollView.

* The content used in demo app is publicly available and provided by hn.algolia.com and Flickr. Both can be inappropriate.

Be aware that this category swizzles setContentOffset and setContentSize on UIScrollView.

Add new package using github repo URL:

https://github.com/pronebird/UIScrollView-InfiniteScroll

Then import module in the source code:

import UIScrollView_InfiniteScroll

Add the following line in your Podfile:

pod 'UIScrollView-InfiniteScroll', '~> 1.3.0'

#import <UIScrollView_InfiniteScroll/UIScrollView+InfiniteScroll.h>

or if using modules:

@import UIScrollView_InfiniteScroll;

Add the following line in your bridging header file:

#import <UIScrollView_InfiniteScroll/UIScrollView+InfiniteScroll.h>

Add the following line in your Cartfile:

github "pronebird/UIScrollView-InfiniteScroll" ~> 1.3.0

#import <UIScrollView_InfiniteScroll/UIScrollView+InfiniteScroll.h>

or if using modules:

@import UIScrollView_InfiniteScroll;

import UIScrollView_InfiniteScroll

This component comes with example app written in Swift.

If you use CocoaPods you can try it by running:

pod try UIScrollView-InfiniteScroll

http://pronebird.github.io/UIScrollView-InfiniteScroll/

In order to enable infinite scroll you have to provide a handler block using addInfiniteScrollWithHandler. The block you provide is executed each time infinite scroll component detects that more data needs to be provided.

The purpose of the handler block is to perform asynchronous task, typically networking or database fetch, and update your scroll view or scroll view subclass.

The block itself is called on main queue, therefore make sure you move any long-running tasks to background queue. Once you receive new data, update table view by adding new rows and sections, then call finishInfiniteScroll to complete infinite scroll animations and reset the state of infinite scroll components.

viewDidLoad is a good place to install handler block.

Make sure that any interactions with UIKit or methods provided by Infinite Scroll happen on main queue. Use dispatch_async(dispatch_get_main_queue, { ... }) in Objective-C or DispatchQueue.main.async { ... } in Swift to run UI related calls on main queue.

Many people make mistake by using external reference to table view or collection view within the handler block. Don't do this. This creates a circular retention. Instead use the instance of scroll view or scroll view subclass passed as first argument to handler block.

// setup infinite scroll
[tableView addInfiniteScrollWithHandler:^(UITableView* tableView) {
    // update table view
    
    // finish infinite scroll animation
    [tableView finishInfiniteScroll];
}];

tableView.addInfiniteScroll { (tableView) -> Void in
    // update table view
            
    // finish infinite scroll animation
    tableView.finishInfiniteScroll()
}

UICollectionView.reloadData causes contentOffset to reset. Instead use UICollectionView.performBatchUpdates when possible.

[self.collectionView addInfiniteScrollWithHandler:^(UICollectionView* collectionView) {    
    [collectionView performBatchUpdates:^{
        // update collection view
    } completion:^(BOOL finished) {
        // finish infinite scroll animations
        [collectionView finishInfiniteScroll];
    }];
}];

collectionView.addInfiniteScroll { (collectionView) -> Void in
    collectionView.performBatchUpdates({ () -> Void in
        // update collection view
    }, completion: { (finished) -> Void in
        // finish infinite scroll animations
        collectionView.finishInfiniteScroll()
    });
}

You can reuse infinite scroll flow to load initial data or fetch more using beginInfiniteScroll(forceScroll). viewDidLoad is a good place for loading initial data, however absolutely up to you to decide that.

When forceScroll parameter is true, Infinite Scroll component will attempt to scroll down to reveal indicator view. Keep in mind that scrolling will not happen if user is interacting with scroll view.

[self.tableView beginInfiniteScroll:YES];

tableView.beginInfiniteScroll(true)

Sometimes you need to prevent the infinite scroll from continuing. For example, if your search API has no more results, it does not make sense to keep making the requests or to show the spinner.

[tableView setShouldShowInfiniteScrollHandler:^BOOL (UITableView *tableView) {
    // Only show up to 5 pages then prevent the infinite scroll
    return (weakSelf.currentPage < 5);
}];

// Provide a block to be called right before a infinite scroll event is triggered. 
// Return YES to allow or NO to prevent it from triggering.
tableView.setShouldShowInfiniteScrollHandler { _ -> Bool in
    // Only show up to 5 pages then prevent the infinite scroll
    return currentPage < 5 
}

Ideally you want your content to flow seamlessly without ever showing a spinner. Infinite scroll offers an option to specify offset in points that will be used to start preloader before user reaches the bottom of scroll view.

The proper balance between the number of results you load each time and large enough offset should give your users a decent experience. Most likely you will have to come up with your own formula for the combination of those based on kind of content and device dimensions.

// Preload more data 500pt before reaching the bottom of scroll view.
tableView.infiniteScrollTriggerOffset = 500;

You can use custom indicator instead of default UIActivityIndicatorView.

Custom indicator must be a subclass of UIView and implement the following methods:

@objc func startAnimating()
@objc func stopAnimating()

let frame = CGRect(x: 0, y: 0, width: 24, height: 24)
tableView.infiniteScrollIndicatorView = CustomInfiniteIndicator(frame: frame)

Please see example implementation of custom indicator view:

• Swift: CustomInfiniteIndicator.swift

At the moment InfiniteScroll uses indicator's frame directly so make sure you size custom indicator view beforehand. Such views as UIImageView or UIActivityIndicatorView will automatically resize themselves so no need to setup frame for them.

Please see CHANGES

Demo app icon by PixelResort.