如何在 iOS 上更改 UISearchBar 组件的内部背景颜色

【问题标题】：How to change inside background color of UISearchBar component on iOS如何在 iOS 上更改 UISearchBar 组件的内部背景颜色
【发布时间】：2012-11-28 19:59:51
【问题描述】：

我知道如何删除/更改搜索字段周围的UISearchBar 背景颜色：

[[self.searchBar.subviews objectAtIndex:0] removeFromSuperview];
self.searchBar.backgroundColor = [UIColor grayColor];

但不知道如何在里面这样做：

这需要与 iOS 4.3+ 兼容。

【问题讨论】：

  • 试试这个stackoverflow.com/a/5557255/1570343
  • 这不行。我想摆脱组件内部的白色。看看问题...
  • @BorutTomazin 测试我的代码它的工作正常，在这里您可以使用我在答案中定义的 4 种图标类型更改 searchBar 图标，但您想使用白色搜索栏，所以只需在 searchbaricon 上添加图像和另一个白色搜索栏图标并添加图片作为搜索栏 UITextField 的背景
  • UISearchBar: changing background color of input field的可能重复
  • 对于 Swift 3。我在这里找到了解决方案：Customize textfield easily

标签： ios objective-c customization uisearchbar background-color


【解决方案1】：

在 iOS13 中快速尝试这个

@IBOutlet weak var searchBar: UISearchBar!
searchBar.barTintColor = .systemIndigo
searchBar.searchTextField.backgroundColor = .white

【讨论】：

    【解决方案2】：

    使用它来更新 xcode10 和 xcode11 的搜索文本字段 backgroud_color 对我来说工作正常

    [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTextColor:[UIColor greenColor]];

    【讨论】：

      【解决方案3】：

      Searchbar 现在有一个新的实例属性 SearchTextField 从 iOS 13 开始， https://developer.apple.com/documentation/uikit/uisearchbar/3175433-searchtextfield

      if(@available(iOS 13, *))
    searchBar.searchTextField.backgroundColor = [UIColor whiteColor];
    searchBar.searchTextField.textColor = [UIColor blackColor];
else{
    //API that supports below iOS 13
    //This will set it for all the UISearchBars in your application
    [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setBackgroundColor:[UIColor whiteColor]];
    [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTextColor:[UIColor blackColor]];
}

      【讨论】：

        【解决方案4】：

        iOS 13、Swift 5

        searchBar.searchTextField.backgroundColor = .gray
 searchBar.searchTextField.tintColor = .white
 searchBar.searchTextField.textColor = .white

        【讨论】：

          【解决方案5】：

          详情

          • Xcode 版本 11.0 (11A420a)，swift 5

          UISearchBar customising sample

          解决方案

          import UIKit

extension UISearchBar {
    func getTextField() -> UITextField? { return value(forKey: "searchField") as? UITextField }
    func setTextField(color: UIColor) {
        guard let textField = getTextField() else { return }
        switch searchBarStyle {
        case .minimal:
            textField.layer.backgroundColor = color.cgColor
            textField.layer.cornerRadius = 6
        case .prominent, .default: textField.backgroundColor = color
        @unknown default: break
        }
    }
}

          用法

          let searchBar = UISearchBar(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: 44))
//searchBar.searchBarStyle = .prominent
view.addSubview(searchBar)
searchBar.placeholder = "placeholder"
searchBar.setTextField(color: UIColor.green.withAlphaComponent(0.3))

          结果 1

           searchBar.searchBarStyle = .prominent // or default

          结果 2

           searchBar.searchBarStyle = .minimal

          完整样本

          import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let searchBar = UISearchBar(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: 44))
        //searchBar.searchBarStyle = .minimal
        searchBar.searchBarStyle = .prominent
        view.addSubview(searchBar)
        searchBar.placeholder = "placeholder"
        searchBar.setTextField(color: UIColor.green.withAlphaComponent(0.3))
    }
}

          【讨论】：

          • 这让我很生气...感谢您指出，您必须尽量减少 layer.backgroundColor...
          • 此解决方案的一个有趣问题是，当类型为 .minimal 并且将背景设置为白色时 -> 背景变为灰色。这是因为视图的顶部是由名为 _UISearchBarSearchFieldBackgroundView 的图像拍摄的
          • 无法理解。你能显示代码吗？我设置 searchBar.backgroundColor = .white 没有问题。
          • 漂亮的解决方案！谢谢。
          • 对于寻求更好解决方案的人，我建议您阅读EvGeniy Ilyin's，它远远低于许多丑陋的解决方案。（cmd+F，搜索此页面.) UISearchBar.appearance().setSearchFieldBackgroundImage(whiteImage, for: .normal)
          【解决方案6】：

          要在 iOS 13+ 上执行此操作，

          searchController.searchBar.searchTextField.backgroundColor = // your color here

          请注意，默认情况下searchTextField.borderStyle 设置为roundedRect，这会在您要设置的颜色之上应用浅灰色叠加层。如果这是不希望的，请执行

          searchController.searchBar.searchTextField.borderStyle = .none

          这将摆脱灰色覆盖，但也摆脱了圆角。

          【讨论】：

          • 如何更改 iOS 13 的占位符文本颜色？
          【解决方案7】：

          这帮助我更改了搜索栏中 textField 的背景颜色。

          UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .white

          【讨论】：

          • 请不要只放一些代码，还要提供一些解释。
          【解决方案8】：

          对于 Swift 4，我建议您只这样做，不需要额外的代码：

          self.searchBar.searchBarStyle = .prominent
self.searchBar.barStyle = .black

          如果您不希望外部背景为灰色，您也可以将 .prominent 更改为 .minimal。

          【讨论】：

            【解决方案9】：

            这对我有用。

            - (void)setupSearchBar
{
    [self.searchBar setReturnKeyType:UIReturnKeySearch];
    [self.searchBar setEnablesReturnKeyAutomatically:NO];
    [self.searchBar setPlaceholder:FOLocalizedString(@"search", nil)];
    [self.searchBar setBackgroundImage:[UIImage new]];
    [self.searchBar setBackgroundColor:[UIColor myGreyBGColor]];
    [self.searchBar setBarTintColor:[UIColor myGreyBGColor]];
    [self.searchBar setTintColor:[UIColor blueColor]];
}

            【讨论】：

              【解决方案10】：

              @EvGeniy Ilyin EvGeniy Ilyin 的解决方案是最好的。 我基于这个解决方案写了一个 Objective-C 版本。

              创建一个UIImage类别，并在UIImage+YourCategory.h中通告两个类方法

              + (UIImage *)imageWithColor:(UIColor *)color withSize:(CGRect)imageRect;
+ (UIImage *)roundImage:(UIImage *)image withRadius:(CGFloat)radius;

              UIImage+YourCategory.m

              中的实现方法 
              // create image with your color
+ (UIImage *)imageWithColor:(UIColor *)color withSize:(CGRect)imageRect
{
    UIGraphicsBeginImageContext(imageRect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, imageRect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

// get a rounded-corner image from UIImage instance with your radius
+ (UIImage *)roundImage:(UIImage *)image withRadius:(CGFloat)radius
{
    CGRect rect = CGRectMake(0.0, 0.0, 0.0, 0.0);
    rect.size = image.size;
    UIGraphicsBeginImageContextWithOptions(image.size, NO, [UIScreen mainScreen].scale);
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
                                                cornerRadius:radius];
    [path addClip];
    [image drawInRect:rect];

    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

              在您的ViewController 中创建自己的UISearchBar

              CGRect rect = CGRectMake(0.0, 0.0, 44.0, 30.0);
UIImage *colorImage = [UIImage imageWithColor:[UIColor yourColor] withSize:rect];
UIImage *finalImage = [UIImage roundImage:colorImage withRadius:4.0];
[yourSearchBar setSearchFieldBackgroundImage:finalImage forState:UIControlStateNormal];

              【讨论】：

                【解决方案11】：

                对于 Swift 3+，使用这个： 

                for subView in searchController.searchBar.subviews {

    for subViewOne in subView.subviews {

        if let textField = subViewOne as? UITextField {

           subViewOne.backgroundColor = UIColor.red

           //use the code below if you want to change the color of placeholder
           let textFieldInsideUISearchBarLabel = textField.value(forKey: "placeholderLabel") as? UILabel
                textFieldInsideUISearchBarLabel?.textColor = UIColor.blue
        }
     }
}

                【讨论】：

                  【解决方案12】：

                  苹果的方式呢？

                  UISearchBar.appearance().setSearchFieldBackgroundImage(myImage, for: .normal)

                  您可以在设计上设置任何图像！

                  但如果你想创建所有程序，你可以这样做

                  我在 Swift 3 上的解决方案

                  let searchFieldBackgroundImage = UIImage(color: .searchBarBackground, size: CGSize(width: 44, height: 30))?.withRoundCorners(4)
UISearchBar.appearance().setSearchFieldBackgroundImage(searchFieldBackgroundImage, for: .normal)

                  我在哪里使用助手扩展

                  public extension UIImage {

    public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
        let rect = CGRect(origin: .zero, size: size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        guard let cgImage = image?.cgImage else { return nil }
        self.init(cgImage: cgImage)
    }

    public func withRoundCorners(_ cornerRadius: CGFloat) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let rect = CGRect(origin: CGPoint.zero, size: size)
        let context = UIGraphicsGetCurrentContext()
        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)

        context?.beginPath()
        context?.addPath(path.cgPath)
        context?.closePath()
        context?.clip()

        draw(at: CGPoint.zero)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        return image;
    }

}

                  【讨论】：

                  • 这无疑是最好最优雅的方式。谢谢！救了我的命。
                  • 这是正确的方法。我正要发布这个版本。干得好！非常完整！
                  • 也许我做错了什么，但这会设置整个搜索栏的背景图像，而不仅仅是文本字段内的背景图像
                  • 终于有了一个不使用私有API的解决方案！我使用 UISearchBar.appearance().setSearchFieldBackgroundImage(UIImage(), for: .normal) 来完全去除灰色图像
                  【解决方案13】：

                  斯威夫特 3

                  for subview in searchBar.subviews {
    for innerSubview in subview.subviews {
        if innerSubview is UITextField {
            innerSubview.backgroundColor = UIColor.YOUR_COLOR_HERE
        }
    }
}

                  【讨论】：

                    【解决方案14】：

                    使用此代码更改 searchBar 的UITextField backgroundImage：

                    UITextField *searchField;
NSUInteger numViews = [searchBar.subviews count];
for (int i = 0; i < numViews; i++) {
    if ([[searchBar.subviews objectAtIndex:i] isKindOfClass:[UITextField class]]) { //conform?
        searchField = [searchBar.subviews objectAtIndex:i];
    }
}
if (searchField) {
    searchField.textColor = [UIColor whiteColor];
    [searchField setBackground: [UIImage imageNamed:@"yourImage"]]; //set your gray background image here
    [searchField setBorderStyle:UITextBorderStyleNone];
}

                    使用以下代码更改UISearchBarIcon：

                     UIImageView *searchIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourSearchBarIconImage"]];
searchIcon.frame = CGRectMake(10, 10, 24, 24);
[searchBar addSubview:searchIcon];
[searchIcon release];

                    此外，要更改 searchBar 图标，您可以在 UISearchBar 上使用以下内置方法（可从 iOS 5+ 获得）：

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

                    这里可以设置4种UISearchBarIcon，即：

                    1. UISearchBarIconBookmark
                    2. UISearchBarIconClear
                    3. UISearchBarIconResultsList
                    4. UISearchBarIconSearch

                    希望对你有帮助...

                    【讨论】：

                    • @BorutTomazin 我只是添加代码来更改搜索栏的文本字段背景颜色，当我得到搜索图标的输出时，我也会发布代码希望它对你有所帮助......
                    • 这种方式不是好办法。它可以在即将到来的 iOS 更新中轻松破坏您的应用程序。 编辑抱歉，刚刚看到 OP 需要它与 iOS 4 兼容。
                    • @Accatyyc 这是给出他想要的完美输出，它的问题发生在 5.0 或 4.3 版本以下，所以很好，如果你有解决方案，然后发布代码伙计，我有这个解决方案可能有用...
                    • 是的，这就是我要找的。谢谢！
                    • 不是最好的解决方案。请参阅 EvGeniy Ilyin 的，它远远低于许多丑陋的解决方案。 （cmd+F，搜索本页）UISearchBar.appearance().setSearchFieldBackgroundImage(white‌​Image, for: .normal)
                    【解决方案15】：

                    我发现这是在 Swift 2.2 和 iOS 8+ 中使用 UISearchBarStyle.Minimal 自定义各种搜索栏属性外观的最佳方法

                    searchBar = UISearchBar(frame: CGRectZero)
searchBar.tintColor = UIColor.whiteColor() // color of bar button items
searchBar.barTintColor = UIColor.fadedBlueColor() // color of text field background
searchBar.backgroundColor = UIColor.clearColor() // color of box surrounding text field
searchBar.searchBarStyle = UISearchBarStyle.Minimal

// Edit search field properties
if let searchField = searchBar.valueForKey("_searchField") as? UITextField  {
  if searchField.respondsToSelector(Selector("setAttributedPlaceholder:")) {
    let placeholder = "Search"
    let attributedString = NSMutableAttributedString(string: placeholder)
    let range = NSRange(location: 0, length: placeholder.characters.count)
    let color = UIColor(white: 1.0, alpha: 0.7)
    attributedString.addAttribute(NSForegroundColorAttributeName, value: color, range: range)
    attributedString.addAttribute(NSFontAttributeName, value: UIFont(name: "AvenirNext-Medium", size: 15)!, range: range)
    searchField.attributedPlaceholder = attributedString

    searchField.clearButtonMode = UITextFieldViewMode.WhileEditing
    searchField.textColor = .whiteColor()
  }
}

// Set Search Icon
let searchIcon = UIImage(named: "search-bar-icon")
searchBar.setImage(searchIcon, forSearchBarIcon: .Search, state: .Normal)

// Set Clear Icon
let clearIcon = UIImage(named: "clear-icon")
searchBar.setImage(clearIcon, forSearchBarIcon: .Clear, state: .Normal)

// Add to nav bar
searchBar.sizeToFit()
navigationItem.titleView = searchBar

                    【讨论】：

                      【解决方案16】：

                      这是 Swift 版本（swift 2.1 /IOS 9）

                      for view in searchBar.subviews {
    for subview in view.subviews {
        if subview .isKindOfClass(UITextField) {
            let textField: UITextField = subview as! UITextField
            textField.backgroundColor = UIColor.lightGrayColor()
        }
    }
}

                      【讨论】：

                      • 这对我没有影响。但是设置 textField.layer.backgroundColor 确实会改变背景颜色。
                      【解决方案17】：

                      不涉及任何私有 API 的解决方案！ :)

                      目前 (probably since iOS 5 ) 您可以通过以下方式仅针对一种颜色情况执行此操作：

                      [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBackgroundColor:[UIColor redColor]];

                      但请记住，由于它基于外观，因此更改对于应用程序来说是全局性的（这可能是解决方案的优点或缺点）。

                      对于 Swift，您可以使用（它适用于 iOS 9 及更高版本）：

                      if #available(iOS 9.0, *) {
    UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).backgroundColor = UIColor.darkGrayColor()
}

                      如果您的项目支持 iOS 9 及更高版本，则不需要 #available。

                      如果您需要支持早期版本的 iOS 并想使用 Swift，请查看this 问题。

                      【讨论】：

                      • SearchBarStyle 应该是默认的！ :)
                      • 这对我不起作用，即使在默认或最小样式（iOS 8）下也不行。
                      • 仅适用于 iOS 9。这是 Swift 的等价物： UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).backgroundColor = UIColor.darkGrayColor()
                      • @MaxMacLeod，谢谢，我已根据您发布的内容更新了我的答案
                      【解决方案18】：

                      对于 iOS 9 使用这个：

                      - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.

// Remove lag on oppening the keyboard for the first time
UITextField *lagFreeField = [[UITextField alloc] init];
[self.window addSubview:lagFreeField];
[lagFreeField becomeFirstResponder];
[lagFreeField resignFirstResponder];
[lagFreeField removeFromSuperview];

//searchBar background color change
[[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setBackgroundColor:[UIColor greenColor]];
[[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTextColor:[UIColor blackColor];

return YES;
}

                      【讨论】：

                        【解决方案19】：

                        正如 Accatyyc 所说，对于 iOS5+ 使用 setSearchFieldBackgroundImage，但您要么需要创建图形，要么执行以下操作：

                        CGSize size = CGSizeMake(30, 30);
// create context with transparent background
UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);

// Add a clip before drawing anything, in the shape of an rounded rect
[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,30,30)
                            cornerRadius:5.0] addClip];
[[UIColor grayColor] setFill];

UIRectFill(CGRectMake(0, 0, size.width, size.height));
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[self.searchBar setSearchFieldBackgroundImage:image forState:UIControlStateNormal];

                        【讨论】：

                          【解决方案20】：

                          更好的解决方案是在UISearchBar内部设置UITextField的外观

                          [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBackgroundColor:[UIColor grayColor]];

                          【讨论】：

                          • 对不起@JulianKról 我现在才看到你的回答，之前没注意到
                          • 没问题，刚刚注意到你的，并检查了它有什么不同:)
                          • 重复上一个答案
                          【解决方案21】： 
                          - (void)viewDidLoad
{
    [super viewDidLoad];
    [[self searchSubviewsForTextFieldIn:self.searchBar] setBackgroundColor:[UIColor redColor]];
}

- (UITextField*)searchSubviewsForTextFieldIn:(UIView*)view
{
    if ([view isKindOfClass:[UITextField class]]) {
        return (UITextField*)view;
    }
    UITextField *searchedTextField;
    for (UIView *subview in view.subviews) {
        searchedTextField = [self searchSubviewsForTextFieldIn:subview];
        if (searchedTextField) {
            break;
        }
    }
    return searchedTextField;
}

                          【讨论】：

                            【解决方案22】：

                            只需使用类别方法遍历所有视图（在 iOS 7 中验证并且不使用私有 API）：

                            @implementation UISearchBar (MyAdditions)

- (void)changeDefaultBackgroundColor:(UIColor *)color {
  for (UIView *subview in self.subviews) {
    for (UIView *subSubview in subview.subviews) {
      if ([subSubview isKindOfClass:[UITextField class]]) {
        UITextField *searchField = (UITextField *)subSubview;
        searchField.backgroundColor = color;
        break;
      }
    }
  }
}

@end

                            因此，在将类别导入您的类后，只需像这样使用它：

                            [self.searchBar changeDefaultBackgroundColor:[UIColor grayColor]];

                            请记住，如果您将这个立即放在[[UISearchBar alloc] init] 行之后，它还不能工作，因为搜索栏的子视图仍在创建中。设置搜索栏的其余部分后，将其放下几行。

                            【讨论】：

                              【解决方案23】：

                              不使用私有 API：

                              for (UIView* subview in [[self.searchBar.subviews lastObject] subviews]) {
    if ([subview isKindOfClass:[UITextField class]]) {
        UITextField *textField = (UITextField*)subview;
        [textField setBackgroundColor:[UIColor redColor]];
    }
}

                              【讨论】：

                              • 它不使用私有 API，但仍然依赖私有实现细节（即搜索栏的内部视图层次结构）。此实现可能随时更改。
                              【解决方案24】：

                              只需自定义文本字段本身。

                              我只是这样做，它对我来说很好（iOS 7）。

                              UITextField *txfSearchField = [_searchBar valueForKey:@"_searchField"];
txfSearchField.backgroundColor = [UIColor redColor];

                              这样您就不需要创建图像、调整大小等...

                              【讨论】：

                              • 这可能会被考虑使用私有API，所以我会谨慎提交应用程序。
                              • 就像@iWasRobbed 提到的，这是使用私有API，通过KVC 访问隐藏变量。
                              • @iWasRobbed 请看看我的回答，也许这对你没问题
                              • 这可能会被 Apple 拒绝，因为您正在访问私有变量咳嗽
                              • 在 iOS 13 中：由于未捕获的异常“NSGenericException”而终止应用程序，原因：“禁止访问 UISearchBar 的 _searchField ivar。这是一个应用程序错误'..这将导致应用程序崩溃，因此您应该更改解决方案以继续获得支持！
                              【解决方案25】：

                              仅用于更改颜色：

                              searchBar.tintColor = [UIColor redColor];

                              用于应用背景图像：

                              [self.searchBar setSearchFieldBackgroundImage:
                          [UIImage imageNamed:@"Searchbox.png"]
                                     forState:UIControlStateNormal];

                              【讨论】：

                                【解决方案26】：

                                根据UISearchBar documentation：

                                您应该在 iOS 5.0+ 上使用此功能。

                                - (void)setSearchFieldBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state

                                使用示例：

                                [mySearchBar setSearchFieldBackgroundImage:myImage forState:UIControlStateNormal];

                                遗憾的是，在 iOS 4 中，您需要恢复到不太复杂的方法。查看其他答案。

                                【讨论】：

                                • 如果我只针对 iOS 5+ 设备，这很好。
                                猜你喜欢
                                • 2013-10-18
                                • 1970-01-01
                                • 2015-05-30
                                • 2020-05-07
                                • 1970-01-01
                                • 1970-01-01
                                • 2018-04-20
                                • 2011-11-05
                                相关资源
                                最近更新 更多
                                热门标签
                                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode