How To Use Custom UIRefreshControl in Swift

UIRefreshControl in Swift

Custom UIRefreshControl : 

 UIRefreshControl is provided in iOS that allowed user to drag UITableView to refresh the contents of UITableVIew. This is most common approach used in mobile apps to allow user to forcefully refresh the contents of list or UITable. In this tutorial, we will learn how to create a custom UIRefreshControl in swift rather than using the default standard UIRefreshControl provided by iOS having an UIActivityIndicatorView.

Steps to create custom UIRefreshControl in swift:

Step 1: Create a single view application template project, and open Main.storyboard file

Step 2: Change view background color of  view to yellow and drag a UITableView on to the view of ViewController.

Step 3: Set constraints to UITableView as shown in the below picture, we set 0 distance from all 4 sides with respect to safe area layout.

Step 4: Open ViewController.swift and create an IBOutlet for UITableView named as "tblList"

	//
	// ViewController.swift
	// Custom-RefreshControl-swift-ios
	//
	// Created by iostutorialpoints on 12/05/18.
	// Copyright © 2018 iostutorialpoints. All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var tblList: UITableView!
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	}
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Step 5: Connect IBOutlet to UITableView in Main.storyboard

Designing our custom UIRefreshControl

Step 6: In ViewController.swift, create a function named "addRefreshControl". In this function we will create UIRefreshControl and add it to our UITableView. But before this, we will design layout for our custom refresh control. For creating design for custom refresh control either press command+N or click on File menu of Xcode and then new file (shown in the image). Name the file as

"CustomRefreshView"

Step 7: Open "CustomRefreshView.xib" and  made the changes as shown in the given below picture as per the steps written

Use custom UIRefreshControl in UITableview

Step 8: At this point, we are done with designing interface for our custom refresh control. Now, it's time to write code for custom UIRefreshControl. Open ViewController.swift file and add the code as
shown in the given below code snippet

	//
	// ViewController.swift
	// Custom-RefreshControl-swift-ios
	//
	// Created by iostutorialpoints.com on 12/05/18.
	// Copyright © 2018 iostutorialpoints.com . All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var tblList: UITableView!
	var refreshControl = UIRefreshControl()
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	addRefreshControl()
	}
	func addRefreshControl() {
	guard let customView = Bundle.main.loadNibNamed("CustomRefreshView", owner: nil, options: nil) else {
	return
	}
	guard let refreshView = customView[0] as? UIView else {
	return
	}
	refreshView.tag = 12052018
	refreshView.frame = refreshControl.frame
	refreshControl.addSubview(refreshView)
	refreshControl.tintColor = UIColor.clear
	refreshControl.backgroundColor = UIColor.clear
	refreshControl.addTarget(self, action: #selector(refreshContents), for: .valueChanged)
	if #available(iOS 10.0, *) {
	tblList.refreshControl = refreshControl
	} else {
	tblList.addSubview(refreshControl)
	}
	}
	@objc func refreshContents() {
	self.perform(#selector(finishedRefreshing), with: nil, afterDelay: 3.0)
	}
	@objc func finishedRefreshing() {
	refreshControl.endRefreshing()
	}
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Let us go through the code we created in step by step

1. We created an instance of UIRefreshControl and named it "refreshControl". 
2. Created a function named "addRefreshControl" and called it in ViewDidLoad method.
3. Inside "addRefreshControl" function, we check whether our app contains file named "CustomRefreshView" or not, if not then we returned from function and thus saving our app from getting crashed but no UIRefreshControl is added.
4. We get view object from the file object, named here "customView"
5. Given tag for view object, named "refreshView", and also set its frame equal to that of "refreshControl".
6. Add "refreshView" as sub-view to "refreshControl". 
7. Set background color and tint color of "refreshControl"to clear color.
8. Add target to "refreshControl" so that we can detect when user pull down the UITableView for refreshing contents,
9. Adding "refreshControl" to UITableView. If we are having iOS 10.0 or greater then UITableView has property refreshControl otherwise for lower version we will add "refreshControl" as subview to UITableView.
10. Lastly we will implement our selectors.
11. In order to stop refreshing, we need to call method "endRefreshing".

Changing UILable text when user pull down  UItableView

Step 9: To change text of UILable, when user pulls down UITableView, you can use he below code

	@objc func refreshContents() {
	let refreshView = refreshControl.viewWithTag(12052018)
	for vw in (refreshView?.subviews)! {
	if let titleLable = vw as? UILabel {
	titleLable.text = "Refreshing contents"
	}
	}
	self.perform(#selector(finishedRefreshing), with: nil, afterDelay: 3.0)
	}
	@objc func finishedRefreshing() {
	refreshControl.endRefreshing()
	let refreshView = refreshControl.viewWithTag(12052018)
	for vw in (refreshView?.subviews)! {
	if let titleLable = vw as? UILabel {
	titleLable.text = "Pull down to refresh this list"
	}
	}
	}

In the above code, we get "refreshView" form refreshControl object. Then we get UILabel from "refreshView", subview's. Lastly changed the text for UILabel.

Where to go from here:

In this tutorial, we learned how to create custom UIRefreshControl in swift and then add it to UITableView. You can do other stuffs too, like animating the UILabel or placing image instead of UILabel and animate it. To download the code, please click this link Custom-RefreshControl