Search code examples
iosswiftuinavigationbaruisearchbar

iOS 11 customise search bar in navigation bar


I want to change the color of the text and icon in the iOS 11 searchbar when it is embedded in the navigation bar. So placeholder text, search text and search icon.

enter image description here

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = false
    let searchController = UISearchController(searchResultsController: nil)
    navigationItem.searchController = searchController
    navigationItem.hidesSearchBarWhenScrolling = false

    searchController.searchBar.placeholder = "Suchen"
    searchController.searchBar.tintColor = .white
}

As you can see in the image, the text is grey on a deep blue background, which looks ugly. I want to text and icon to be at least white. (changing the blue background color also does not work really good, see my other question)

The only thing which works is changing the color of the blinking cursor and the "cancel" button, which is done with the .tintColor property.

Solutions which seems to work in iOS 10 and below seem not work anymore in iOS 11, so please post only solutions which you know working in iOS 11. Thanks.

Maybe I miss the point about this "automatic styling" in iOS 11. Any help is appreciated.


Solution

  • I just found out how to set also the rest of them: (with some help of Brandon, thanks!)

    The "Cancel" text:

    searchController.searchBar.tintColor = .white
    

    The search icon:

    searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.search, state: .normal)
    

    The clear icon:

    searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.clear, state: .normal)
    

    The search text:

    UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue: UIColor.white]
    

    Thanks for the help @Brandon!

    enter image description here

    The placeholder:

    UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])
    

    enter image description here

    The white background:

    let searchController = UISearchController(searchResultsController: nil)
    searchController.delegate = self
    
    let searchBar = searchController.searchBar
    searchBar.tintColor = UIColor.white
    searchBar.barTintColor = UIColor.white
    
    if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
        textfield.textColor = UIColor.blue
        if let backgroundview = textfield.subviews.first {
    
            // Background color
            backgroundview.backgroundColor = UIColor.white
    
            // Rounded corner
            backgroundview.layer.cornerRadius = 10;
            backgroundview.clipsToBounds = true;
        }
    }
    
    if let navigationbar = self.navigationController?.navigationBar {
        navigationbar.barTintColor = UIColor.blue
    }
    
    navigationItem.searchController = searchController
    navigationItem.hidesSearchBarWhenScrolling = false
    

    enter image description here

    Taken from here.