How to wrap ViewController content inside MDCTabBarView container? - ios

Question

I'm trying to implement a MDCBottomNavigationBar which contains a MDCTabBarView, which in turn contains 2 other views (shown as tabbed).
In my main controller I create the 4 controllers for the menu items at the bottom and implement MDCTabBarViewDelegate. When the user taps on a bottom menu item, they are presented with the corresponding controller. Now I want one of the controllers to contain a tab bar at the top, as shown in the demo image below. I have created the same MDCTabBarViewDelegate with 2 controllers and added them to the view. They are shown and they are switching whenever I change the tabs, but there are issues with how it looks. So, Tab 2 should contain the tab bar with App and All, and underneath the tab bar, the content of each tab should be shown.
Please check this image:
Simulator Demo Image
The Green area should actually be the content of Tab 2 -> App. The problem is the Green area is displayed on the entire screen, instead of being displayed under the tab bar. The second problem is that my view controllers are showing a faded bar above the bottom menu. I tried to hide that bar with navigationController?.navigationBar.isHidden = true but nothing seems to work.
Can someone help me with the 2 issues above? I can't find a single resource / documentation about how to use this component on iOS. It would be great if you could even share some docs that I can read by myself, if not the answer.
Parent view controller:
class HomeController: UITabBarController {
let firstC = FirstController()
let secondC = SecondController()
let thirdC = ThirdControllerController()
let fourthC = FourthController()
let bottomNavBar: MDCBottomNavigationBar = {
let bottomNavBar = MDCBottomNavigationBar()
bottomNavBar.titleVisibility = .always
bottomNavBar.alignment = .justifiedAdjacentTitles
return bottomNavBar
}()
let firstItem: MDCTabBarItem = {
let firstItem = MDCTabBarItem()
firstItem.title = "Tab 1"
firstItem.image = UIImage(systemName: "house.fill")
firstItem.tag = 0
return firstItem
}()
let secondItem: MDCTabBarItem = {
let secondItem = MDCTabBarItem()
secondItem.title = "Tab 2"
secondItem.image = UIImage(systemName: "house.fill")
secondItem.tag = 1
return secondItem
}()
let thirdItem: MDCTabBarItem = {
let thirdItem = MDCTabBarItem()
thirdItem.title = "Tab 3"
thirdItem.image = UIImage(systemName: "house.fill")
thirdItem.tag = 2
return thirdItem
}()
let fourthItem: MDCTabBarItem = {
let fourthItem = MDCTabBarItem()
fourthItem.title = "Tab 4"
fourthItem.image = UIImage(systemName: "house.fill")
fourthItem.tag = 3
return fourthItem
}()
override func viewDidLoad() {
super.viewDidLoad()
bottomNavBar.delegate = self
bottomNavBar.items = [firstItem, secondItem, thirdItem, fourthItem]
self.viewControllers = [
firstC,
secondC,
thirdC,
fourthC
]
view.addSubview(bottomNavBar)
}
}
// SecondC - inner controller
class SecondController: UITabBarController {
let firstC = TabFirstC()
let secondC = TabSecondC()
let firstTab: MDCTabBarItem = {
let tab = MDCTabBarItem(title: "App", image: nil, tag: 0)
return tab
}()
let secondTab: MDCTabBarItem = {
let tab = MDCTabBarItem(title: "All", image: nil, tag: 1)
return tab
}()
let tabs: MDCTabBarView = {
let tabs = MDCTabBarView()
tabs.translatesAutoresizingMaskIntoConstraints = false
return tabs
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(tabs)
viewControllers = [firstC, secondC]
tabs.tabBarDelegate = self
tabs.items = [firstTab, secondTab]
tabs.selectedItem = firstTab
NSLayoutConstraint.activate([
tabs.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
tabs.topAnchor.constraint(equalTo: logoImageView.safeAreaLayoutGuide.bottomAnchor, constant: 10),
tabs.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
])
}
}