参照一些常用应用对UISearchBar进行UI展示自定义

前言

​ 系统默认的搜索栏(UISearchBar)默认样子真心不好看,而平时iOS移动项目中又缺不了搜索功能,参照一些常用应用对UISearchBar进行UI展示自定义,效果图如下:

UISearchBar介绍

​ 如图所示,包括placeholder、textfiled、clearButton、bookmarkButton、leftView等:

  • ① SearchBar的TextField的leftView;
  • ② SearchBar的TextField的placeholder;
  • ③ SearchBar的BookmarkIcon,默认不显示;

  • ④ SearchBar的搜索Text;
  • ⑤ SearchBar的ClearButton;

实现步骤

  • 1、修改SearchBar背景图
1
2
//修改SearchBar背景(透明)图片,去除默认的黑线
[self setBackgroundImage:[UIImage new]];
  • 2、修改所搜索框背景图片,并切圆角
1
2
3
4
//输入框背景图片
[self setSearchFieldBackgroundImage:[self searchFieldBackgroundImage] forState:UIControlStateNormal];
//将输入框切圆角
[self setSearchTextBackgroundCorner];

  • 3、显示BookmarkButton,并设置其显示图标
1
2
3
//显示BookmarkButton,并设置其图标(照相机)
self.showsBookmarkButton = YES;
[self setImage:[UIImage imageNamed:@"ic_searchbar_camera"] forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal];

  • 4、设置「清空」图标图标
1
2
3
//文本发生变更的时候,修改「清空」图标
[self setImage:[UIImage imageNamed:@"ic_searchbar_clear"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal];
[self setImage:[UIImage imageNamed:@"ic_searchbar_clear"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateHighlighted];

  • 5、修改搜索框左侧的图标
1
2
3
4
5
//搜索框左侧的搜索图标修改(默认是灰色)
UITextField* searchField = [self valueForKey:@"_searchField"];
UIImageView* searchIV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ic_searchbar_search"]];
searchField.leftView = searchIV;
searchField.leftViewMode = UITextFieldViewModeAlways;
  • 6、修改输入框文本颜色
1
2
3
4
//改变searcher的textcolor
searchField.textColor = [UIColor whiteColor];
//改变placeholder的颜色
[searchField setValue:[UIColor whiteColor] forKeyPath:@"_placeholderLabel.textColor"];

  • 7、附上调用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//搜索框的背景图片
- (UIImage*) searchFieldBackgroundImage
{
CGFloat height = 32.f;
UIColor* bgColor = [UIColor colorWithRed:47/255.0 green:123/255.0 blue:200/255.0 alpha:0.5];
CGRect r= CGRectMake(0.0f, 0.0f, 1.0f, height);
UIGraphicsBeginImageContext(r.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [bgColor CGColor]);
CGContextFillRect(context, r);
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}

//切圆角
-(void)setSearchTextBackgroundCorner{
for (UIView *subview in self.subviews) {
for(UIView* grandSonView in subview.subviews){
if ([grandSonView isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) {
grandSonView.alpha = 0.0f;
}else if([grandSonView isKindOfClass:NSClassFromString(@"UISearchBarTextField")] ){
grandSonView.layer.cornerRadius = 5.0f;
grandSonView.layer.masksToBounds = YES;
}else{
grandSonView.alpha = 0.0f;
}
}
}
}

源码下载

https://pan.baidu.com/s/1i5JiW3z

参考资料

https://developer.apple.com/reference/uikit/uisearchbar

http://stackoverflow.com/questions/2139115/uisearchbar-clear-background-color-or-set-background-image-iphone-sdk/5557255#5557255