How to add View above navigation controller?

Question

I want to add a view to TabBarController but above any NavigationController in it, so that it pushes it downwards. Something as seen in Apple Music app in the image (top purple gradient view). It shows across all screens so it's like in the TabBar controller

I added a view to a custom TabBarController but couldn't move the NavigationController down with:

navController.view.frame = CGRect(x: 0, y: 80, width: view.frame.width, height: view.frame.height)

How can I achieve this?

You'll create a custom view with buttons and tell it to instantiate there. This can be done with a separate storyboard or programmatically. There are other tutorials available on this. — Jake, Jun 20 '18 at 17:08
you can create a VC and add any childs with any frames inside it , the blueView in top and the tabbar in bottom — Shehata Gamal, Jun 20 '18 at 17:17
I'd say this is a view independent of any navigation controller. probably it uses some view controller containment to display notification above any embedded view controller, as it is also very likely that the mini player is implemented like this. — vikingosegundo, Jun 20 '18 at 17:29
Your description of what you want does not match what the Music app does. The purple header is not above the tab bar controller. It is shown at the top of only some of the view controllers in the tab controller. And on those, it is not shown above the nav bar. — rmaddy, Jun 20 '18 at 17:37
I didn't say above the tab bar controller, i said above nav bar controller — Oluwatobi Omotayo, Jun 20 '18 at 17:40
@OluwatobiOmotayo: probably for not showing any serious effort. — vikingosegundo, Jun 20 '18 at 17:50
Just watch [this video](https://m.youtube.com/watch?v=rRhJGnSmEKQ) — Jake, Jun 20 '18 at 17:54
I’ve tried this approach but the view covers some content on the screen which I don’t want — Oluwatobi Omotayo, Jun 20 '18 at 22:20

Sandeep Bhandari · Answer 1 · 2018-06-20T17:33:15.587

2

You can always add your View as subView to Navigation Bar

if let navigationBar = self.navigationController?.navigationBar {
   let yourView = //instantiate your view either using xib or from code
    navigationBar.addSubview(yourView)
}

Here is the code I have used

if let navBar = self.navigationController?.navigationBar, let customView = Bundle.main.loadNibNamed("SomeHeaderView", owner: self, options: nil)![0] as? UIView {
        navBar.addSubview(customView)
        customView.translatesAutoresizingMaskIntoConstraints = false
        customView.leadingAnchor.constraint(equalTo: navBar.leadingAnchor, constant: 0).isActive = true
        customView.trailingAnchor.constraint(equalTo: navBar.trailingAnchor, constant: 0).isActive = true
        customView.topAnchor.constraint(equalTo: navBar.topAnchor, constant: 0).isActive = true
        customView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    }

The subview added is plain and simple. It has red background color and a label to it. Just to show how to add additional height to subView I have added height constraint as well

Here is the O/P

As far as Status bar color is concerned, you can always set the color to status bar using answer provided here

Hope this helps

edited Jun 20 '18 at 17:33

answered Jun 20 '18 at 17:14

Sandeep Bhandari

19,999
5
45
78

@downvoter : Care to explain? – Sandeep Bhandari Jun 20 '18 at 17:18
Why don't you cast custom view once? – vikingosegundo Jun 20 '18 at 17:30
1

`let customView = Bundle.main.loadNibNamed("SomeHeaderView", owner: self, options: nil)![0] as! UIView` – vikingosegundo Jun 20 '18 at 17:30
@vikingosegundo : yeah Ill do that was in hurry to post answer as somebody down voted it already :) – Sandeep Bhandari Jun 20 '18 at 17:30
@vikingosegundo : working on it sir :) – Sandeep Bhandari Jun 20 '18 at 17:32
@vikingosegundo : updated my answer with if let, please take a look – Sandeep Bhandari Jun 20 '18 at 17:33
this works but it covers the navbar, I don't want it to cover the navbar at all – Oluwatobi Omotayo Jun 21 '18 at 10:12
@oluwatobi-omotayo: Seems like you are little confused her buddy :) You have added a subView to navbar, so you can make this view as big as you want and it will be the part of NavBar. So there is no need to explicitly show nav bar, but in case you have to do it you can always modify auto layout constraint we added and add whatever value you want like `customView.topAnchor.constraint(equalTo: navBar.topAnchor, constant: whatever_value_need).isActive = true` – Sandeep Bhandari Jun 21 '18 at 10:56

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

What you need to do is have the navigation controller be the root view, and add the tab bar controller as it's embedded VC. (The embedded VC is called the root view controller of the navigation controller)

I'm not sure how you are building your view hierarchy but if you wanted to do it

Storyboard

Drag a Navigation Controller onto the storyboard (from the bottom right search, third tab that looks like a circle with a square in it)
Delete the default table view that comes up as the embedded VC
Drag a tab bar controller onto the storyboard
While holding control on your keyboard, drag from the Navigation controller to the tab bar controller.
Press on the option that says "Relationship segue", root view controller

you now have a tab bar controller embedded into a navigation controller.

Programmatically

Use one of the initializers, for example:

UINavigationController(rootViewController: <UIViewController>) UINavigationController(navigationBarClass: <AnyClass?>, toolbarClass: <AnyClass?>)

Where the rootViewController is your tab bar controller. You can use the setViewControllers method to pass it an array, which could consist of just your tab bar if you didn't use the rootViewController initializer.

The navigation controller will show a navigation bar at all moments unless you explicitly hide it. You can also subclass navigation bar and navigation controller if you wanted your navigation controller to look different than the default, like it does in the Apple Music app for example.

Edit

So since the question actually seems to be about extending the layout under/over the bars going to paste my comment here:

so just to clarify, the navigation controller is the ENTIRE screen. The bar at the top is known as a Navigation Bar and is accessible via self.navigationController?.navigationBar.

It doesn't matter what the root view controller is (whether its a tab or not) content will by default go under translucent bars.

Now there are a couple ways to prevent content from going under/over the bars. The easiest is to just do navigationController?.navigationBar.translucent = false since by default content doesn't go under opaque bars.

Can also do navigationController?.edgesForExtendedLayout = []

Look at extendedLayoutInclludesOpaqueBars and edgesForExtendedLayout properties on UINavigationController.

I tried this but it affects the sizing of the navigation controllers inside of the tabbarcontroller. by the way i' doing this programmatically. navbar clipped and navbartitles and back button not showing — Oluwatobi Omotayo, Jun 20 '18 at 17:27

How to add View above navigation controller?

2 Answers2

Storyboard

Programmatically

Edit

Linked