Native Shopify Mobile App with 20 new features
Kickstart your hyperlocal marketplace in Corona pandemic with a starter guide
Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 22.214.171.124 release ready!
Owner and Founder. Opencart
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.
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
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.
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.
After successfully adding the UIRefreshControl, your app will look like below.
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
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.