iOS下SearchBar的使用

一个普通的searchBar的使用

写在前面

这两天想给app加一个搜索功能,打算采用系统自带的UISearch等一系列控件。

后来发现在iOS8前后,使用也是不一样的。

UISearchBar + UISearchDisplayController 是iOS8之前的常用写法。

而在iOS8之后,就开始采用UISearchController。

昨天和今天主要是在尝试iOS8之前那种方式时,始终出不来效果。直到今天才是解决了,还是写篇文章记录下,防止以后忘记了。

Before iOS8

在iOS8之前,搜索功能可以只用SearchBar,具体的Search功能实现就可以卸载SearchBar的代理中,具体实现就不多说了。

但是我觉得通过UISearchBar + UISearchDisplayController 的一起使用,可以获得iOS系统上更原生的体验,如本文开头动图所示。

UISearchBar

UISearchBar通常就是我们看到的那个输入框,具体的其属性配置不多说了,可以查看官方文档

UISearchDisplayController

UISearchDisplayController我觉得有点像一个UITableViewController,它也有Tableview(searchResultTableView),有dataSource(searchResultsDataSource),也有delegate(searchResultsDelegate)。

而且它的dataSource是和我们展示所用的普通Tableview的dataSource是一样的。

所以说UISearchDisplayController其实就是一个单纯展示搜索结果的UITableViewController,只是苹果帮我们很好的封装了起来。

官方的指南写法也是如此:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

//直接在dataSource中判断当前是哪个TableView

if (tableView == self.tableView) {

return ...;

}

// If necessary (if self is the data source for other table views),

// check whether tableView is searchController.searchResultsTableView.

return ...;

}

demoBefore iOS8

直接上完整代码:

#import "SearchVBefore8.h"

@interface SearchVBefore8 ()

/**数据源*/

@property (nonatomic, strong) NSArray *dataArray;

/**经过搜索之后的数据源*/

@property (nonatomic, strong) NSArray *searchResultArray;

/**我们的UISearchDisplayController*/

@property (nonatomic, strong) UISearchDisplayController *displayer;

@end

@implementation SearchVBefore8

- (NSArray *)getDataArray

{

/**模拟一组数据*/

NSMutableArray *resultArray = [[NSMutableArray alloc] init];

for (int i = 0; i< 20; i++) {

NSString *dataString = [NSString stringWithFormat:@"%d",i];

[resultArray addObject:dataString];

}

return resultArray;

}

- (void)viewDidLoad {

[super viewDidLoad];

[self setupSearchBar];

self.dataArray = [self getDataArray];

}

- (void)setupSearchBar{

/**配置Search相关控件*/

UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];

self.tableView.tableHeaderView = searchBar;

self.displayer = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];

/**searchBar的delegate看需求进行配置*/

searchBar.delegate = self;

/**以下都比较重要,建议都设置好代理*/

self.displayer.searchResultsDataSource = self;

self.displayer.searchResultsDelegate = self;

self.displayer.delegate = self;

}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

/**对TableView进行判断,如果是搜索结果展示视图,返回不同结果*/

if (tableView == self.displayer.searchResultsTableView) {

return self.searchResultArray.count;

}

else{

return self.dataArray.count;

}

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"mainCell"];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"mainCell"];

}

/**对TableView进行判断,如果是搜索结果展示视图,返回不同数据源*/

if (tableView == self.displayer.searchResultsTableView) {

cell.textLabel.text = [NSString stringWithFormat:@"%@",self.searchResultArray[indexPath.row]];

}

else{

cell.textLabel.text = [NSString stringWithFormat:@"%@",self.dataArray[indexPath.row]];

}

return cell;

}

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar

{

NSLog(@"begin");

return YES;

}

-(BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar

{

NSLog(@"end");

return  YES;

}

/**UISearchDisplayController的代理实现*/

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString

{

/**通过谓词修饰的方式来查找包含我们搜索关键字的数据*/

NSPredicate *resultPredicate = [NSPredicate predicateWithFormat:@"self contains[cd] %@",searchString];

self.searchResultArray = [self.dataArray filteredArrayUsingPredicate:resultPredicate];

return  YES;

}

之前主要一直看不到结果是因为有self.searchDisplayController这个默认属性的存在,所以配置都是用在了self.searchDisplayController上。至今仍然很奇怪为什么,这是之前的代码:

UISearchDisplayController *displayerControllr = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];

displayerControllr.searchResultsDataSource = self;

displayerControllr.searchResultsDelegate = self;

displayerControllr.delegate = self;

NSLog(@"%@  和  %@",displayerControllr,self.searchDisplayController);

我们看后台打印:

2016-05-06 14:49:07.546 SearchBarDemo[26008:3948409]   和 

两者地址也是一样的,所以不明白为什么不起作用。当换回自己写的新属性self.displayer的时候就可以了,而且self.displayer和self.searchDisplayController的地址也是一样的。

以上只是粗略demo,但是功能实现了。如果要美化或者添加功能的再自己丰富下吧。

UISearchController

它的init方法:

- (instancetype)initWithSearchResultsController:(nullable UIViewController *)searchResultsController;

它不用像iOS8之前那样我们还需要单独写一个UISearchBar,UISearchController在我们创建的时候会自己生成一个UISearchBar,而UISearchController本身更像是一个容器与胶水,它把我们当前的ViewController与结果展示的ViewController相连一起,相较之于之前的UISearchDisplayController相比来说,这样的方式可以让我们更能去高度定制我们所需要的结果展示ViewController。

searchResultsUpdater

更新代理,负责通知searchResultsController进行更新。

相比较来说,个人觉得iOS8之后的配置会显得更加容易方便一点。

demoAfteriOS8

效果图

在主界面实现文件中:

#import "MainTableViewController.h"

#import "Product.h"

#import "MySearchTableViewController.h"

@interface MainTableViewController ()

@property(nonatomic,strong)NSArray *allProducts;

/**搜索结果ViewController*/

@property(nonatomic,strong)MySearchTableViewController *mySRTVC;

@property(nonatomic,strong)UISearchController *svc;

@end

@implementation MainTableViewController

-(NSArray *)allProducts

{

if (!_allProducts) {

_allProducts=[Product demoData];

}

return _allProducts;

}

- (void)viewDidLoad {

[super viewDidLoad];

[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];

//创建两个属性实例

self.mySRTVC=[[MySearchTableViewController  alloc]init];

self.svc=[[UISearchController alloc]initWithSearchResultsController:self.mySRTVC];

//设置与界面有关的样式

[self.svc.searchBar sizeToFit];  //大小调整

self.tableView.tableHeaderView=self.svc.searchBar;

//设置搜索控制器的结果更新代理对象

self.svc.searchResultsUpdater=self;

//Scope:就是效果图中那个分类选择器

self.svc.searchBar.scopeButtonTitles=@[@"设备",@"软件",@"其他"];

//为了响应scope改变时候,对选中的scope进行处理 需要设置search代理

self.svc.searchBar.delegate=self;

self.definesPresentationContext=YES;  //迷之属性,打开后搜索结果页界面显示会比较好。

//看文档貌似是页面转换模式为UIModalPresentationCurrentContext,如果该选项打开,那么就会使用当前ViewController的一个presentContenxt

//否则就向父类中进行寻找并使用。

}

/**普通的tableview展示实现。*/

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return self.allProducts.count;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];

Product *p=self.allProducts[indexPath.row];

cell.textLabel.text=p.name;

return cell;

}

#pragma mark - UISearchResultsUpdating

/**实现更新代理*/

-(void)updateSearchResultsForSearchController:(UISearchController *)searchController

{

//获取scope被选中的下标

NSInteger selectedType=searchController.searchBar.selectedScopeButtonIndex;

//获取到用户输入的数据

NSString *searchText=searchController.searchBar.text;

NSMutableArray *searchResult=[[NSMutableArray alloc]init];

for (Product *p in self.allProducts) {

NSRange range=[p.name rangeOfString:searchText];

if (range.length>0&&p.type==selectedType) {

[searchResult addObject:p];

}

}

self.mySRTVC.searchProducts=searchResult;

/**通知结果ViewController进行更新*/

[self.mySRTVC.tableView reloadData];

}

#pragma mark - UISearchBarDelegate

/**点击按钮后,进行搜索页更新*/

-(void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope

{

[self updateSearchResultsForSearchController:self.svc];

}

@end

在搜索结果页面中(就是一个普通Tableview的展示):

#import "MySearchTableViewController.h"

#import "Product.h"

@interface MySearchTableViewController ()

@end

@implementation MySearchTableViewController

- (void)viewDidLoad {

[super viewDidLoad];

[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"mycell"];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return self.searchProducts.count;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"mycell" forIndexPath:indexPath];

Product *p=self.searchProducts[indexPath.row];

cell.textLabel.text=p.name;

return cell;

}

@end

———————————分割线—————————————

关于评论中有人提出搜索结果页(MySearchTableViewController)不能Push到下一个界面的问题,补上一点漏掉的内容。

个人觉得MySearchTableViewController只是作为一个childViewController被添加到MainTableViewController上面,所以它本身是没有被压入navigationController的栈中,因此简单的在MySearchTableViewController中调用

[self.navigationController pushViewController:someVC animated:YES];

是不行的,因此self.navigationController是空的。

本例中可以这样解决:

@interface MySearchTableViewController : UIViewController

@property (nonatomic, strong) NSArray *resultDataArray;

//在MySearchTableViewController添加一个指向展示页的【弱】引用属性。

@property (nonatomic, weak) UIViewController *mainSearchController;

@end

//然后在mainSearchController的创建MySearchTableViewController实例的代码中添加下面一句:

self.mySRTVC=[[MySearchTableViewController  alloc]init];

self.mySRTVC.mainSearchController = self;

//最后在想要实现push的地方这样实现

[self.mainSearchController.navigationController pushViewController:detailViewController animated:YES];

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,069评论 4 358
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,212评论 1 287
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,912评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,424评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,741评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,194评论 1 206
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,553评论 2 307
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,289评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,923评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,251评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,775评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,144评论 2 249
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,698评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,936评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,658评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,214评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,159评论 2 258

推荐阅读更多精彩内容