15 May 2018

Add Pull to refresh to UITableView using custom UIRefreshControl in swift


Custom UIRefreshControl in swift

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.

Adding UITableView on to the view  - custom UIRefreshcontrol swift

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.

Setting constraints to UITableView - custom UIRefreshControl swift

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





Step 5: Connect IBOutlet to UITableView in Main.storyboard

Connecting IBOutlet to UITableView - custom UIRefreshControl swift

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"

Creating new file for custom refresh control view

Selecting view file for our custom refresh control


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

Design user interface for custom refresh control

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

  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


 
 


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

 

No comments:

Post a Comment