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

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

展开阅读全文

没有更多推荐了,返回首页