7

I'm trying to customise the appearance of the search bar in my search controller.

Setting the background and text colors works fine but I just didn't find a way to change the color of the icons in the text field, specifically the magnifying glass and the x button.

I've found this Objective-C code which should do what I want but I'm struggling to translate it to Swift:

(EDIT: Skip to the first answer for the working Swift 3 solution.)

UITextField *searchBarTextField = [self.searchDisplayController.searchBar valueForKey:@"_searchField"];

// Magnifying glass icon.
UIImageView *leftImageView = (UIImageView *)searchBarTextField.leftView;
leftImageView.image = [LeftImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
leftImageView.tintColor = [UIColor whiteColor];

// Clear button
UIButton *clearButton = [searchBarTextField valueForKey:@"_clearButton"];
[clearButton setImage:[clearButton.imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
clearButton.tintColor = [UIColor whiteColor];

My attempt to translate to Swift:

let textField = searchController.searchBar.valueForKey("searchField") as! UITextField
// These two work fine.
textField.backgroundColor = UIColor.blackColor()
textField.textColor = UIColor.blackColor()

var glassIcon = textField.leftView
// This would work.
//glassIcon.hidden = true

// This does not have any effect.
//glassIcon?.tintColor = UIColor.whiteColor()

// My attempt to translate, but it gives an error.
glassIcon.image? = UIImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)

 var clearButton = textField.valueForKey("clearButton")!
            clearButton.setImage(clearButton.imageWithRenderingMode(.AlwaysTemplate), forState: .Normal)
// This gives the error: "Cannot assign to property: 'clearButton' is immutable
clearButton.tintColor = UIColor.whiteColor()
  // Sorry for the weird formatting, it glitches here in the editor. 

The leftView does not seem to have an image property. How can I access that property as the Objective-C code does? Also, if there is a better to achieve what I want please let me know.

2 Answers 2

17

Here is the solution:

// Text field in search bar.
let textField = searchController.searchBar.value(forKey: "searchField") as! UITextField

let glassIconView = textField.leftView as! UIImageView
glassIconView.image = glassIconView.image?.withRenderingMode(.alwaysTemplate)
glassIconView.tintColor = UIColor.white

let clearButton = textField.valueForKey("clearButton") as! UIButton
clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
clearButton.tintColor = UIColor.white
3
  • Hi, with this code, how do I append it to my searchbar?
    – Joe Sene
    May 5, 2017 at 19:56
  • Instantiate a search controller in your view controller: var searchController: UISearchController! and set it up in your viewDidLoad(), like that, for example: tableView.tableHeaderView = searchController.searchBar searchController = UISearchController(searchResultsController: nil) searchController.searchResultsUpdater = self searchController.dimsBackgroundDuringPresentation = false searchController.searchBar.delegate = self searchController.searchBar.sizeToFit() searchController.searchBar.barTintColor = UIColor.white
    – nontomatic
    May 6, 2017 at 9:15
  • You could replace as! with as? making the code slightly safer with no other adverse effects.
    – idrougge
    Mar 19, 2019 at 12:22
0

Here is the solution:

extension UITextField{

func setLeftIcon(_ icon: UIImage) {
    
    let padding = 8
    let size = 20
    
    let outerView = UIView(frame: CGRect(x: 0, y: 0, width: size+padding, height: size) )
    let iconView  = UIImageView(frame: CGRect(x: padding, y: 0, width: size, height: size))
    iconView.image = icon.withRenderingMode(.alwaysTemplate)
    iconView.tintColor = UIColor.white
    outerView.addSubview(iconView)
    
    leftView = outerView
    leftViewMode = .always
}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.