Pull to refresh functionality

In mobile applications, pull to refresh is becoming more commonplace than necessary. The ability for the user to pull it down and refresh the table or collection view’s contents is the main goal. Adding the pull to refresh capability to tableview or collectionview in iOS applications has become easier.

Adding a Refresh Control

The UIRefreshControl class, which Apple offers, makes it easier to add the pull to refresh. The UIRefreshControl class needs to be instantiated first.

				
					let refreshControl = UIRefreshControl()

This refresh control needs to be added to our tableview at this point. We are able to give this instance the refreshControl attribute of tableview. But it’s important to note that there was no property similar to refreshControl on iOS prior to version 10. It had to be added to the tableview as a subview.

				
					if #available(iOS 10.0, *) {  
    tableView.refreshControl = refreshControl  
}   
else {  
    tableView.addSubview(refreshControl)  
}

At this point, we want the table view refresh to trigger an action from our application. It can be added to the UIRefreshControl instance as the target. Below is the syntax.

				
					refreshControl.addTarget(self, action: #selector(function(_:)), for: .valueChanged)

We are now ready to have our application’s pull to refresh feature. Take a look at the example below, where we add a pull to refresh to a tableview.

Example

We will create a tableview and fill it with an array in this straightforward example. We will add some values to the array upon refreshing and reload the tableview with the array.

Main.storyboard

ViewController.swift

				
					import UIKit  
  
  
class ViewController: UIViewController {  
  
  
    @IBOutlet weak var tableView: UITableView!  
      
    let refreshControl = UIRefreshControl()  
    var arr = Array<String>()  
      
    override func viewDidLoad() {  
        super.viewDidLoad()  
        // Do any additional setup after loading the view.  
        tableView.delegate = self  
        tableView.dataSource = self  
        arr = ["Value 1","Value 2","Value 3","Value 4"]  
        tableView.refreshControl = refreshControl  
        refreshControl.addTarget(self, action: #selector(refreshData), for: .valueChanged)  
    }  
  
  
    @objc func refreshData(){  
        for i in 7..<12{  
            arr.append("Value "+i.description)  
        }  
        tableView.reloadData()  
        refreshControl.endRefreshing()  
    }  
}  
extension ViewController : UITableViewDelegate{  
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {  
        return 100  
    }  
}  
  
  
extension ViewController : UITableViewDataSource{  
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {  
        return arr.count  
    }  
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell  
        cell.lbl.text = arr[indexPath.row]  
        return cell  
    }  
}

Pull to refresh functionality