Pull-to-Refresh : How to implement in iOS Swift 3.

ANANTHA KRISHNAN K G
Swift Dynamics
Published in
3 min readMay 18, 2017

Hello Everyone. Hope you are having a nice day. Today I will show you how to implement simple Pull-to-Refresh in your tableview object.

Lots of iOS apps have Pull-to-Refresh feature with nice animations (Snapchat). Let’s see how we can create a simple Pull-to-Refresh in a UITableView that’s present inside a UIViewController.

Pull-to-Refresh is implemented on the UIRefreshControl Class in Swift. Let’s start creating an app with Pull-to-Refresh.

Let’s start guys…..

  1. Open the XCode and create a single view application. Then go to the Main.storyboard .
  2. Drag and drop a Table View from Object library to the view of your ViewController scene.
  3. Drag and drop a Table View Cell from Object library to the tableview of your ViewController scene.
  4. Open the Attribute Inspector for the table view cell and add Style as Subtitle
  5. Add the delegate and datasource to the view controller. Then create a reference for TableView to the ViewController.swift

6. Here our app will list the available hotels in California. So we need to provide Hotel name and place for the table view cells. Lets create a Struct object for that.

struct Hotels {
let name: String
let place: String
}

7. Create an object of Hotels and add some values inside it .

var hotels = [
Hotels(name: "Fairmont Grand Del Mar", place: "California
south"),
Hotels(name: "The Beverly Hills Hotel", place: "California
south")
]

8. Now We will create UITableViewDataSource and UITableViewDelegate methods inside our app

func tableView(_ tableView: UITableView, numberOfRowsInSection   
section: Int) -> Int {

return hotels.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath:
IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "cell")!

cell.textLabel?.text = hotels[(indexPath as
NSIndexPath).row].name
cell.detailTextLabel?.text = hotels[(indexPath as
NSIndexPath).row].place

return cell
}

9. Now comes the fun part 🎉 👯‍♂️

We have to add the UIRefreshControl in the UITableView object. Let’s create UIRefreshControl object.

lazy var refreshControl: UIRefreshControl = {        let refreshControl = UIRefreshControl()        refreshControl.addTarget(self, action: 
#selector(ViewController.handleRefresh(_:)),
for: UIControlEvents.valueChanged)
refreshControl.tintColor = UIColor.red

return refreshControl
}()

10. Add the refresh action

func handleRefresh(_ refreshControl: UIRefreshControl) {

let newHotel = Hotels(name: "Montage Laguna Beach", place:
"California south")
hotels.append(newHotel)

hotels.sort() { $0.name < $0.place }

self.tableView.reloadData()
refreshControl.endRefreshing()
}

11 . Next step is to add the UIRefreshControl object to the UITableView object.

self.tableView.addSubview(self.refreshControl)

12. Build and run your app . Then do a Pull-to-Refresh. Congratulations !!! you have implemented the pull-To-Refresh capability. !!!!

You can find the sample code here. That’s it Folks !!! … Thanks for reading and supporting me 😊 👍

--

--