iOS Tips: Pull to Refresh in less than 30 seconds

Using Xcode

Paul Jackson
iOS App Development

--

Pull to Refresh is a common idiom on iOS—originally made popular by the folks at Twitter. This approach to refreshing a view has become so ubiquitous Xcode now enables you to add this feature to your views in just a few simple steps. This post is about how to do exactly that… in 30 seconds!

Before we start the clock, create a new project in Xcode—containing a storyboard with a UITableViewController and a backing code file for the view controller; with that in place, we’re ready to start.

  • In Xcode, in Main.storyboard, in the Document Outline pane, select View Controller, and then select the Attribute Inspector on the Utilities pane.
  • In Attribute Inspector, in Table View Controller, change Refreshing from Disabled to Enabled.
From Disabled
To Enabled

Notice in the Document Outline pane that there is now a new control called Refresh Control.

Refresh Control
  • If not already visible, open the Assistant Editor for the View Controller.
The Assistant Editor
  • In Document Outline, press CTRL, and then click Refresh Control and drag to the buddy file, release to complete the drag operation when the cursor is between the @interface and @end code elements.
CTRL + drag to the Assistant buddy file
  • Create a new Action, called refresh, and change the Type from id to UIRefreshControl.
Create an Action

This generates a method at the end of the code file called refresh: that passes in one parameter of type UIRefreshControl.

  • Scroll to the end of the code file, and then add your code to refresh your data source.
Refresh your data source

After your data source has finished loading data you must send a endRefreshing message to the UIRefreshControl to restore the UI back to normal, as you can see on line 50 above.

  • Stop the clock!

I have created a sample project that you can use if you want to see this approach in action.

--

--