large Navigation Bar backGround gets clear color when swiping back to root viewController

Question

Hey guys i've used largeNavigationBar and it's ok until i swipe back to root view controller and large navigation gets clear color in a nasty way. here's the code:

func largeNavigationTitle() {

    self.navigationController?.view.backgroundColor = VVUtility.navigationBarColor()
    let productTitle = request?.product?.name
    self.navigationItem.title = "\(productTitle ?? " ")".localized()
    self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.white, NSAttributedStringKey.font : VVUtility.normalFontWithPlusSize(increaseSize: -2.0)]

    if #available(iOS 11.0, *) {
        self.navigationController?.navigationBar.prefersLargeTitles = true
        self.navigationController?.navigationBar.backgroundColor = VVUtility.splashBackGroundColor()
        self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.white, NSAttributedStringKey.font : VVUtility.normalFontWithPlusSize(increaseSize: 0.0)]
    } else {
        // Fallback on earlier versions
    }

}

I've recalled largeNavigationTitle() in both viewWillAppear and viewDidLoad

UPDATE

here is screenshot of two states: before swiping: imgur.com/a/ZcSOrov when swiping: imgur.com/a/DYeeot8

Answer 1

Try this. It should set your root View controller's navigationBar's colour to the one you wanted:

func largeNavigationTitle() {

    self.navigationController?.view.backgroundColor = VVUtility.navigationBarColor()
   //add the two lines below
    self.navigationController?.navigationBar.barTintColor = VVUtility.navigationBarColor()
    self.navigationController?.navigationBar.isTranslucent = false

    let productTitle = request?.product?.name
    self.navigationItem.title = "\(productTitle ?? " ")".localized()
    self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.white, NSAttributedStringKey.font : VVUtility.normalFontWithPlusSize(increaseSize: -2.0)]

    if #available(iOS 11.0, *) {
        self.navigationController?.navigationBar.prefersLargeTitles = true
        self.navigationController?.navigationBar.backgroundColor = VVUtility.splashBackGroundColor()
        self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.white, NSAttributedStringKey.font : VVUtility.normalFontWithPlusSize(increaseSize: 0.0)]
    } else {
        // Fallback on earlier versions
    }

}

Answer 2

Did you try this in your code ?

self.navigationController.navigationBar.translucent = NO;

Answer 3

This is actually your navigation bar changing back to the small bar mode on the bottom controller.

This is because your navigation bar is not translucent. This causes (by default) the content controller to stop at the bottom of the navigation bar. So when the navigation bar becomes small again, there is no content between its new, shorter bottom and the top of the view controller.

Your hierarchy will look like this:

Now there's a property on UIViewController that defaults to false. You can use it to specify that you want your controller's view to extend under the non-translucent bar:

extendedLayoutIncludesOpaqueBars = true

This instantly makes the hierarchy now appear as:

Now you should no longer get the gap - but you might have issues with UI elements going under the bar. You can handle that by using Safe area insets and tweaking your layout as needed, using edgesForExtendedLayout may also help depending on your layout.

TL;DR Use extendedLayoutIncludesOpaqueBars = true