UIScrollView-InfiniteScroll

UIScrollView ∞ scroll category

Code Quality Rank: L4

Programming language: Objective-C

License: MIT License

Tags: UI    

Latest version: v1.2.0

README

UIScrollView+InfiniteScroll

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.

Swizzling

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

CocoaPods

Just add the following line in your Podfile:

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

Carthage

Just add the following line in your Cartfile:

github "pronebird/UIScrollView-InfiniteScroll" ~> 1.2.0

Examples

This component comes with example app written in Swift and Objective-C.

If you use CocoaPods you can try it by running:

pod try UIScrollView-InfiniteScroll

Documentation

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

Before using module

Objective-C

Import header file in Objective-C:

#import <UIScrollView_InfiniteScroll/UIScrollView+InfiniteScroll.h>

Swift

Add the following line in your bridging header file:

#import <UIScrollView_InfiniteScroll/UIScrollView+InfiniteScroll.h>

Basics

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.

Objective-C

// setup infinite scroll
[tableView addInfiniteScrollWithHandler:^(UITableView* tableView) {
    // update table view

    // finish infinite scroll animation
    [tableView finishInfiniteScroll];
}];

Swift

tableView.addInfiniteScroll { (tableView) -> Void in
    // update table view

    // finish infinite scroll animation
    tableView.finishInfiniteScroll()
}

Collection view quirks

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

Objective-C

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

Swift

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

Start infinite scroll programmatically

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.

When forceScroll parameter is positive, 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.

Objective-C

[self.tableView beginInfiniteScroll:YES];

Swift

tableView.beginInfiniteScroll(true)

Prevent infinite scroll

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.

Objective-C

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

Swift

// 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 
}

Seamlessly preload content

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;

Custom indicator

You can use custom indicator instead of default UIActivityIndicatorView.

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

- (void)startAnimating;
- (void)stopAnimating;

Objective-C

CustomInfiniteIndicator *infiniteIndicator = [[CustomInfiniteIndicator alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
self.tableView.infiniteScrollIndicatorView = indicator;

Swift

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

Please see example implementation of custom indicator view:

• Objective-C: CustomInfiniteIndicator.m

• 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.

Contributors

Please see CHANGES

Attributions

Demo app icon by PixelResort.