如何更改 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];
}