Persistent view with UITabBarController - ios

Question

I'm trying to build an app with layout similar to Apple Music - a tab bar navigation with a persistent view, accessible from everywhere in the app. The view can be expanded to take up the whole screen or minimised with a static height of 80. The UI is built in a storyboard with a normal UITabBarController. Here's a first draft:
This is how I've build it:
class TabbarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
embedLiveFeedbackController()
}
private func embedLiveFeedbackController() {
guard let feedbackController = UIStoryboard(name: "LiveFeedback", bundle: nil).instantiateInitialViewController() as? LiveFeedbackViewController else { return }
feedbackController.stateDelegate = self
addChildViewController(feedbackController)
view.addSubview(feedbackController.view)
feedbackController.view.translatesAutoresizingMaskIntoConstraints = false
feedbackController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
feedbackController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
feedbackController.view.bottomAnchor.constraint(equalTo: tabBar.topAnchor).isActive = true
liveFeedbackTopConstraint = feedbackController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
liveFeedbackHeightConstraint = feedbackController.view.heightAnchor.constraint(equalToConstant: Constants.minimizedHeight)
liveFeedbackHeightConstraint?.isActive = true
liveFeedbackTopConstraint?.isActive = false
}
}
The problem I have is that the content of the view controllers goes behind the persistent view and is not completely visible. One of the things I've tried is to constraint the view controllers to the top of the persistent view:
private func constraintViewControllers() {
guard let vcs = viewControllers else { return }
guard let topAnchor = liveFeedbackTopAnchor else { return } // a reference to the top anchor of the persistent view
for viewController in vcs {
viewController.view.translatesAutoresizingMaskIntoConstraints = false
viewController.view.bottomAnchor.constraint(equalTo: topAnchor).isActive = true
}
}
Of course, I get the following error:
Unable to activate constraint with anchors <NSLayoutYAxisAnchor:0x600000864640 "UILayoutContainerView:0x7fc813f0ea60.bottom"> and <NSLayoutYAxisAnchor:0x60400047b980 "UIView:0x7fc813f08af0.bottom"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'
Any suggestions how to go about implementing this?

Answer 1

Here is my suggestion, I tested it and worked fine
create a main viewController and put 2 view inside it (as in picture) :
-startViewController
--containerView (your app root viewController/tabBarController goes here)
--persistentView
in startViewController
class ViewController: UIViewController {
var tabController : TabController!
#IBOutlet weak var containerView: UIView!
#IBOutlet weak var persistentView: UIView!
#IBOutlet weak var persistentBottomConstraint: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
tabController = TabController.initFromStoryBord()
self.addChild(tabController)
tabController.view.frame = containerView.bounds
containerView.addSubview(tabController.view)
tabController.view.autoresizingMask = [.flexibleHeight, .flexibleWidth]
persistantBottomConstraint.constant = tabController.tabBar.frame.height
}
}
and then a class for TabBarController:
make sure to set Stroyboard ID for tabController
class TabController : UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
}
static func initFromStoryBord() -> TabController {
let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "TabController") as! TabController
return vc
}
}