Search code examples
iosswiftuitextfielduisearchbaruisearchcontroller

How to customize the searchBar in a UISearchController?


I know how to set the appearance for a independent UISearchBar, just like the following.

    let searchField = searchBar.value(forKey: "searchField") as? UITextField

    if let field = searchField {
        field.backgroundColor = UIColor.defaultBackgroundColor
        field.layer.cornerRadius = 15.0
        field.textColor = .white
        field.tintColor = .white

        field.font = UIFont.systemFont(ofSize: fl(13))
        field.layer.masksToBounds = true
        field.returnKeyType = .search
    }

But this is not working in the UISearchController.

enter image description here

I want to set the text color of the placeholder and the left magnifying lens icon to pure white. (It seems there is a colored layer over them now).

In addition, the input text is black now, I want it to be white too.

In a conclusion, I want to modify the following properties.
1. textField background color
2. textFiled placeholder text color
3. textFiled text color
4. textFiled font

Anyone know how do it?

Add the following with your code in viewDidAppear:

            let placeholderString = NSAttributedString(string: "Placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])
            field.attributedPlaceholder = placeholderString

            let iconView = field.leftView as! UIImageView
            iconView.image = iconView.image?.withRenderingMode(.alwaysTemplate)
            iconView.tintColor = .white

Updata:
Put those settings in ViewDidAppear() did solve a part of my problem.
But the textfield's background color changed when I set the bar's background color.
Because searchBar.barTintColor = .red is not working in iOS11's UISearchController embedded in navigation item, I used searchBar.backgroundColor = .red
It confused me a lot.
So how to change searchBar's background and textField's background separately?


Solution

  • set attributedPlaceholder for textfield of search bar

    @IBOutlet weak var sbSearchBar: UISearchBar!
    if let textfield = sbSearchBar.value(forKey: "searchField") as? UITextField {
    
        textfield.backgroundColor = UIColor.red
        textfield.attributedPlaceholder = NSAttributedString(string: textfield.placeholder ?? "", attributes: [NSAttributedStringKey.foregroundColor : UIColor.white])
    
        if let leftView = textfield.leftView as? UIImageView {
            leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)
            leftView.tintColor = UIColor.white
        }
    
    }
    

    Here is result:

    enter image description here

    Update:

    I think, this may help you: how to change uitextfield color in searchcontroller?

    Just apply your color combination in this code and see.

    if #available(iOS 11.0, *) {
                let sc = UISearchController(searchResultsController: nil)
                sc.delegate = self
                let scb = sc.searchBar
                scb.tintColor = UIColor.white
                scb.barTintColor = UIColor.white
    
    
                if let textfield = scb.value(forKey: "searchField") as? UITextField {
                    //textfield.textColor = // Set text color
                    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 = sc
                navigationItem.hidesSearchBarWhenScrolling = false
    
    }
    

    Result:

    enter image description here