I'm using iOS Material components in my app and I came across the Tabs here. Implementing it was easy and after I made a few minor changes to match my design the result was what I wanted:
I achieved this using the following code:
func setupTabBar() {
let customTabBar = MDCTabBar(frame: view.bounds)
customTabBar.items = [
UITabBarItem(title: "Cards", image: nil, tag: 0),
UITabBarItem(title: "Mobile", image: nil, tag: 0)
]
customTabBar.itemAppearance = .titledImages
customTabBar.alignment = .justified
customTabBar.itemAppearance = .titles
//colors
customTabBar.tintColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
customTabBar.selectedItemTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
customTabBar.unselectedItemTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
customTabBar.barTintColor = UIColor(red:0.00, green:0.33, blue:0.59, alpha:1.0)
tabBarContainerView.addSubview(customTabBar)
customTabBar.sizeToFit()
tabBarContainerView.layer.shadowOffset = CGSize(width: 0, height: 2)
tabBarContainerView.layer.shadowRadius = 8
tabBarContainerView.layer.shadowOpacity = 0.5
tabBarContainerView.layer.shadowColor = UIColor.black.cgColor
}
However, this is just the Tar bar, I need to have a functional tab view where the user can switch between the two pages. No problem, as the docs say just inherit from MDCTabBarViewController, this ensure my pages are being tabbed, but this also added another tab bar at the bottom, which is fine, now I do not net to create one myself, so I removed mine but now I would just like it to bo the top but cannot find a property to set to get it in the top position:
and here is the code for that:
func setupTabViews() {
let storyboard = UIStoryboard.init(name: "Main", bundle: nil)
let cardsVC = storyboard.instantiateViewController(withIdentifier: "cardsWalletViewController")
let mobileVC = storyboard.instantiateViewController(withIdentifier: "mobileWalletViewController")
let vcArray = [cardsVC, mobileVC]
viewControllers = vcArray
let childVC = viewControllers.first
selectedViewController = childVC
tabBar?.delegate = self
tabBar?.items = [
UITabBarItem(title: "Cards", image: nil, tag: 0),
UITabBarItem(title: "Mobile", image: nil, tag: 0)
]
tabBar?.itemAppearance = .titledImages
tabBar?.alignment = .justified
tabBar?.itemAppearance = .titles
//colors
tabBar?.tintColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
tabBar?.selectedItemTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
tabBar?.unselectedItemTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
tabBar?.barTintColor = UIColor(red:0.00, green:0.33, blue:0.59, alpha:1.0)
tabBar?.selectedItem = tabBar?.items.first
}
I noted that on the documentation for MDCTabBarViewController it will create a bottom-anchored tab bar, but how does one use it in the way they clearly illustrate on the 'Tabs' components example where the tabs are located at the top?
