Addding UIView between tabBar and Navigation view in UITabBarController

Question

I am working on a project that uses a UITabBarController for displaying all the different UIViewControllers but now I need to add a mini player just in between the tabBar and the navigation view (ViewControllers will have to resize too).

Is there anyway I can achieve that by reusing the existing class?

EDIT I have tried 2 methods:

1- Adding it into the view. Gets Added but above of the VCs

let aView = UIView()
view.addSubview(aView)
aView.backgroundColor = .white
aView.anchor(top: nil, leading: view.leadingAnchor, bottom: tabBar.topAnchor, trailing: view.trailingAnchor, size: .init(width: 0, height: 100))

2- Adding it into the tabBar. It might sound silly but I thought It would work.

let viewOverTabBar = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
viewOverTabBar.backgroundColor = UIColor.black
tabBar.addSubview(viewOverTabBar)

what did you tried? – Muhammad Shauket Jun 07 '19 at 09:24 — Muhammad Shauket, Jun 07 '19 at 09:24
@ShauketSheikh does it help? – Reimond Hill Jun 07 '19 at 09:39 — Reimond Hill, Jun 07 '19 at 09:39

score 2 · Answer 1 · answered Jun 07 '19 at 10:09

2

Add your view as subview to view of UITabBarViewController not tab bar itself. Just place it above tab bar.

Also change:

aView.anchor(top: nil, leading: view.leadingAnchor, bottom: tabBar.topAnchor, trailing: view.trailingAnchor, size: .init(width: 0, height: 100))

to setting directly frame property of your view. Also you need to do in in viewWillAppear method.

answered Jun 07 '19 at 10:09

NikR

628
4
14

Yes. And you need just to configure offsets for embedded VC. Otherwise you need to add your view as subview to to embedded VC. – NikR Jun 07 '19 at 10:46
how do I change the offset? – Reimond Hill Jun 07 '19 at 10:49
I mean that you need to offset the content of embedded VC. Simply by constraints inside embedded VC. – NikR Jun 07 '19 at 10:50
@NikR, could you explain why it should be in `viewDidAppear`. I add it in `viewDidLoad` at first, and then UITabBarViewController get a new shadowed item. Like we are add a new item tab on it. – Zhou Haibo Jul 04 '21 at 16:56

score 1 · Accepted Answer · answered Jun 07 '19 at 15:01

You can try this way :

class MyTabBarController: UITabBarController {

     override func viewDidLoad() {
         super.viewDidLoad()

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

     override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         self.createSmallPlayer()
    }

    func createSmallPlayer() {

        let viewOverTabBar = UIView(frame: CGRect(x: 0, y: self.tabBar.frame.origin.y-40, width: self.tabBar.frame.size.width, height: 30))
        viewOverTabBar.backgroundColor = UIColor.brown

        //viewOverTabBar.layer.cornerRadius = viewOverTabBar.frame.size.height/2
        viewOverTabBar.layer.masksToBounds = false
        viewOverTabBar.layer.shadowColor = UIColor.black.withAlphaComponent(0.5).cgColor
         viewOverTabBar.layer.shadowRadius = 5.0
        viewOverTabBar.layer.shadowOffset = CGSize(width: 0.0, height: -5.0)
        viewOverTabBar.layer.shadowOpacity = 0.5

        //tabBar.addSubview(viewOverTabBar)
        view.addSubview(viewOverTabBar)
    }
}

And make sure that your all other view controller(which will navigate within tabbar) adjust frame accordingly.

Either you have to manage bottom view of all view controller by 30 pixels up and keep 30 pixels space blank at bottom, so no any content hide behind your player view.
Or you have you add :
- Container view UIView same as added player view.
- In that you have to add view controller's view with navigation controller as subview(Refer this : Adding a view controller as a subview in another view controller).

Addding UIView between tabBar and Navigation view in UITabBarController

2 Answers2