设置“搜索”框

最新推荐文章于 2021-07-23 11:15:26 发布

a12685211

最新推荐文章于 2021-07-23 11:15:26 发布

阅读量151

点赞数

原文链接：http://www.cnblogs.com/LYW1993-1024/p/8194993.html

版权

** UISearchController是iOS 8** 之后推出的一个新的控件, 用于创建搜索条, 及管理搜索事件, 使用这个, 我们可以很容易的创建属于自己的搜索框, 下面就来看看这个控件的一些使用.

一. 基本使用( 同一个控制器 )

** UISearchController一般是和UITableView结合使用, 很少会单独使用他, 而且使用UITableView** 来展示数据, 也是最佳的选择.
他的API十分简单:

// 初始化方法, 参数是展示搜索结果的控制器, 如果是在当前控制器展示搜索结果, 就传nil
- (instancetype)initWithSearchResultsController:(nullable UIViewController *)searchResultsController;

// 负责更新搜索结果的代理, 需要遵循 UISearchResultsUpdating 协议 @property (nullable, nonatomic, weak) id <UISearchResultsUpdating> searchResultsUpdater; // 搜索控制器是否是活跃状态, 当在一个控制器展示搜索结果的时候, 可以此来判断返回的数据源 @property (nonatomic, assign, getter = isActive) BOOL active; // 控制器代理 遵循 UISearchControllerDelegate协议 @property (nullable, nonatomic, weak) id <UISearchControllerDelegate> delegate; // 当搜索框激活时, 是否添加一个透明视图 @property (nonatomic, assign) BOOL dimsBackgroundDuringPresentation __TVOS_PROHIBITED; @property (nonatomic, assign) BOOL obscuresBackgroundDuringPresentation NS_AVAILABLE_IOS(9_1); // default is YES // 当搜索框激活时, 是否隐藏导航条 @property (nonatomic, assign) BOOL hidesNavigationBarDuringPresentation; // default is YES @property (nullable, nonatomic, strong, readonly) UIViewController *searchResultsController; @property (nonatomic, strong, readonly) UISearchBar *searchBar;

PS : 需要注意的是, ** UISearchController**在使用的时候, 需要设置为全局的变量或者控制器属性, 使其生命周期与控制器相同; 如果设置为局部变量, 会提前销毁, 导致无法使用.

我们先声明一些属性:

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UISearchController *searchController; // 数据源数组 @property (nonatomic, strong) NSMutableArray *datas; // 搜索结果数组 @property (nonatomic, strong) NSMutableArray *results;

初始化相关属性:

- (UITableView *)tableView {
    if (_tableView == nil) {
        _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain]; _tableView.delegate = self; _tableView.dataSource = self; [self.view addSubview:_tableView]; } return _tableView; } - (NSMutableArray *)datas { if (_datas == nil) { _datas = [NSMutableArray arrayWithCapacity:0]; } return _datas; } - (NSMutableArray *)results { if (_results == nil) { _results = [NSMutableArray arrayWithCapacity:0]; } return _results; }

然后, 实现tableView和searchController的一些协议, 及其方法:

<UITableViewDelegate, UITableViewDataSource, UISearchResultsUpdating>

创建UISearchController:

// 创建UISearchController, 这里使用当前控制器来展示结果
    UISearchController *search = [[UISearchController alloc]initWithSearchResultsController:nil];
    // 设置结果更新代理 search.searchResultsUpdater = self; // 因为在当前控制器展示结果, 所以不需要这个透明视图 search.dimsBackgroundDuringPresentation = NO; self.searchController = search; // 将searchBar赋值给tableView的tableHeaderView self.tableView.tableHeaderView = search.searchBar;

实现tableView的数据源及代理方法:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    // 这里通过searchController的active属性来区分展示数据源是哪个
    if (self.searchController.active) { return self.results.count ; } return self.datas.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellID"]; if (cell == nil) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cellID"]; } // 这里通过searchController的active属性来区分展示数据源是哪个 if (self.searchController.active ) { cell.textLabel.text = [self.results objectAtIndex:indexPath.row]; } else { cell.textLabel.text = [self.datas objectAtIndex:indexPath.row]; } return cell; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (self.searchController.active) { NSLog(@"选择了搜索结果中的%@", [self.results objectAtIndex:indexPath.row]); } else { NSLog(@"选择了列表中的%@", [self.datas objectAtIndex:indexPath.row]); } }

最后实现UISearchController的协议** UISearchResultsUpdating**方法:

#pragma mark - UISearchResultsUpdating
- (void)updateSearchResultsForSearchController:(UISearchController *)searchController {
    
    NSString *inputStr = searchController.searchBar.text ;
    if (self.results.count > 0) { [self.results removeAllObjects]; } for (NSString *str in self.datas) { if ([str.lowercaseString rangeOfString:inputStr.lowercaseString].location != NSNotFound) { [self.results addObject:str]; } } [self.tableView reloadData]; }

这里我只是简单的过滤了一遍数据源, 把数据源中包含输入字符的内容, 添加到搜索结果的数组results中, 然后刷新表格来展示搜索结果:

效果图

如果我们想在开始输入文字之前或者之后做一些操作, 可以实现searchBar的相关代理方法;
需要注意的是 : 这里当搜索框激活时, 隐藏导航的动画, 这是在和系统导航结合使用, 并且searchController的属性hidesNavigationBarDuringPresentation为 YES的情况下, 才会有的动画效果, 如果使用了自定义的导航, 那就没有这个效果了, 但是我们可以在** searchBar**的代理方法里, 设置相关的动画效果, 但是整体还是没有系统动画自然.

二. 使用自定义导航条

我们吧上面的代码做一下修改,:

// 视图显示的时候, 隐藏系统导航  使用自定义导航
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    
    if (self.navigationController) { self.navigationController.navigationBarHidden = YES; } } // 视图消失的时候, 将系统导航恢复 - (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated]; if (self.navigationController) { self.navigationController.navigationBarHidden = NO; } }

然后, 自定义一个导航条:

- (UIView *)customNavBar {
    if (_customNavBar == nil) {
        _customNavBar = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)]; _customNavBar.backgroundColor = [UIColor whiteColor]; [self.view addSubview:_customNavBar]; } return _customNavBar; }

添加相关元素, 这里只是添加了一个返回按钮:

- (void)setupNavBar {
    
    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    backBtn.frame = CGRectMake(0, 20, 80, 44); [backBtn setTitle:@"返回" forState:UIControlStateNormal]; [backBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [backBtn addTarget:self action:@selector(backBtnClick) forControlEvents:UIControlEventTouchUpInside]; [self.customNavBar addSubview:backBtn]; } - (void)backBtnClick { [self.navigationController popViewControllerAnimated:YES]; }

这时候的效果是这样的:

可以看到, 这里并不难自动隐藏自定义的导航, 这需要我们自己处理;
剩下的就是怎么来处理导航条的问题, 这时候就用到了searchBar的代理方法:

#pragma mark - UISearchBarDelegate
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    
}
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { }

我这里, 主要是在上面的这两个代理方法里处理的, 具体的实现如下:

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    
    CGRect barFrame = self.customNavBar.frame;
    // 移动到屏幕上方 barFrame.origin.y = - 64; // 调整tableView的frame为全屏 CGRect tableFrame = self.tableView.frame; tableFrame.origin.y = 20; tableFrame.size.height = self.view.frame.size.height -20; 这里Y坐标从20开始, 是因为, searchBar的背景视图会多出20的高度, 而tableView的tableHeaderView并没有相应增加, 所以这里强制空出20像素, 防止searchBar遮挡cell self.customNavBar.frame = barFrame; self.tableView.frame = tableFrame; [UIView animateWithDuration:0.4 animations:^{ [self.view layoutIfNeeded]; [self.tableView layoutIfNeeded]; }]; } - (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar { return YES; } - (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { CGRect barFrame = self.customNavBar.frame; // 恢复 barFrame.origin.y = 0; // 调整tableView的frame为全屏 CGRect tableFrame = self.tableView.frame; tableFrame.origin.y = 64; tableFrame.size.height = self.view.frame.size.height - 64; [UIView animateWithDuration:0.4 animations:^{ self.customNavBar.frame = barFrame; self.tableView.frame = tableFrame; }]; }

上面的开始编辑时, 设置tableView的Y 坐标时多出了20, 这里Y坐标从20开始, 是因为, searchBar的背景视图会多出20的高度, 而tableView的tableHeaderView并没有相应增加, 所以这里强制空出20像素, 防止searchBar遮挡cell;这时的效果图如下:

可以看出还是有些突兀, 以上只是大致思路, 具体实现细节还需要再做优化.

三. 使用单独的控制器来展示搜索结果

以上搜索结果的展示都是在一个控制器里进行的, 使用searchController的active属性来区分数据源; 我们还可以使用两个控制器来进行, 一个展示原始数据, 一个来展示搜索的结果;
这其实只是在初始化searchController的时候有些区别, 然后两个控制器分别管理自己的数据源即可, 这里直接给出代码:
初始化:

 // 创建用于展示搜索结果的控制器
    LZResultDisplayController *result = [[LZResultDisplayController alloc]init];
    // 创建搜索框
    UISearchController *search = [[UISearchController alloc]initWithSearchResultsController:result];

    self.tableView.tableHeaderView = search.searchBar; search.searchResultsUpdater = result; self.searchController = search;

然后在** LZResultDisplayController.h** 遵循协议UISearchResultsUpdating :

@interface LZResultDisplayController : UIViewController<UISearchResultsUpdating> @end

实现协议方法:

#pragma mark - UISearchResultsUpdating
- (void)updateSearchResultsForSearchController:(UISearchController *)searchController {
    
    // 这里处理过滤数据源的逻辑
NSString *inputStr = searchController.searchBar.text ; if (self.results.count > 0) { [self.results removeAllObjects]; } for (NSString *str in self.datas) { if ([str.lowercaseString rangeOfString:inputStr.lowercaseString].location != NSNotFound) { [self.results addObject:str]; } } // 然后刷新表格 [self.tableView reloadData]; }