iOS optimize

iOS 6 best practices: Introducing the UIRefreshControl

A new feature in iOS 6 allows a developer to natively add the capability to update or refresh content on-demand.
With the release of Apple's iOS 6 came a software development kit (SDK) that introduced developers to many enhancements as well as plethora of new features. Every new iOS release gives developers an opportunity to evaluate their existing apps to determine if adding new functionality would be beneficial to an end user. One such feature - new in iOS 6 - is the ability for a developer to natively add the capability to update or refresh content on-demand. Specifically, a user can swipe downward to refresh the data in a table view (Figure A).

Figure A

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:

  1. Add the UIRefreshControl to your table view (Interface Builder).
  2. Create a callback method to handle requests from the control (XCode Editor).
  3. Create an instance of the control, and programmatically 'wire' it all together.
Step one is to edit your iOS app's interface to include the UIRefreshControl. This particular control is not listed in the object library - as you would expect. To instantiate the control, select your table view controller and in the Attributes Inspector, set the 'Refreshing' property to 'Enable' as shown in Figure B.

Figure B

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

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 code

In the viewDidLoad method of your table view controller, call the method to instantiate the UIRefreshControl. (Figure D)

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)

Figure E

The following example refreshControlRequest method uses performSelector to queue the request for updating the table data. (Figure F)

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)

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.

Bottom line

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.

Also read:

About

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

1 comments
Mark W. Kaelin
Mark W. Kaelin

Have you incorporated this iOS 6 feature into your applications?