Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is UISearchController changing the navigation bar colors?

I have tested this on a sample project with 2 view controllers defined in the storyboard using Xcode 11 (iOS 13). The "presenting" view controller is embedded in a navigation controller and has the navigation bar colors set in the viewWillAppear. The "search" view controller adds a UISearchController in the viewDidLoad and is pushed by the presenting view controller (NOT modal).

With just this setup when the search view controller is displayed the navigation bar has the blue background and red tint color as expected. However when scrolling down and the search bar is displayed the background color of the navigation bar is lost (or changed to what appears to be the default iOS grey / translucent). However if you scroll back up (hide the search bar) or focus on the search bar text field the navigation bar color returns!

Also if you focus on the search bar text field and then cancel (by tapping the Cancel button) the tint color of the navigation bar reverts from red to the default iOS blue as can be noticed by the back bar item.

Navigation Bar on Load

Navigation Bar on Search

Focus on Search Bar

Cancel Search Bar

Any suggestions on resolving this issue?

I have set the navigation bar colors in the viewWillAppear of the search controller too which didn't change this behaviour.

I set isTranslucent to true for the navigation bar in the search controller which seemed to prevent the reverting of the background color but it did not change the reverting of the tint color on cancel.

Presenting View Controller

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

    navigationController?.navigationBar.barTintColor = .blue
    navigationController?.navigationBar.tintColor = .red
}

Search View Controller

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "Search VC"

    searchController.dimsBackgroundDuringPresentation = false
    searchController.obscuresBackgroundDuringPresentation = false

    navigationItem.searchController = searchController

    definesPresentationContext = true
}

EDIT

Setting the scrollEdgeAppearance, backButtonAppearance and buttonAppearance as suggested works a treat except for system bar buttons that default to the iOS blue. This can be resolved by setting the UINavigationBar.tintColor but neither that resolves the back button chevron color defaulting on cancel of the search.

Navigation Bar on Cancel

if #available(iOS 13.0, *) {
    let buttonAppearance = UIBarButtonItemAppearance()
    buttonAppearance.configureWithDefault(for: .plain)
    buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.red]

    let navigationBarAppearance = UINavigationBarAppearance()
    navigationBarAppearance.configureWithOpaqueBackground()
    navigationBarAppearance.backgroundColor = .blue
    navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.red]

    navigationBarAppearance.backButtonAppearance = buttonAppearance
    navigationBarAppearance.buttonAppearance = buttonAppearance
    navigationBarAppearance.doneButtonAppearance = buttonAppearance

    navigationController?.navigationBar.scrollEdgeAppearance = navigationBarAppearance
    navigationController?.navigationBar.compactAppearance = navigationBarAppearance
    navigationController?.navigationBar.standardAppearance = navigationBarAppearance
} else {
    navigationController?.navigationBar.barTintColor = .blue
    navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.red]
    navigationController?.navigationBar.tintColor = .red
}
like image 511
Chamitha Avatar asked Oct 22 '19 01:10

Chamitha


People also ask

How do I change my navigation bar background?

In order to change the hub navigation bar color, we can go to site settings of hub site>Change the look>under the header section>Background> select a theme color to change the background color of your site header.


1 Answers

However when scrolling down and the search bar is displayed the background color of the navigation bar is lost

All of that is normal. New in iOS 13, the expanded nav bar (displaying search bar, large title, etc.) has different appearance from the normal nav bar. Your settings applied only to the normal nav bar because you didn't make them the iOS 13 way. If you want the expanded nav bar to look like the normal nav bar, you have to set its appearance separately and explicitly.

To do so, you need to set the navigation bar's scrollEdgeAppearance. Investigate classes UIBarAppearance, UINavigationBarAppearance, and UIBarButtonItemAppearance (you will need to set the backButtonAppearance explicitly).

like image 136
matt Avatar answered Sep 18 '22 08:09

matt