Add Pull to Refresh to Table View in iOS8 with Swift

A UIRefreshControl object provides a standard control that can be used to initiate the refreshing of a table view’s contents. When pulled,  a little wheel starts spinning at the top, until the refresh has completed.  At that time, the wheel disappears, and the view bounces back into place. In this tutorial we will add a refresh control to a table view. When the controll is pulled the sorting order of the rows will be inversed. This tutorial is built with iOS 8.1 and Xcode 6.1.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftPullToRefreshTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas.  Select the Table View Controller, go the Attributes inspector and select "Is initial View Controller"

Select the Table View Cell and go to the Attributes Inspector. In the Table View Cell section set the Identifier  to "Cell".

Since we have deleted the View Controller from the Storyboard we can also delete the ViewController.swift file. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it TableViewController and make it a subclass of UITableViewController.

The TableViewController class needs to be linked to The Table View Controller object in the Storyboard. Select it and go the Identity Inspector. Change the custom class to TableViewController.

Go to TableViewController.swift and create a property containing an array of the first letters of the alphabet.

var alphabet = ["A","B","C","D","E","F","G","H","I"]

Change the following delegate methods

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
  // Return the number of sections.
  return 1

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  // Return the number of rows in the section.
  return alphabet.count

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! UITableViewCell

  // Configure the cell...
  cell.textLabel?.text = alphabet[indexPath.row]
  return cell
  1. There is only one section in the Table View so we need to return a 1 in the numberOfSectionsTableView method.
  2. The number of rows is equal to the number of items in the alphabet array so we use the count method of the array class
  3. The letter of the alphabet at the current index of our alphabet array is assigned to the text property of the textLabel property  of the current cell.

Build and Run the project. The rows should be filled with the letters of the alphabet.

Now that some rows are filled let's get going with the refresh control. If the pull to refresh is initiated the rows sort in descending/ascending order. First we need a Boolean to switch the sort order. Add the following property in the interface section.

var isAscending = true

Change the viewDidLoad method.

override func viewDidLoad() {
  var refreshControl = UIRefreshControl()
  refreshControl.addTarget(self, action: Selector("sortArray"), forControlEvents: UIControlEvents.ValueChanged)
  self.refreshControl = refreshControl

Every time the refresh control is pulled the UIControlEventValueChanged event is triggered, which will call the sortArray method. Let's implement this method.

func sortArray() {
  var sortedAlphabet = alphabet.reverse()
  for (index, element) in enumerate(sortedAlphabet) {
    alphabet[index] = element

First the array is reversed with the reverse function. Then we will enumerate through the reversed array, where we load the reversed array into the original alphabet array. The Table View is reloaded to update the contents and the RefreshControl animation is ended.

Build and Run, Pull-refresh a few times and you see the switching of the sorting order of the rows in the table view.

You can download the source code of the iOS8SwiftPullToRefreshTutorial at the ioscreator repository on github.