iOS开发基础66-UISearchBar 控件指南

一、简介

在 iOS 应用开发中,搜索功能是一个不可或缺的组件。UISearchBar 控件提供了一种集成搜索功能的便捷方式。本文将详细介绍 UISearchBar 控件的相关属性和方法,并通过实例代码说明其使用方法。

二、UISearchBar 控件

UISearchBar 是专门为搜索功能设计的控件,它集成了多种功能和特性,便于开发者快速实现搜索功能。下面我们来详细了解 UISearchBar 的属性和方法。

1. UISearchBar 属性相关

以下是 UISearchBar 常用的属性及其设置方法:

_searchBar = [[UISearchBar alloc] initWithFrame:CGRectZero]; // 初始化
[self.searchBar setPlaceholder:@"Search"]; // 设置占位符
[self.searchBar setPrompt:@"Prompt"]; // 顶部提示文本
[self.searchBar setBarStyle:UIBarMetricsDefault]; // 搜索框样式
[self.searchBar setTintColor:[UIColor blackColor]]; // 搜索框的颜色
[self.searchBar setTranslucent:YES]; // 设置是否透明
[self.searchBar setBackgroundImage:[UIImage imageNamed:@"image0"]]; // 设置背景图片
[self.searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"image3"] forState:UIControlStateNormal]; // 设置文本框背景
[self.searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"image0"] forState:UIControlStateHighlighted];
[self.searchBar setSearchFieldBackgroundPositionAdjustment:UIOffsetMake(30, 30)]; // 设置文本框背景的偏移量
[self.searchBar setSearchResultsButtonSelected:NO]; // 设置搜索结果按钮是否选中
[self.searchBar setShowsSearchResultsButton:YES]; // 是否显示搜索结果按钮
[self.searchBar setSearchTextPositionAdjustment:UIOffsetMake(30, 0)]; // 设置文本框的文本偏移量
[self.searchBar setInputAccessoryView:_btnHide]; // 提供一个遮盖视图
[self.searchBar setKeyboardType:UIKeyboardTypeEmailAddress]; // 设置键盘样式
[self.searchBar setShowsScopeBar:YES]; // 是否显示分栏条
[self.searchBar setScopeButtonTitles:@[@"Singer", @"Song", @"Album"]]; // 分栏条栏目
[self.searchBar setScopeBarBackgroundImage:[UIImage imageNamed:@"image3"]]; // 分栏条背景颜色
[self.searchBar setSelectedScopeButtonIndex:1]; // 分栏条默认选中按钮的下标
[self.searchBar setShowsBookmarkButton:YES]; // 是否显示书图标
[self.searchBar setShowsCancelButton:YES animated:YES]; // 是否显示取消按钮
[self.searchBar setSpellCheckingType:UITextSpellCheckingTypeYes]; // 设置自动检查的类型
[self.searchBar setAutocorrectionType:UITextAutocorrectionTypeDefault]; // 是否提供自动修正功能
self.searchBar.delegate = self; // 设置代理
[self.searchBar sizeToFit];
myTableView.contentInset = UIEdgeInsetsMake(CGRectGetHeight(self.searchBar.bounds), 0, 0, 0);
[self.view addSubview:myTableView];
[myTableView addSubview:self.searchBar];

大部分属性都是定义外观的,理解这些属性后,可以根据需求设计出您想要的外观效果。

2. 重要属性详解

以下是部分较为有趣和重要的属性详细介绍:

2.1 inputAccessoryView 属性

当 UISearchBar 处于焦点状态下(输入框正要输入内容时),会有一个遮盖视图。以下代码展示如何使用该属性:

[self.searchBar setInputAccessoryView:your_View]; // 提供一个遮盖视图

在 iPhone 的电话本搜索功能中,遮盖视图通常是一个半透明的黑色 View。

兼容性问题:此属性在 iOS 6.0 及以后版本引入,意味着在 iOS 6.0 之前的系统中不兼容。可以通过设置一个 UIButton 控件,模拟遮盖效果。如下所示:

// 遮盖层
_btnAccessoryView = [[UIButton alloc] initWithFrame:CGRectMake(0, 44, BOUNDS_WIDTH, BOUNDS_HEIGHT)];
[_btnAccessoryView setBackgroundColor:[UIColor blackColor]];
[_btnAccessoryView setAlpha:0.0f];
[_btnAccessoryView addTarget:self action:@selector(ClickControlAction:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:_btnAccessoryView];

// 遮罩层(按钮)-点击处理事件
- (void)ClickControlAction:(id)sender {
    NSLog(@"handleTaps");
    [self controlAccessoryView:0];
}

// 控制遮罩层的透明度
- (void)controlAccessoryView:(float)alphaValue {
    [UIView animateWithDuration:0.2 animations:^{
        [self.btnAccessoryView setAlpha:alphaValue];
    } completion:^(BOOL finished) {
        if (alphaValue <= 0) {
            [self.searchBar resignFirstResponder];
            [self.searchBar setShowsCancelButton:NO animated:YES];
            [self.navigationController setNavigationBarHidden:NO animated:YES];
        }
    }];
}

2.2 delegate 属性

设置 UISearchBar 的代理,用以处理搜索框的一些操作和数据变化。

self.searchBar.delegate = self;

UISearchBarDelegate 委托定义了多个协议方法:

@protocol UISearchBarDelegate

@optional
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar;
- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar;
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar;
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText;
- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text; 
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar;
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar;
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar;
- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar;
- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope;

@end

常用的方法示例:

#pragma mark - UISearchBarDelegate

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {
    [self.searchBar setShowsCancelButton:YES animated:YES];
    [self.navigationController setNavigationBarHidden:YES animated:YES];
    [self controlAccessoryView:0.9]; // 显示遮盖层
    return YES;
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    [self.searchBar resignFirstResponder];
    [self.searchBar setShowsCancelButton:NO animated:YES];
    [liveViewAreaTable searchDataBySearchString:nil]; // 搜索 tableView 数据
    [self.navigationController setNavigationBarHidden:NO animated:YES];
    [self controlAccessoryView:0]; // 隐藏遮盖层
}

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    NSLog(@"---%@", searchBar.text);
    [self.searchBar resignFirstResponder]; // 放弃第一响应者
    [liveViewAreaTable searchDataBySearchString:searchBar.text];
    [self.navigationController setNavigationBarHidden:NO animated:YES];
    [self controlAccessoryView:0]; // 隐藏遮盖层
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    NSLog(@"textDidChange---%@", searchBar.text);
    [liveViewAreaTable searchDataBySearchString:searchBar.text]; // 实时搜索 tableView 数据
    [self controlAccessoryView:0]; // 隐藏遮盖层
}

三、自定义 UISearchBar 子控件

可以遍历 UISearchBar 的子控件,对其样式进行自定义设置,如下所示:

for (id subView in [self.searchBar subviews]) {
    if ([subView isKindOfClass:[UIButton class]]) {
        UIButton *btn = (UIButton *)subView;
        [btn setTitle:@"取消" forState:UIControlStateNormal];
    }
}

结语

通过本文对 UISearchBar 的属性、方法和使用案例的介绍,相信你已经对 UISearchBar 有了全面的认识。UISearchBar 强大的功能和灵活的属性设置使得实现搜索功能变得非常简单和高效。

posted @ 2015-10-16 00:52  Mr.陳  阅读(609)  评论(0编辑  收藏  举报