如何更改 UISearchBar 图标的颜色？

Question

我不知道如何修改原始searchIcon的颜色。

Answer 1

我找到的最佳解决方案是更改 UISearchBar 内 UItextField 中图标的颜色

（本方案使用原UISearchBar的图标，无需提供自己的图形资源）

转换为 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

searchIcon 位于 searchTextField 的 leftView 中。 由于这是可访问的，我们可以轻松地为视图设置 tintColor。 tintColor 也用于 searchIcon。

因此，在您的代码中，您可以使用以下代码将搜索图标更改为白色：

searchBar.searchTextField.leftView?.tintColor = .white

Answer 3

您可以使用白色搜索图标的自定义图像，因为搜索栏不会修改您提供的图像。 要设置自定义图像，请使用此方法。 （ 链接到文档。 ）

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

示例代码：

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

在斯威夫特：

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

Answer 4

这个灵魂在 Swift 3.0 中的 Xcode 8.2.1 上对我有用。 ：

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
    }
}

用法示例：

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

Answer 5

斯威夫特-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
    }
}

像这样调用这些扩展方法：

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

Answer 6

根据 Federica's anwser .... 迅速做到这一点

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

Answer 7

仅更改搜索图标的颜色，而不更改 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
}

创建如下结果：

Answer 8

适用于使用界面构建器的人的解决方案。 您可以向 UISearchBar 添加用户定义的运行时属性：

Color类型的searchField.leftView.tintColor您可以选择所需的图标颜色，可以从您的颜色资产库中选择以支持浅色和深色模式的不同颜色。

Answer 9

继这里的一些答案之后

如果您想在故事板第一个子类 UISearch 栏中查看并进行更改，请执行上述操作。

但是，在@IBInspectable 变量中添加更改，不要忘记类顶部的@IBDesignable 并在“身份检查器”中设置搜索栏子类

我在下面为 swift 3.0 添加了完整的工作子类和代码 在这里您将能够更改占位符文本、搜索文本和放大镜

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

确保在使用setImage API 时，传递渲染模式为UIImageRenderingModeAlwaysTemplate的图像。 例如：

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

Answer 11

没有足够的理由来设置您自己的自定义图像只是为了更改图标色调颜色。 不要忘记性能。 并且通过原始字符串键检索值并不能保证其他编码人员通常会错误输入 app crashes 。 我们并不完美。

UISearchBar实例的属性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

从 iOS 13 开始，我们现在可以通过 SF Symbols 访问许多标准系统图标。 此外，如果您想为搜索栏采用统一的配色方案，以便它们看起来都一样而无需重复代码，您可以使用Appearance工作流程一次性更改它们。 例如：

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

此代码将应用程序中的所有搜索栏设置为使用标准的白色放大镜图标。 您可以使用类似的代码来更改“清除”按钮图标、书签图标和结果列表图标。 您只需将.search更改为适当的枚举值并找到适当图标的系统名称（您可以从免费的 SF System 应用程序中获取）。

另一种使用Appearance方法是设置搜索视图中包含的所有视图的色调颜色，尽管这在某些情况下可能会产生不需要的效果（即更改文本光标的颜色）：

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

这将使左侧图标和文本光标变黄，但由于某种原因令人讨厌地不是“清除”按钮。 我不喜欢使用这种方法，因为它可能不是面向未来的； Apple 习惯于在内部进行更改，如果您不使用他们批准的方法，可能会导致意外更改。

Answer 14

我知道这是一篇旧帖子，但由于在黑暗模式下有一个 Xamarin 错误并且我挣扎了几个小时，我想我想分享我的非常简单的解决方案。

iOS-自定义渲染器。

[程序集：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

我的解决方案：

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];
}