Add custom UIRefreshControl for UITableView

 UIRefreshControl is provided in iOS SDK that allowed user to pull UITableView in order to refresh the contents of UITableVIew. This is most common approach used in mobile apps to allow user to forcefully refresh the contents of UITableView. In this tutorial, we will learn how to create a custom refresh control also known as a UIRefreshControl in swift rather than using the default standard refresh control aka UIRefreshControl provided by iOS SDK that simply having an UIActivityIndicatorView.

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

 

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

 

 

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.

 

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

5: Connect IBOutlet to UITableView in Main.storyboard

Designing our custom UIRefreshControl

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“

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

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

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

• We created an instance of UIRefreshControl and named it “refreshControl“.
• Created a function named “addRefreshControl” and called it in ViewDidLoad method.
• 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.
• We get view object from the file object, named here “customView”
• Given tag for view object, named “refreshView“, and also set its frame equal to that of “refreshControl“.
• Add “refreshView” as sub-view to “refreshControl“.
• Set background color and tint color of “refreshControl“to clear color.
• Add target to “refreshControl” so that we can detect when user pull down the UITableView for refreshing contents,
• 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.
• Lastly we will implement our selectors.
• In order to stop refreshing, we need to call method “endRefreshing“.

Changing UILable text when user pull down  UItableView

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

 

Where to go from here:

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