如何更改UISearchBar图标的颜色?

时间:2014-11-19 10:30:35

标签: ios objective-c uisearchbar

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

enter image description here

15 个答案:

答案 0 :(得分:28)

您可以使用白色搜索图标的自定义图像,因为搜索栏不会修改您提供的图像。要设置自定义图像,请使用此方法。 (Link to documentation.

- (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)

答案 1 :(得分:25)

我找到的最佳解决方案就在这里 Changing the color of the icons in a UItextField inside a UISearchBar

(此解决方案使用原始的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
    }

答案 2 :(得分:7)

这个灵魂在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)

答案 3 :(得分:3)

只需更改搜索图标的颜色,而无需更改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
}

创建如下结果:

altered search bar icon

答案 4 :(得分:3)

夫特-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)

答案 5 :(得分:2)

继续这里的一些答案

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

但是在@IBInspectable变量中添加更改并且不要忘记类顶部的@IBDesignable并在“Identity inspector”中设置searchbar子类

我为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

        }        }
}

}

答案 6 :(得分:1)

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

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

答案 7 :(得分:1)

没有足够的理由设置您自己的自定义图片,仅用于更改图标的颜色。不要忘了性能。并且通过原始字符串键检索值并不保证其他编码人员通常会打错应用程序崩溃。我们并不完美。

UISearchBar实例的属性searchTextFieldUISearchTextField)怎么样?

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

答案 8 :(得分:1)

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

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

searchBar.searchTextField.leftView?.tintColor = .white

答案 9 :(得分:0)

对于swift 3

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

答案 10 :(得分:0)

我的解决方案:

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

答案 11 :(得分:0)

使用界面生成器的解决方案。您可以将用户定义的运行时属性添加到UISearchBar:

类型为searchField.leftView.tintColor

Color 您可以选择所需的图标颜色,也可以从“颜色资产”库中选择该图标,以支持浅色和深色模式的不同颜色。

enter image description here

答案 12 :(得分:0)

从 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 习惯于在内部进行更改,如果您不使用他们批准的方法,可能会导致意外更改。

答案 13 :(得分:0)

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

iOS-自定义渲染器。

[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); 
        }
    }
}

答案 14 :(得分:-2)

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