How to add MDCTabBar in the custom view?

Question

I'm using Material Design library in iOS, I'm trying to add MDCTabBar in the custom view below the navigation bar but it doesn't work. Code is like

let tabBar = MDCTabBar(frame: self.mainTabBar.bounds)
    tabBar.items = [
        UITabBarItem(title: "TAB 1", image: nil, tag: 0),
        UITabBarItem(title: "TAB 2", image: nil, tag: 1),
    ]
    tabBar.tintColor = UIColor.white
    tabBar.barTintColor = UIColor.theme
    tabBar.alignment = .justified
    tabBar.itemAppearance = .titles
    tabBar.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
    tabBar.displaysUppercaseTitles = true
    tabBar.sizeToFit()
    self.mainTabBar.addSubview(tabBar)

Here mainTabBar is my custom view and it is exactly below the navigation bar. Please help to solve this.

Thanks in advance!

score 3 · Answer 1 · answered Nov 27 '17 at 19:39

Your ViewController class has to inherit from the MDCTabBarViewController class like:

    class SelectTeamViewController: MDCTabBarViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
}

Then it should be visible. You can even drag the UIView in the storyboard and select MDCTabBar class in the Identity Inspector

score 2 · Accepted Answer · answered Dec 01 '17 at 08:54

let tabBar = MDCTabBar(frame: self.mainTabBar.bounds)
tabBar.delegate = self
tabBar.items = [
        UITabBarItem(title: "Tab 1", image: nil, tag: 0),
        UITabBarItem(title: "Tab 2", image: nil, tag: 1),
    ]
tabBar.tintColor = UIColor.white
tabBar.barTintColor = UIColor.theme
tabBar.alignment = .justified
tabBar.itemAppearance = .titles
tabBar.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
tabBar.displaysUppercaseTitles = true
tabBar.sizeToFit()
self.mainTabBar.addSubview(tabBar)

Here mainTabBar is my customview which is exactly below the NavigationBar.

Hi sir! After custom MDCTabBar in custom view, so how you display specific viewController in specific tabBarItem??? — I Love Coding, Nov 13 '18 at 14:02

score 1 · Answer 3 · answered Oct 25 '18 at 14:09

Swift 4:

I've got two reasons why I haven't seen my tabBar!

First one is the fact that I didn't pick the colors which are different from my container(tabBarView) colors so it was white tabBar with white text on white tabBarView.

Second is one tricky thing which differs from other previous answers. I set my MDCTabBar frame equal to view.bounds and than squash it to the container tabBarView size with sizeToFit method. This is the only thing which gives me the right position on the screen! You are welcome to adjust some properties and use it in your code! It would be interesting to read your comments!

func setTabBar() {

// Set our MDCTabBar frame equal to view.bounds
let tabBar = MDCTabBar(frame: view.bounds)
tabBar.delegate = self
tabBar.items = [
    UITabBarItem(title: NSLocalizedString("FirstTab", comment: ""), image: nil, tag: 0),
    UITabBarItem(title: NSLocalizedString("SecondTab", comment: ""), image: nil, tag: 1)
]
tabBar.itemAppearance = .titles
tabBar.barTintColor = .yellow
tabBar.tintColor = .green
tabBar.setTitleColor(.black, for: .normal)
tabBar.setTitleColor(.blue, for: .selected)
tabBar.displaysUppercaseTitles = false
tabBar.alignment = .justified

// This sizeToFit will squash our MDCTabBar to tabBarView size
tabBar.sizeToFit()
// Add MDCTabBar to our tabBarView as a subview
tabBarView.addSubview(tabBar)

}

Hi sir! After custom MDCTabBar in custom view, so how you display specific viewController in specific tabBarItem??? — I Love Coding, Nov 13 '18 at 14:01

How to add MDCTabBar in the custom view?

3 Answers3