UISearchBar修改输入框，取消按钮样式

来源：互联网发布：淘宝上下架查询编辑：程序博客网时间：2024/05/31 18:59

UISearchBar修改输入框，取消按钮样式

设计需求

槽点：系统的样式已经不能满足我们UI设计的优化了，我们会在开发的过程遇到到各种样式的需求，这个时候我们问的不是为什么这样设计，产品经理哪有时间给你讲每个设计的种种，逗比的我们去研究吧！

Mou icon

设计需求如上图，设置SearchBar在导航上，并设置输入框的背景颜色为白色，如果有输入框的白色背景图片可以直接通过设置SearchBar的属性完成即

[self.searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"banner4"]forState:UIControlStateNormal];//// 设置搜索框中文本框的背景图片，也可以设置高亮状态的图片

如果不提供需求要求的背景图片可以这样获取，这个我在网上查找了好多怎么修改SearchBar输入框的方法是这样的

UITextField *searchField;NSUInteger numViews = [searchBar.subviews count];for(int i = 0; i < numViews; i++) {    if([[searchBar.subviews objectAtIndex:i] isKindOfClass[UITextField class]]) {       searchField = [searchBar.subviews objectAtIndex:i];  }} if(!(searchField == nil)) {  searchField.textColor = [UIColor blackColor];  [searchField setBackground: [UIImage imageNamed:@"white.png"]];  [searchField setBorderStyle:UITextBorderStyleNone]; }

这样获取的searchField是nil，这个时候使用View的私有方法recursiveDescription 来看下UI控件的视图层次结构，在控制台打印出他的继承关系

     [self.searchBar recursiveDescription]

结果如下:

Mou icon

发现UISearchBar的是视图层里包含了一个View，View视图里面才是UISearchBarBackground和UISearchBarTextField两个视图。查了资料发现在iOS7之前，UISearchBar视图层里直接包含上面的两个视图，在iOS7之前上面的方法是可以。
所以代码修改为：

UITextField *searchField;UIButton *barCancleButton;UIView *searchView=[_searchBar.subviews objectAtIndex:0 ];if (searchView) {    for (id search in searchView.subviews) {        if ([search isKindOfClass:[UITextField class]]||[search isKindOfClass:NSClassFromString(@"UISearchBarTextField")]) {            searchField=(UITextField *)search;        }else if ([search isKindOfClass:NSClassFromString(@"UINavigationButton")]){            barCancleButton=(UIButton *)search;        }    }}

完成项目需求的搜索输入框和CancelButton的样式，

另外还有一个问题是UITextField，占位符光标为水平居中的问题（我们产品经理是严谨的人）：

Mou icon

光标位置偏上，可以通过设置textField的属性改变即：

    searchField.layer.sublayerTransform=CATransform3DMakeTranslation(0,2, 0);

设置后,占位符光标下移：

Mou icon

0 0