How to create a TabularView in iOS-Swift using CrowdBotics
Problem Statement:-
This is a tutorial on creating an app in iOS using CrowdBotics. If we have to create an app, we create project in X-Code and then it gives us platform to start designing application. Setting up an application development environment takes a lot of time. What if we have something which will enable us to start focus on development rather than setting project up. After reading this article you will be able to start app development right from the word go.
Requirement :-
Navigation drawer is a common feature that most of the application includes. In general, if we have to add it in our code, we have to write several lines of code but by using Crowdbotics we get our navigation drawer already implemented. We don’t have to create a git repo to maintain our codebase. It automatically creates a repo for us. Here are few other advantages of using Crowdbotics :-
A starter X-Code workspace with a CocoaPod pod file — listing the default and user selected pods is hosted here. This starter workspace has the following
- A single view controller and a storyboard
- Storyboard and Code for Left Navigation Menu with basic menu options
- Left Navigation VC with sample menu options. Please change this.
- A PodFile with 2 default pods — pod ‘IQKeyboardManagerSwift’, pod ‘SideMenu’ Other pods added via setup will also be here
- The developer must do a Pod Install. Pod code is not committed to GitHub. Feel free to change this behaviour.
Design:-
Now, Let’s deep dive and start writing few lines of code. When we clone the create repo in our IDE, we get a demo application setup with navigation drawer implementation. There are many ways, to achieve this kind of functionality, I had achieved these in two ways, by using UIPageViewController and UITableViewController to show content Pages/views. For displaying Tabs, I used UITableView. Let’s go in-details…
Tabular View:
Lets start from creating a tabular view. The obvious way is to use a UITableViewController, that has a built-in UITableView. It will work with a simple setup, you just need to add your data array and create a cell. It looks easy and works the way we need.
class ListTableViewController: UITableViewController {
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "DataTableViewCell", for: indexPath) as? DataTableViewCell {
var koinObject : KoinModel?
if(self.currentIndex == 0){
koinObject = appDelegateObj().finalModelObject?.inrList[indexPath.row]
cell.iconImageView.image = UIImage(named: "rupees")
}else if(self.currentIndex == 1){
koinObject = appDelegateObj().finalModelObject?.bitcoinList[indexPath.row]
cell.iconImageView.image = UIImage(named: "bitcoin")
}else if(self.currentIndex == 2){
koinObject = appDelegateObj().finalModelObject?.etherList[indexPath.row]
cell.iconImageView.image = UIImage(named: "ether")
}else{
koinObject = appDelegateObj().finalModelObject?.rippleList[indexPath.row]
cell.iconImageView.image = UIImage(named: "ripple")
}
cell.nameLabel.text = koinObject?.currencyFullForm?.capitalized
cell.name.text = koinObject?.currencyShortForm
cell.priceLabel.text = koinObject?.lastTradedPrice
cell.higherPrice.text = koinObject?.highestBid
cell.lowerPrice.text = koinObject?.lowestAsk
cell.selectionStyle = .none
return cell
}
return UITableViewCell()
}
}Fetch Data and Create delegates
Here I am using UIViewController and once my view is ready, I have fetched data from server and created four lists to feed into my four Tabs.
class ViewController : UIViewController {
override func viewDidLoad(){
super.viewDidLoad()
self.getKoinData()
}
func getKoinData() {
ServiceManager.getRequestWithFullUrl("BASE_URL", success: {
(responseObject) in
print(responseObject)
let inrList = responseObject ["stats"]["inr"].map { return $1 }
let bitcoinList = responseObject ["stats"]["bitcoin"].map { return $1 }
let rippleList = responseObject ["stats"]["ripple"].map { return $1 }
let etherList = responseObject ["stats"]["ether"].map { return $1 }
let inrModelList = inrList . map { KoinModel(jsonObject : $0) }
let bitcoinModelList = bitcoinList . map { KoinModel(jsonObject : $0) }
let rippleModelList = rippleList . map { KoinModel(jsonObject : $0) }
let etherModelList = etherList . map { KoinModel(jsonObject : $0) }
let koinModelObject = finalKoinModel ()
koinModelObject.inrList = inrModelList
koinModelObject.bitcoinList = bitcoinModelList
koinModelObject.rippleList = rippleModelList
koinModelObject.etherList = etherModelList
appDelegateObj().finalModelObject = koinModelObject
appDelegateObj().mainRootView()
}) {
(errorObject) in print(errorObject)
}
}
}Lets Create Individual Tabs
So till now we have created our TableViewController in which we are using TableViewCell. Now lets create individual tabs to complete this process. Lets dive into the code now :-
class ProfileViewController : UIViewController, PageContainerCustomDelegates {
var currentIndexValue: Int = 0
var onBoardPageViewController: ContainerViewController?
{
didSet {
}
}
override func viewDidLoad()
{
super.viewDidLoad()
ServiceManager.getRequestWithFullUrl("https://koinex.in/api/ticker", success: {
(responseObject) in
print(responseObject)
}) {
(errorObject) in
print(errorObject)
}
self.setButtonStateWithIndex(index: self. currentIndexValue)
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?)
{
if let onBoardPageViewController = segue . destination as? ContainerViewController {
onBoardPageViewController.currentPageIndex = self.currentIndexValue
self.onBoardPageViewController = onBoardPageViewController
onBoardPageViewController.pageCustomDelegate = self
onBoardPageViewController.scrollToViewController(index: self. currentIndexValue)
}
}
//Override scroll behaviour of tabs
@IBAction
func scrollingButtonsAction(_ sender: Any)
{
self.setButtonStateWithIndex(index:(sender as AnyObject).tag)
onBoardPageViewController?.scrollToViewController(index:(sender as AnyObject).tag)
}
//Setup Tabs state
func setButtonStateWithIndex(index : Int)
{
self.currentIndexValue = index
self.profileSelectedLabel.isHidden = true
self.memberSelectedLabel.isHidden = true
self.offerSelectedLabel.isHidden = true
self.activitiesSelectedLabel.isHidden = true
if (index == 0) {
self.profileSelectedLabel.isHidden = false
self.profileButton.isSelected = true
self.membersButton.isSelected = false
self.offersButton.isSelected = false
self.activitiesButton.isSelected = false
} else if (index == 1) {
self.memberSelectedLabel.isHidden = false
self.profileButton.isSelected = false
self.membersButton.isSelected = true
self.offersButton.isSelected = false
self.activitiesButton.isSelected = false
} else if (index == 2) {
self.offerSelectedLabel.isHidden = false
self.profileButton.isSelected = false
self.membersButton.isSelected = false
self.offersButton.isSelected = true
self.activitiesButton.isSelected = false
} else {
self.activitiesSelectedLabel.isHidden = false
self.profileButton.isSelected = false
self.membersButton.isSelected = false
self.offersButton.isSelected = false
self.activitiesButton.isSelected = true
}
}
}Conclusion :-
What are you waiting for, just start building if you are really interested.
You can start using this article as a reference if you find this useful. Don’t be afraid to experiment and build something cool, even if it’s something new or may be considered unconventional.
Happy building, I hope you enjoyed this article. I wish you the best in your career.
