Customise the UISearchBar in Swift

Please find the steps to customise the UISearchBar as given below:

UISearchBar contains the UITextField which can be identified through key “searchField”.

Therefore we can access the UITextField through the key and perform necessary changes with it.

Change Search Bar Background Color

@IBOutlet weak var searchBar: UISearchBar!
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
    textfield.backgroundColor = UIColor.red
}

@IBOutlet weak var searchBar: UISearchBar!

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

textfield.backgroundColor = UIColor.red

}

Change Search Bar Text Color

@IBOutlet weak var searchBar: UISearchBar!
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
    textfield.textColor = UIColor.white
}

@IBOutlet weak var searchBar: UISearchBar!

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

textfield.textColor = UIColor.white

}

Change Search Bar Placeholder Color

@IBOutlet weak var searchBar: UISearchBar!
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
    textfield.attributedPlaceholder = NSAttributedString(string: textfield.placeholder ?? "", attributes: [NSAttributedStringKey.foregroundColor : UIColor.white])
}

@IBOutlet weak var searchBar: UISearchBar!

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

textfield.attributedPlaceholder = NSAttributedString(string: textfield.placeholder ?? "", attributes: [NSAttributedStringKey.foregroundColor : UIColor.white])

}

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!
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
    if let leftView = textfield.leftView as? UIImageView {
        leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)
        leftView.tintColor = UIColor.red
    }
}

@IBOutlet weak var searchBar: UISearchBar!

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

if let leftView = textfield.leftView as? UIImageView {

leftView.image = leftView.image?.withRenderingMode(.alwaysTemplate)

leftView.tintColor = UIColor.red

}

Hope it will help you in customising the UISearchBar in your app.

himanshu jindal

31 Jul, 2019
Created by - himanshu jindal

. . .

2 comments

soroush 2 years ago

That was awesome and very helpful, thank you.

Debabrata Roy (Moderator) 2 years ago
Glad to help.

Reply

Customise the UISearchBar in Swift

Leave a Comment Cancel Reply

2 comments

Message Sent!