Custom UIRefreshControl swift:
UIRefreshControl is provided in iOS SDk that allowed user to drag 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 list or UITableView. In this tutorial, we will learn how to create a custom refresh control aka UIRefreshControl in swift rather than using the default standard refresh control aka UIRefreshControl provided by iOS SDK that simply 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.
Set constraints to UITableView as shown in the below picture, we set 0 distance from all 4 sides with respect to safe area layout.
Open ViewController.swift and create an IBOutlet for UITableView named as “tblList
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
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
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
Step 9: To change text of UILable, when user pulls down UITableView, you can use he below code
In the above code, we get “refreshView” form refreshControl object. Then we get UILable from “refreshView“, subview’s. Lastly changed the text for UILable.
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