Pull to Refresh in Swift

Today’s topic we will discuss the Pull to Refresh in Swift, or you can say UIRefresh Control.

UIRefersh Control inherits from UIControl. In addition, UIControl inherits from the UIView and  UIView inherits from the UIResponder.

Finally, UIResponder inherits from the NSObject class.

We can use UIRefresh Control with any UIScrollView objects like UITableview or UICollectionView.

We will show how to use UIRefresh Control when we pull down the UIScrollView object and refresh its content.

Pull to Refresh in Swift

UI Implementation for Pull to Refresh in Swift:

We are going to implement the Pull to Refresh functionality by calling an API and populating the table view with the data returned from the API.

1. Let’s begin by creating an Xcode project, adding a table view and a label in the Main storyboard.

2. Create TableViewCell and Xib. After that, register TableViewCell and assign delegate and dataSource.

3. Table view cell is populated with the data returned by the API call

 

Adding basic functionality for Pull to Refresh in Swift:

1. Create a model to parse the data as below. After that, we will decode the API response using JSONDecoder.

2. Till now, your viewDidLoad() function would look like below.

3.  Create a variable array to store the desired values. For instance, we have created var apiData = [String]()

4. After that, we will create a function fetchAPIData() for the network-related task. This function is called from the viewDidLoad().

5. In the above code we are hitting the API and decoding the returned data to DataModel DataResponse using Codable protocol.

6. We are then appending the data to apiData array of type String. We will now populate our TableView with the data of the apiData array, shown below.

 

 

Adding UIRefreshControl

Till now we prepared our ViewController class to use the UIRefreshControl which will be visible when we pull down our Table view.

UIRefreshControl will start working when the user pulls the Tableview, it will call the fetchAPIData() function and reloads the table view with new data returned from the API.

refreshControl will call the objective-C function callPullToRefresh based on its value changes through the listener .valueChanged

After that, add the below code to your viewDidLoad()

 

Now declare an objective-C function which will call the fetchAPIData() function.

 

In addition to the above, we must update our UI in the main thread. Therefore, use the below code after the network call in fetchAPIData() function.

endRefreshing() function tells the status of the UIRefreshControl that it has finished refreshing the UITableView. Similarly, beginRefreshing() tells the status of the UIControl is now started refreshing the contents.

In the above code, we have made a delay of 5 seconds for refreshControl. The refreshControl will be visible for 5 seconds.

Accordingly, we are hiding and unhiding the refreshLabel.

We are updating the refreshLabel in the below code inside the fetchAPIData()

isRefreshing is a boolean property that describes the current state of  the UIRefreshControl

Based on the isRefreshing value we are updating the refreshLabel status.

Now your fetchAPIData() function would like as shown in the below image.

Result

After successfully adding the UIRefreshControl, your app will look like below.

 

Conclusion

Here, we have used the custom refreshLabel to show the refreshing status of the UIRefreshControl however, you can use the UIRefreshControl attribute attributedTitle for showing the status of the UIRefreshControl.

You can also check the Apple documentation for UIRefreshControl here

We hope this blog will help you in creating interactive designs for your projects.

For other blogs Please click here