13

I'm trying to add a Navigation Bar in a xib, but the navigation bar does not fill to the top, it leaves space above it where the camera notch is. See the screenshot below:

enter image description here

Here are my constraints for the Navigation Bar:

enter image description here

I've also tried setting the top constraint for the Navigation Bar to the Superview. This is the result of that:

enter image description here

I can't believe it is this difficult. What a I missing here?

5 Answers 5

7
  1. You should have @IBOutlet of your navigation bar (or reference if navigation bar is made programmatically). Also, keep the bar's top constraint to Safe area.
  2. Make your ViewController conform to UINavigationBarDelegate and set delegate of navigation bar (navigationBar.delegate = self)
  3. Implement this function and return .topAttached:
func position(for bar: UIBarPositioning) -> UIBarPosition {
 return .topAttached
}
4

You almost never want to add a UINavigationBar directly to a view controller's view, rather you want embed your view controller in a UINavigationController. If you're using storyboards, you can do this by selected your view controller, clicking the Editor menu -> Embed In -> Navigation Controller.

If not using storyboards you can create a view controller, and set it as the root view controller of UINavigationController. Then present the navigation controller or embed that navigation controller in a tab controller or split controller.

let mySpecialViewController = MySpecialViewController()
let navigationController = UINavigationController(rootViewController: mySpecialViewController)
present(navigationController, animated: true)

This code above needs to be called from inside a UIViewController subclass.

If you are doing this from your app delegate to set up the initial view controller of your app, you can do it like so:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    let mySpecialViewController = MySpecialViewController()
    let navigationController = UINavigationController(rootViewController: mySpecialViewController)
    window?.rootViewController = navigationController
    window?.makeKeyAndVisible()
    return true
}
5
  • What if I'm not using Storyboards? There is an architectural reason why I try to lean away from them.
    – tentmaking
    Commented Dec 12, 2018 at 16:50
  • If I add a Navigation Controller and arrange my ViewController inside that I get error when attempting to present the View Controller. i.e. the view property isn't set, or only one view can be set.
    – tentmaking
    Commented Dec 12, 2018 at 16:51
  • I think that's a valid answer, but that is something I'm trying to avoid. With that solution, I've found that the view of MySpecialViewController always begins under the navigation bar so I have to add some default padding to push the content down below the navigation bar, which I find error prone and annoying to do.
    – tentmaking
    Commented Dec 12, 2018 at 20:01
  • Constraining views to the safe area which is the default in interface builder will handle all of these insets for you and will be much easier than trying to adjust the hight of a UINavigationBar, as this is in line with the intentions of UIKit. For more information you should watch the WWDC session on building Apps for Every Size and Shape.
    – beyowulf
    Commented Dec 12, 2018 at 20:22
  • 1
    As of iOS 13, rather than in your App Delegate, this should now be put in the scene delegate's implementation of scene(_:willConnectTo:options:).
    – narco
    Commented Mar 20, 2022 at 8:36
3

Had the same issue and was able to find a solution. What you need to do is to set the delegate, implement positionForBar: in the delegate returning UIBarPositionTopAttached

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar
{
    return UIBarPositionTopAttached;
}

2
  • 2
    The delegate method never gets called for me?
    – ArielSD
    Commented Jul 29, 2019 at 14:57
  • Hard to say why without the code. How are you setting the delegate, are you doing it in code or are you doing it in the intrface file? Commented Jul 30, 2019 at 15:08
1

StoryBoard

  1. Go to Navigation Bar
  2. select the Appearance to scroll Edge Look At the Below attach image

Programatically

    title = "Fix Navigation Bar issue"
    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = .red
    navigationController?.navigationBar.scrollEdgeAppearance = appearance
    navigationController?.navigationBar.standardAppearance = appearance
    navigationController!.navigationBar.prefersLargeTitles = false
    navigationController!.navigationBar.barTintColor = UIColor.yellow
    navigationController!.navigationBar.tintColor = UIColor.black
0

Trying to use a navbar not in a nav controller?

Picture of my extended navbar hack (set to blue for visibility)

After creating my messages navbar with this:

let navBar = UINavigationBar(frame: CGRect(x: 0, y: 44.0, width: UIScreen.main.bounds.width, height: 55.0))
self.view.addSubview(navBar)
navBar.items?.append(UINavigationItem(title: "title"))
if #available(iOS 13.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.backgroundColor = UIColor.white
    navBar.standardAppearance = navBarAppearance
    navBar.scrollEdgeAppearance = navBarAppearance
} else {
    //ConvoViewController.edgesForExtendedLayout = []
}

I would encounter the issue where the user could scroll up and see messages above the navbar overlayed with the time/battery/wifi signal making for very poor UI.

To solve this, I created a UITextView to subview just as I had the navbar, I set the background to blue so you can see it but you can change it to any color.

let navBar = UINavigationBar(frame: CGRect(x: 0, y: 44.0, width: UIScreen.main.bounds.width, height: 55.0))
var textView = UITextView(frame: CGRect(x: 0, y: 0.0, width: UIScreen.main.bounds.width, height: 55.0))
textView.backgroundColor = UIColor.blue
self.view.addSubview(textView)
self.view.addSubview(navBar)
navBar.items?.append(UINavigationItem(title: "title"))
if #available(iOS 13.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.backgroundColor = UIColor.white
    navBar.standardAppearance = navBarAppearance
    navBar.scrollEdgeAppearance = navBarAppearance
} else {
    //ConvoViewController.edgesForExtendedLayout = []
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.