Pull to Refresh

Pull to refresh has become a classic, almost cliched, way of initiating a refresh operation in an iOS app. Originally part of the Tweetie app that ultimately became Twitter’s official iOS presence, pull to refresh was such a neat, intuitive and unobtrusive way of triggering a refresh that iOS developers clamoured to find out how to emulate it in their own apps.

If you’ve not seen it, how was Mars? The idea is that you have a list of data displayed in a table view and as you pull the view downwards it reveals a refresh panel above the data. Pull it down far enough and it will latch, offering you the opportunity to refresh the displayed data. Release and the refresh starts, with a clever combination of animation and sound completing the experience.

If you do want to do something similar yourself, it’s a matter of implementing the UIScrollViewDelegate protocol, in particular the scrollViewDidScroll: and scrollViewDidEndDragging:willDecelerate: methods. Because a UITableView is a subclass of a UIScrollView, these work with table views too. When the contentOffset property of the table view goes negative in the scrollViewDidScroll: method, you have a pull. When you subsequently get the scrollViewDidEndDragging:willDecelerate:, you have a release and you can initiate the refresh. Just add a bit of animation and sound and you are set.

But don’t start coding it just yet. In iOS 6, Apple have paid the ultimate compliment to Tweetie’s developers by adding a standard pull to refresh control to Cocoa Touch. (Cue a patent dispute!).

It’s nice and simple. First of all you need to enable the refresh control on your table view. So select the table view controller scene in your storyboard (not the table view, the whole scene) and enable the new refresh control in the attributes inspector:

As you can see, you can change the colour and title displayed in the refresh panel.

The refresh control is a property on UIViewController, so you don’t need to create one, but you do need to configure it so that it knows which method should be invoked to do the refresh. So, in viewDidLoad:

[self.refreshControl
    addTarget:self
    action:@selector(refresh)
    forControlEvents:UIControlEventValueChanged
];

The refresh method should go off and do its work (probably on a background queue) and when complete, you need to end the refresh animation:

- (void)refresh
{
    [backgroundQueue addOperationWithBlock:^{
        // Do your refresh here ...
        [[NSOperationQueue mainQueue] addOperationWithBlock^{
            [self.refreshControl endRefreshing];
        }];
    }];
}

That’s it! Standard pull to refresh without the pain of testing your own animations.

With the release of iOS 6 imminent we are busy updating courses and you will be able to learn more about other new features of iOS on Learning Tree’s iPhone® and iPad® Programming: A Comprehensive Hands-On Introduction and Building iPhone® and iPad® Applications: Extended Features courses later in the year.

Richard Senior

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.