如何更改 UISearchBar 图标的颜色？

Question

I don't know how to modify the original searchIcon 's color.

Answer 1

Best solution I found was here Changing the color of the icons in a UItextField inside a UISearchBar

(This solution uses the original UISearchBar's icon, no need to supply your own graphical asset)

Converted to Swift (Swift 3):

    if let textFieldInsideSearchBar = self.searchBar.value(forKey: "searchField") as? UITextField,
        let glassIconView = textFieldInsideSearchBar.leftView as? UIImageView {

            //Magnifying glass
            glassIconView.image = glassIconView.image?.withRenderingMode(.alwaysTemplate)
            glassIconView.tintColor = .whiteColor
    }

Answer 2

The searchIcon is located in the leftView of the searchTextField. Since this is accessible we can easily set the tintColor for the view. The tintColor is also used for the searchIcon.

So in your code you can change the search icon to white with the following code:

searchBar.searchTextField.leftView?.tintColor = .white

Answer 3

You can use a custom image of a white search icon, as the search bar will not modify your supplied image. To set a custom image, use this method. ( Link to documentation. )

- (void)setImage:(UIImage *)iconImage
forSearchBarIcon:(UISearchBarIcon)icon
           state:(UIControlState)state;

Example Code:

[searchBar setImage:[UIImage imageNamed:@"SearchIcon"]
   forSearchBarIcon:UISearchBarIconSearch
              state:UIControlStateNormal];

In Swift:

searchBar.setImage(UIImage(named: "SearchIcon"), for: .search, state: .normal)

Answer 4

This soultion worked for me on Xcode 8.2.1 in Swift 3.0. :

extension UISearchBar
{
    func setPlaceholderTextColorTo(color: UIColor)
    {
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        textFieldInsideSearchBar?.textColor = color
        let textFieldInsideSearchBarLabel = textFieldInsideSearchBar!.value(forKey: "placeholderLabel") as? UILabel
        textFieldInsideSearchBarLabel?.textColor = color
    }

    func setMagnifyingGlassColorTo(color: UIColor)
    {
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        let glassIconView = textFieldInsideSearchBar?.leftView as? UIImageView
        glassIconView?.image = glassIconView?.image?.withRenderingMode(.alwaysTemplate)
        glassIconView?.tintColor = color
    }
}

Usage example:

searchController.searchBar.setPlaceholderTextColorTo(color: mainColor)
searchController.searchBar.setMagnifyingGlassColorTo(color: mainColor)

Answer 5

Swift-3:

extension UISearchBar
{

    func setMagnifyingGlassColorTo(color: UIColor)
    {
        // Search Icon
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        let glassIconView = textFieldInsideSearchBar?.leftView as? UIImageView
        glassIconView?.image = glassIconView?.image?.withRenderingMode(.alwaysTemplate)
        glassIconView?.tintColor = color
    }

    func setClearButtonColorTo(color: UIColor)
    {
        // Clear Button
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        let crossIconView = textFieldInsideSearchBar?.value(forKey: "clearButton") as? UIButton
        crossIconView?.setImage(crossIconView?.currentImage?.withRenderingMode(.alwaysTemplate), for: .normal)
        crossIconView?.tintColor = color
    }

    func setPlaceholderTextColorTo(color: UIColor)
    {
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        textFieldInsideSearchBar?.textColor = color
        let textFieldInsideSearchBarLabel = textFieldInsideSearchBar!.value(forKey: "placeholderLabel") as? UILabel
        textFieldInsideSearchBarLabel?.textColor = color
    }
}

Call these extension method like this:

searchBarTextField.setMagnifyingGlassColorTo(color: yourColor)
searchBarTextField.setClearButtonColorTo(color: yourColor)
searchBarTextField.setPlaceholderTextColorTo(color: yourColor)

Answer 6

As per Federica's anwser....To do this in swift

var image: UIImage = UIImage(named: "search")!
self.searchBar.setImage(image, forSearchBarIcon: UISearchBarIcon.Search, state: UIControlState.Normal)

Answer 7

For just changing the color of the search icon, without altering the actual icon in Swift 3:

if let textField = self.searchBar.value(forKey: "searchField") as? UITextField,
    let iconView = textField.leftView as? UIImageView {

    iconView.image = iconView.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
    iconView.tintColor = UIColor.red
}

Creates a result like so:

Answer 8

A solution for those using interface builder. You can add a User Defined Runtime Attribute to the UISearchBar:

searchField.leftView.tintColor of type Color You can select the desired color of the icon, can be selected from your Color Assets library to support different colors for both light and dark mode.

Answer 9

Following on from some of the answers here

If you would like to see and make the changes in storyboard first subclass UISearch bar and do as above.

However add the changes in a @IBInspectable variable and not forgetting the @IBDesignable at the top of the class and setting the searchbar subclass in the "Identity inspector"

I have added the full working subclass and code below for swift 3.0 Here you will be able to change the placeholder text, search text and magnifying glass

import UIKit

@IBDesignable

class CustomSearchBar: UISearchBar {
@IBInspectable var placeholderColor: UIColor? {
    didSet {

        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        let textFieldInsideSearchBarLabel = textFieldInsideSearchBar!.value(forKey: "placeholderLabel") as? UILabel
        textFieldInsideSearchBarLabel?.textColor = placeholderColor
    }
}

@IBInspectable var textColor: UIColor? {
    didSet {
        let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField
        textFieldInsideSearchBar?.textColor = textColor
    }
}

@IBInspectable var magnifyingGlassColor: UIColor? {

    didSet {

        if let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField,
            let glassIconView = textFieldInsideSearchBar.leftView as? UIImageView {

            //Magnifying glass
            glassIconView.image = glassIconView.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
            glassIconView.tintColor = magnifyingGlassColor

        }        }
}

}

Answer 10

Make sure that when you use the setImage API, pass an image with rendering mode of UIImageRenderingModeAlwaysTemplate . For example:

[self.searchBar setImage:[[UIImage imageNamed: @"icon-search"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

Answer 11

There are no adequate reasons to set your own custom image just for changing icon tint color. Don't forget about perfomance. And retrieving a value by a raw string key doesn't garantee that other coders can mistype usually calling app crashes . We're not perfect.

How about UISearchBar instance's property searchTextField ( UISearchTextField )?

if let thatMysteriousLoop = yourSearchBar.searchTextField.leftView as? UIImageView {
    thatMysteriousLoop.tintColor = anyColorYouWannaSet // <-- Voilà!
}

Answer 12

快速 3

        searchBar.setImage(UIImage(named: "location-icon-black"), for: .search, state: .normal)

Answer 13

Since iOS 13, we now have access to many standard system icons via SF Symbols. Also, if you want to have a unified colour scheme for your search bars so that they all look the same without having to duplicate code, you can use the Appearance workflow to change them all at once. For example:

    let image = UIImage(systemName: "magnifyingglass")?.withTintColor(.white, renderingMode: .alwaysOriginal)
    UISearchBar.appearance().setImage(image, for: .search, state: .normal)

This code sets all search bars in the app to use the standard magnifying glass icon, in white. You can use similar code to change the 'clear' button icon, the bookmark icon and the results list icon. You just need to change .search to the appropriate enumeration value and find the system name of the appropriate icon (which you can get from the free SF System app).

Another method that uses Appearance would be to set the tint colour of all views contained within a search view, though this may have unwanted effects in some cases (ie changing the colour of the text cursor):

UIView.appearance(whenContainedInInstancesOf: [UISearchBar.self]).tintColor = .yellow

This will make the left icon and the text cursor yellow, though annoyingly not the 'clear' button for some reason. I prefer not to use this method as it may not be future-proof; Apple has a habit of changing things internally that can cause unexpected changes if you don't use their approved methods.

Answer 14

I know it is an old post but since there is a Xamarin Bug on the dark mode and I was struggling for hours, I thought I share my pretty easy solution.

iOS- custom Renderer.

[assembly:ExportRenderer(typeof(SearchBar),typeof(YourProjectSearchbarRenderer))]

public class YourProjectSearchbarRenderer : SearchBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            // iOS >13 -> Xamarin bug on darkmode,
            // just shows the light icon...
            this.Control.SetImageforSearchBarIcon(UIImage.FromFile("AddAnSearchIcon.ico"), UISearchBarIcon.Search, UIControlState.Normal); 
        }
    }
}

Answer 15

My solution:

searchBar = UISearchBar()
searchBar.searchBarStyle = .minimal
searchBar.setTextColor(.white)
let textField = self.searchBar.getTextField()
let glassIconView = textField?.leftView as? UIImageView
glassIconView?.image = glassIconView?.image?.withRenderingMode(.alwaysTemplate)
glassIconView?.tintColor = .white
searchBar.showsCancelButton = true

extension UISearchBar {
    func getTextField() -> UITextField? {
        return self.value(forKey: "searchField") as? UITextField
    }

    func setTextColor(_ color: UIColor) {
        let textField = getTextField()
        textField?.textColor = color
    }
}

Answer 16

if(IOS_7) {
    self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
    self.searchBar.backgroundImage = [UIImage imageWithColor:[UIColor redColor] cornerRadius:5.0f];
}