【问题标题】:Customize search bar自定义搜索栏
【发布时间】:2016-04-11 07:37:11
【问题描述】:

我正在设计一个搜索栏。我需要搜索栏看起来像图像中的一个。尝试了几种方法,但没有改变。非常感谢您的帮助。

[已编辑] 使用 Richard 的代码后查看图像,它看起来像这样。我希望灰色清晰。

【问题讨论】:

  • 使用 Richards 代码后你的搜索栏样式是什么?
  • 样式是默认的@Dev.RK

标签: ios objective-c xcode uisearchbar


【解决方案1】:

self.searchBar 是一个IBOutlet。您也可以动态创建它。

self.searchBar.layer.borderWidth = 2.0;
self.searchBar.layer.borderColor = [UIColor brownColor].CGColor;
self.searchBar.layer.cornerRadius = 15.0;
self.searchBar.barTintColor = [UIColor colorWithRed:255/255.0 green:246/255.0 blue:241/255.0 alpha:1.0];
self.searchBar.backgroundColor = [UIColor clearColor];

UITextField *textField = [self.searchBar valueForKey:@"_searchField"];
textField.textColor = [UIColor brownColor];
textField.placeholder = @"Search";
textField.leftViewMode = UITextFieldViewModeNever; //hiding left view
textField.backgroundColor = [UIColor colorWithRed:255/255.0 green:246/255.0 blue:241/255.0 alpha:1.0];
textField.font = [UIFont systemFontOfSize:18.0];
[textField setValue:[UIColor brownColor] forKeyPath:@"_placeholderLabel.textColor"];

UIImageView *imgview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 30)];
imgview.image = [UIImage imageNamed:@"searchIcon.png"]; //you need to set search icon for textfield's righ view

textField.rightView = imgview;
textField.rightViewMode = UITextFieldViewModeAlways;

输出:

【讨论】:

  • 代码有效,但默认搜索栏的灰色仍然存在,因此看起来不太好。
  • 完成 :) 现在可以工作了。但是有点小概率。当我开始在搜索栏中输入时它消失了!为什么会这样?
  • 什么消失了?搜索栏?
  • 是的,搜索栏消失了。我用过搜索栏和搜索显示控制器
【解决方案2】:

你可以使用图片来改变UISearchBar的外观-

[[UISearchBar appearance] setBackgroundColor:[UIColor clearColor]];   
[[UISearchBar appearance] setBackgroundImage:[UIImage imageNamed:@"searchBG.png"]];
[[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"search.png"] forState:UIControlStateNormal];

【讨论】:

    【解决方案3】:

    你可以使用一些自定义的解决方案(自定义更好) 例如SSSearchBar 或尝试找到一些类似的

    【讨论】:

      【解决方案4】:
      if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
                      textfield.textColor = UIColor.blue
                      if let backgroundview = textfield.subviews.first {
                          // Background color
                          backgroundview.backgroundColor = UIColor.white
                          // Rounded corner
                          backgroundview.layer.cornerRadius = 14;
                          backgroundview.clipsToBounds = true;
                      }
                  }
      

      【讨论】:

        【解决方案5】:

        这是我的搜索栏

        我使用下面的代码来制作,搜索栏样式是默认的

        let searchIcon = Asset.icSearch.image
        searchBar.setImage(searchIcon, for: .search, state: .normal)
        
        let clearIcon = Asset.icDelete.image
        searchBar.setImage(clearIcon, for: .clear, state: .normal)
        
        if let textField = searchBar.getTextField() {
            textField.font = UIFont.systemFont(ofSize: 16)
            textField.backgroundColor = .white
        }
        
        searchBar.backgroundImage = UIImage()
        searchBar.layer.borderColor = Asset.highlight.color.cgColor
        searchBar.layer.borderWidth = 1
        searchBar.layer.cornerRadius = 5
        

        在iOS 13中,可以使用“searchTextField”来获取TextField,但是在iOS 12中要写一点代码

        extension UISearchBar {
        
            func getTextField() -> UITextField? {
                if #available(iOS 13.0, *) {
                    return self.searchTextField
                } else {
                    // Fallback on earlier versions
                    let textField = subviews.first(where: { $0 is UITextField }) as? UITextField
                    return textField
                }
            }
        }
        

        【讨论】:

          猜你喜欢
          • 2015-11-16
          • 2014-06-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-12-16
          • 1970-01-01
          相关资源
          最近更新 更多