自定义UISearchBar外观
最近,在项目过程中遇到要自定义SearchBar的外观,虽然自己觉得用系统默认的外观就行了,不过UI设计师要求不用系统的默认样式,要跟app主题保持一致。
![](https://i-blog.csdnimg.cn/blog_migrate/07c4a38a7a40ad1b79d79380e3b8a4d1.webp?x-image-process=image/format,png)
从上图可以看出,我们要做的UISearchBar要有圆角,边框颜色,取消按钮颜色,背景透明等等。
开始以为可能要自己写一个自定义的UISearchBar控件了,后面研究了一番,发现可以设定系统UISearchBar属性来更改,便把经验记录下来。
首先,我们看下系统默认的SearchBar的样式,离我们的目标样式确实相差很大, 后面我会一步一步详细说明做成我们的目标样式。
![](https://i-blog.csdnimg.cn/blog_migrate/9f516ae0471d55a05365667b37e788ab.webp?x-image-process=image/format,png)
1. 设置背景色
我以白色的背景色为例,下面看看代码:
//1. 设置背景颜色
//设置背景图是为了去掉上下黑线
self.customSearchBar.backgroundImage = [[UIImage alloc] init];
// 设置SearchBar的颜色主题为白色
self.customSearchBar.barTintColor = [UIColor whiteColor];
![](https://i-blog.csdnimg.cn/blog_migrate/4ff3f218aeb0a9b61943fbd5533d9724.webp?x-image-process=image/format,png)
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,会发现这样做是有问题的。
![](https://i-blog.csdnimg.cn/blog_migrate/e05bb3be9dfb668ff01ce8df14beb664.webp?x-image-process=image/format,png)
嗯,离预期效果越来越近了,有木有!
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];
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/2548448afe998f3f155b2650ad2cac4f.webp?x-image-process=image/format,png)
需要特别注意的是设置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];
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/c31b2a65dd976bc420678b470c37ebad.webp?x-image-process=image/format,png)
5. 如何设置搜索图标
下面评论中有简友问我怎么更改默认的搜索图标,我查了下UISearchBar的API,发现有方法可以更改的。
//5. 设置搜索Icon
[self.customSearchBar setImage:[UIImage imageNamed:@"Search_Icon"]
forSearchBarIcon:UISearchBarIconSearch
state:UIControlStateNormal];
为了跟系统默认Icon的有个明显的对比,我特殊找了张绿色的搜索Icon,效果见下图:
![](https://i-blog.csdnimg.cn/blog_migrate/e58208bcf84d2cbcd9b20a1d9386216a.webp?x-image-process=image/format,png)
Tips: 还可以设置其他的Icon(如清除按钮图标),也是用上面的方法,具体要设置什么,可以去看看UISearchBarIcon这个枚举。
最后,介绍下QQ的搜索样式的实现
![](https://i-blog.csdnimg.cn/blog_migrate/09c324497e1ab4e6a28a6146292c6648.webp?x-image-process=image/format,png)
很简单,在storyboard中设置searchBar的Bar Style为Minimal,或者用代码设置 :
//设置类似QQ搜索框
self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;
完整代码在这里。