The 'pull to refresh' concept is not new. We were first introduced to this capability in 2010 with the release of the Twitter for iPhone app. Until the release of iOS 6, however, we needed a third-party class - such as PullToRefresh - to enjoy this functionality. The technology rumor mill has had no shortage of stories as to why Apple delayed including this capability as part of the iOS SDK. Patent infringement seems to be the most popular public opinion supporting the reason this feature was not introduced earlier. The patent application describing a 'scrollable refresh trigger' can be previewed here. Regardless the reason, this capability now exists for all iOS developers to include in their own apps.
Implementing the UIRefreshControl
At first glance, the UIRefreshControl seems straightforward and simple. In reality, the control is not as easy to implement as nearly every other control in the iOS SDK. In true form, however, the refresh control handles quite a bit of heavy lifting behind the scenes. To use the UIRefreshControl on an existing table view, follow these steps:
- Add the UIRefreshControl to your table view (Interface Builder).
- Create a callback method to handle requests from the control (XCode Editor).
- Create an instance of the control, and programmatically 'wire' it all together.
Setting the 'Refreshing' property exposes a few supporting properties - such as title text and attributes to display with the control. There are no visual indications of the control within your table view, but the Refresh Control will be listed as an object under the hierarchy of the table view controller (Figure C).
A Value Changed event associated with the refresh control triggers a user-defined callback method. The second step in implementing the UIRefreshControl is to add a callback method to the appropriate table view controller class file. The callback method should include a parameter as a pointer to the UIRefreshControl.
Example codeIn the viewDidLoad method of your table view controller, call the method to instantiate the UIRefreshControl. (Figure D)
The example setupRefreshControl method - shown below - includes the code necessary to initialize the object, set the title attribute, associate the callback method, and assign the control to our table view. Note: in this example, the UIRefreshControl is globally set in the header file of our table view controller. (Figure E)
The following example refreshControlRequest method uses performSelector to queue the request for updating the table data. (Figure F)
If it is necessary to show the last time the data was updated, you can create a date/time stamp and set the refresh control's attributedTitle property. The updateTableView method shown below is where we would call any methods for retrieving and formatting the data to populate the table view. (Figure G)
Make sure to call the endRefreshing method to stop the animation and prepare the interface for the next user interaction.Editor's note: All of the code above is also available in this text file.
Apple's inclusion of the UIRefreshControl gives developers a simple way to implement an interactive control that will allow users to update content. While it was common practice to include a button to perform this function, the refresh control approach leverages the device's ability to detect and handle a finger swipe. This is certainly more fluid and it seems to be a natural way to request information to be updated. The UIRefreshControl class reference contains a complete listing of the properties and instance methods for using the control.
Gregory Dean is the CTO for the Wilen Group. He has spent the past 25 years in C-level positions setting the tone and direction of technology-driven services organizations. Gregory is constantly researching technologies and developing capabilities to differentiate services and product offerings in an aggressive and competitive industry. Mobile technologies and iOS app development are a big part of these efforts. He holds degrees in computer science and marketing. Gregory recently released an app for calculating ROI. The Marketography app also displays the latest news and articles from the Marketography.com blog.