自定义UISearchBar外观

本文转载至 http://www.jianshu.com/p/66b5b777f5dc

 

最近，在项目过程当中遇到要自定义SearchBar的外观，虽然本身以为用系统默认的外观就好了，不过UI设计师要求不用系统的默认样式，要跟app主题保持

一致。

图1：设计效果图

从上图能够看出，咱们要作的UISearchBar要有圆角，边框颜色，取消按钮颜色，背景透明等等。

开始觉得可能要本身写一个自定义的UISearchBar控件了，后面研究了一番，发现能够设定系统UISearchBar属性来更改，便把经验记录下来。

首先，咱们看下系统默认的SearchBar的样式，离咱们的目标样式确实相差很大, 后面我会一步一步详细说明作成咱们的目标样式。

图2：UISearchBar默认样式

1. 设置背景色

我以白色的背景色为例，下面看看代码：

//1. 设置背景颜色 //设置背景图是为了去掉上下黑线 self.customSearchBar.backgroundImage = [[UIImage alloc] init]; // 设置SearchBar的颜色主题为白色 self.customSearchBar.barTintColor = [UIColor whiteColor];

图3：设置SearchBar背景色为白色

2. 设置边框颜色和圆角

//2. 设置圆角和边框颜色 UITextField *searchField = [self.customSearchBar valueForKey:@"searchField"]; if (searchField) { [searchField setBackgroundColor:[UIColor whiteColor]]; searchField.layer.cornerRadius = 14.0f; searchField.layer.borderColor = [UIColor colorWithRed:247/255.0 green:75/255.0 blue:31/255.0 alpha:1].CGColor; searchField.layer.borderWidth = 1; searchField.layer.masksToBounds = YES; }

这段代码有个特别的地方就是经过KVC得到到UISearchBar的私有变量
searchField（类型为UITextField），设置SearchBar的边框颜色和圆角实际上也就变成了设置searchField的边框颜色和圆角，你能够试试直接设置SearchBar.layer.borderColor和cornerRadius，会发现这样作是有问题的。

图4：设置边框颜色和圆角

嗯，离预期效果愈来愈近了，有木有！

3. 设置按钮（取消按钮）的文字和文字颜色

//3. 设置按钮文字和颜色 [self.customSearchBar fm_setCancelButtonTitle:@"取消"]; self.customSearchBar.tintColor = [UIColor colorWithRed:86/255.0 green:179/255.0 blue:11/255.0 alpha:1]; //修正光标颜色 [searchField setTintColor:[UIColor blackColor]]; //其中fm_setCancelButtonTitle是我写的UISearchBar一个分类的方法 - (void)fm_setCancelButtonTitle:(NSString *)title { if (IS_IOS9) { [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title]; }else { [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title]; } }

图5：设置按钮文字和颜色

须要特别注意的是设置searchBar的tintColor会使输入框的光标颜色改变，能够经过设置searchField的tintColor来修正。

4. 设置输入框的文字颜色和字体

//4. 设置输入框文字颜色和字体 [self.customSearchBar fm_setTextColor:[UIColor blackColor]]; [self.customSearchBar fm_setTextFont:[UIFont systemFontOfSize:14]]; //下面两个方法是UISearchBar分类代码 - (void)fm_setTextColor:(UIColor *)textColor { if (IS_IOS9) { [UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]].textColor = textColor; }else { [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:textColor]; } } - (void)fm_setCancelButtonTitle:(NSString *)title { if (IS_IOS9) { [[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title]; }else { [[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title]; } }

图6：最终对比效果图

5. 如何设置搜索图标

下面评论中有简友问我怎么更改默认的搜索图标，我查了下UISearchBar的API，发现有方法能够更改的。

//5. 设置搜索Icon [self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

为了跟系统默认Icon的有个明显的对比，我特殊找了张绿色的搜索Icon，效果见下图：

设置搜索Icon.png

Tips: 还能够设置其余的Icon（如清除按钮图标），也是用上面的方法，具体要设置什么，能够去看看UISearchBarIcon这个枚举。

最后，介绍下QQ的搜索样式的实现

图7：相似QQ搜索框样式

很简单，在storyboard中设置searchBar的Bar Style为Minimal，或者用代码设置 ：

//设置相似QQ搜索框 self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;

完整代码在这里。