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 July 2019

. . .

2 comments

soroush Jan 24, 2022 at 5:17 pm

That was awesome and very helpful, thank you.

Debabrata Roy (Moderator) Feb 9, 2022 at 2:11 pm
Glad to help.

Reply

Customise the UISearchBar in Swift

Leave a Comment Cancel Reply

2 comments

Message Sent!