Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 563
Darko Avatar asked Sep 01 '17 20:09

Darko


People also ask

Can you change Iphone navigation bar?

A user changes the navigation bar's style, or UIBarStyle , by tapping the “Style” button to the left of the main page. This button opens an action sheet where users can change the background's appearance to default, black-opaque, or black- translucent.

How do I change my Apple navigation bar?

On your Mac, use Dock & Menu Bar System Preferences to change the appearance of the Dock, and to select items to show in the menu bar and in Control Center. To change these preferences, choose Apple menu > System Preferences, then click Dock & Menu Bar .

How do I customize the search bar in Swift?

Change Search Bar Default Image Color The left hand default search image in UISearchBar represents the left view of the UITextField. The Image is rendered to change it to the desired colour. @IBOutlet weak var searchBar: UISearchBar! Hope it will help you in customising the UISearchBar in your app.

What is a navigation bar in an app?

A navigation bar appears at the top of an app screen, enabling navigation through a hierarchy of content. A navigation bar also provides a natural place to display a screen’s title — helping people orient themselves in your app or game — and it can include controls that affect the screen’s content.

How do I enable navigation in a macOS app?

macOS doesn’t provide a navigation bar. To enable navigation in a macOS app, you often use a sidebar or a navigation control like a Back button in a toolbar. Also, you typically display the title of a macOS window in the title bar. Use the title area to describe the current screen if it provides useful context.

Should I hide the border of a large-title navigation bar?

For developer guidance, see prefersLargeTitles. Consider hiding the border of a large-title navigation bar to enhance the sense of connection between title and content. Use caution applying this design to a standard-title navigation bar, though, because the bar’s title and buttons might be harder to distinguish without a visible border.

Where should I place segmented controls in the navigation bar?

If a design like this makes sense in your app, place a segmented control in the navigation bar only at the top level of the hierarchy, and be sure to create accurate back-button labels for the second-level screens. For guidance, see Segmented controls. Use a large title to help people stay oriented as they navigate and scroll.


2 Answers

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.

like image 191
Darko Avatar answered Oct 12 '22 00:10

Darko


Put

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

and

UISearchBar.appearance().tintColor = UIColor.white in the AppDelegate.

Alternatively, put them both in [UIViewController viewDidLoad:]

like image 3
Brandon Avatar answered Oct 12 '22 00:10

Brandon