UISearchBar一般我们不单独使用他, 在iOS 8之后, 我们更多地是和UISearchController一起使用, 关于UISearchController的一些使用可参考[iOS]系统UISearchController详解, 这里主要是关于UISearchBar的一些设置, 可以单独使用, 也可以对UISearchController中的searchBar 进行设置.
下面这个就是UISearchController默认的样子:
- barStyle
搜索框样式
@property(nonatomic) UIBarStyle barStyle
下面是修改为黑色
search.searchBar.barStyle = UIBarStyleBlack;
- delegate
代理, 不用多说, 大家都很熟悉;
@property(nullable,nonatomic,weak) id<UISearchBarDelegate> delegate;
- text & placeholder
这两个属性, 也很容易
// searchBar的文本内容
@property(nullable,nonatomic,copy) NSString *text;
// 占位文本
@property(nullable,nonatomic,copy) NSString *placeholder;
- prompt
提示信息, 是在搜索框的上面可以设置一行提示文字
@property(nullable,nonatomic,copy) NSString *prompt;
这里我设置为:
search.searchBar.prompt = @"这是一个prompt";
效果如下:
这里在设置这个属性的时候需要注意, 因为多了一个提示信息, 所以searchBar的高度变化了, 不再是默认的44, 但是在刚刚创建的时候, 其高度还是 44, 这样就会出现下面的情况:
可以看到, 刚进去的时候, 视图重叠了, 但是激活一次后, 就正常了; 所以, 我们需要处理一下这个问题, 这里有两种方法来解决:
方法一
修改searchBar的frame,
我在其代理方法打印了, 各个情况下的searchBar的frame:
searchBarTextDidBeginEditing >>{{0, 0}, {320, 44}}
textDidChange >>{{0, 20}, {320, 75}}
searchBarTextDidEndEditing >>{{0, 20}, {320, 75}}
可以看出, 其高度变为75了, 也就是正常显示的状态, 所以, 在开始的时候, 我们调整一下即可:
CGRect rect = search.searchBar.frame;
rect.size.height = 75;
search.searchBar.frame = rect;
这样就能, 正常显示了;
方法二
直接在设置prompt 后, 调用一下sizeToFit, 来更新其 frame, 让其重新布局子控件去自适应:
[search.searchBar sizeToFit];
- button
几个搜索框的辅助按钮
//
@property(nonatomic) BOOL showsBookmarkButton __TVOS_PROHIBITED; // default is NO
@property(nonatomic) BOOL showsCancelButton __TVOS_PROHIBITED; // default is NO
@property(nonatomic) BOOL showsSearchResultsButton NS_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED; // default is NO
其点击事件, 可以从其相应的代理方法获取:
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar; // called when keyboard search button pressed
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar __TVOS_PROHIBITED; // called when bookmark button pressed
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar __TVOS_PROHIBITED; // called when cancel button pressed
- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar NS_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED; // called when search results button pressed
- tintColor & barTintColor
// 主要是修改了搜索框上所有子控件的颜色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
// 设置bar的前景色(背景色), 不要使用backgroundColor, 表现不出来
@property(nullable, nonatomic,strong) UIColor *barTintColor NS_AVAILABLE_IOS(7_0)
例如:
search.searchBar.tintColor = [UIColor redColor];
search.searchBar.barTintColor = [UIColor greenColor];
效果:
下面设置一下backgroundColor, 看看效果:
search.searchBar.backgroundColor = [UIColor orangeColor];
可以看出, 背景色被上面的前景色覆盖了, 所以没有表现出来.
- ScopeBar
选项卡
// 选项按钮标题(大于等于2个, 才会显示)
@property(nullable, nonatomic,copy) NSArray<NSString *> *scopeButtonTitles
// 默认选中的选项卡
@property(nonatomic) NSInteger selectedScopeButtonIndex
// 是否显示选项卡(一般不需设置)
@property(nonatomic) BOOL showsScopeBar
其点击事件, 在代理方法中获取:
- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope
这里需要注意, 在设置了scopeButtonTitles 后, 就不用设置showsScopeBar 了, 或者将其设置为NO, 如果为YES, 会发生下面的情况:
正常情况应该是这样的:
上面的问题是在刚进来的时候, 就显示了选项卡, 而且在激活搜索框的时候, 选项卡不见了, 而是多出来一部分空白. 而正常刚进来的时候是不显示选项卡的, 搜索框激活时才显示, 所以设置时不用设置showsScopeBar;
设置选项卡的属性
可以使用下面的方法, 来设置选项卡文字的属性( 字体, 颜色, 大小等):
- (void)setScopeBarButtonTitleTextAttributes:(nullable NSDictionary<NSString *, id> *)attributes forState:(UIControlState)state
常用到的键为:
NSForegroundColorAttributeName // 修改文字颜色
NSFontAttributeName // 修改文字字体及大小
更多键名可参考
NSAttributedString.h
设置背景色
可参考下面 backgroundImage & scopeBarBackgroundImage, 使用纯色图片来设置背景图, 达到设置背景色的目的; 也可以使用下面的方法:
UIView *backView = [[searchBar.subviews firstObject].subviews firstObject];
UISegmentedControl *segmentedController = nil;
// 找到 UISegmentedControl
for (UIView *tmp in backView.subviews) {
if ([tmp isKindOfClass:[UISegmentedControl class]]) {
segmentedController = (UISegmentedControl *)tmp;
break;
}
}
// 如果存在
if (segmentedController) {
[segmentedController setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]} forState:UIControlStateNormal];
[segmentedController setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor blackColor]} forState:UIControlStateSelected];
// 设置中颜色
segmentedController.tintColor = [UIColor redColor];
}
找到这个UISegmentedControl 后, 就可以使用 UISegmentedControl的 API来设置相关的属性了;
- inputAccessoryView
为搜索框的键盘添加一个辅助视图
@property (nullable, nonatomic, readwrite, strong) UIView *inputAccessoryView;
可以这样使用:
UILabel *label = [[UILabel alloc]init];
label.text = @"这是一个inputAccessoryView";
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.frame = CGRectMake(0, 0, 0, 30);
label.backgroundColor = [UIColor redColor];
search.searchBar.inputAccessoryView = label;
这里的frame 中起作用的是高度, 其他的设置了没效果;
以上设置的, 效果图如下:
- backgroundImage & scopeBarBackgroundImage
背景图和选项卡的背景图
// 搜索框的背景图
@property(nullable, nonatomic,strong) UIImage *backgroundImage
// 选项卡的背景图
@property(nullable, nonatomic,strong) UIImage *scopeBarBackgroundImage
还有几个设置相关背景图的方法:
// 设置tabbar背景图
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics
// 设置搜索文本框背景图, state的取值只能是: UIControlStateNormal and UIControlStateDisabled
- (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state
- (void)setScopeBarButtonBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state
修改搜索框默认图标
这个方法可以修改搜索框默认的一些图标,:
- (void)setImage:(nullable UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state
修改哪个图标, 是用参数icon 来指定, 他是一个枚举:
typedef NS_ENUM(NSInteger, UISearchBarIcon) {
UISearchBarIconSearch, // The magnifying glass
UISearchBarIconClear __TVOS_PROHIBITED, // The circle with an x in it
UISearchBarIconBookmark __TVOS_PROHIBITED, // The open book icon
UISearchBarIconResultsList __TVOS_PROHIBITED, // The list lozenge icon
};
如下, 我修改了默认的搜索图标:
[search.searchBar setImage:[UIImage imageNamed:@"MoreExpressionShops"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
修改默认图标偏移量
修改偏移量可使用下面的方法, 参数就是你要修改的是哪个图标(搜索, 删除等):
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon
参数是一个枚举:
typedef NS_ENUM(NSInteger, UISearchBarIcon) {
UISearchBarIconSearch, // 搜索图标
UISearchBarIconClear // 删除图标
UISearchBarIconBookmark // 阅读样式图标
UISearchBarIconResultsList // 详细结果展示图标
};
- 修改右侧取消按钮
搜索框右侧的取消按钮, 默认是蓝色的英文cancel, 大多数情况下我们都要修改这个, 下面我来介绍三种修改的方法:
方法一 : 找到这个button来修改,
由于搜索框刚创建的时候, 没有显示这个取消按钮, 所以实际上, 这个按钮不在searchBar 的子视图中(懒加载), 所以, 我们可以在其代理方法中添加如下代码:
// 由于其子控件是懒加载模式, 所以找之前先将其显示
[searchBar setShowsCancelButton:YES animated:YES];
// 这个方法来遍历其子视图, 找到cancel按钮
for (UIView *subview in searchBar.subviews) {
for (UIView *tempView in subview.subviews) {
// 找到cancelButton
if ([tempView isKindOfClass:NSClassFromString(@"UINavigationButton")]) {
// 在这里转化为UIButton, 设置其属性
UIButton *btn = (UIButton*)tempView;
[btn setTitle:@"取消" forState:UIControlStateNormal];
}
}
}
效果如下:
这个方法可以设置, 按钮标题及其属性(颜色, 字体等)
注意, 这里设置文字颜色的时候, 如果使用按钮的方式设置, 会有一些问题, 第一次激活搜索框的时候, 他的颜色并没有改变, 第二次之后才会改变:
// 这样首次激活搜索框 ,颜色没有改变
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
方式二 : 设置tintColor
使用searchBar的tintColor来设置, 也能改变这个按钮的文字颜色, 但是底部的选项卡也会跟着变色:
search.searchBar.tintColor = [UIColor redColor];
因为, 这样虽然改变了按钮标题颜色, 但是其他的控件也受到了影响, 所以, 有时候也不是我们想要的.
方式三 : 最优解决
下面介绍一种, 直接修改按钮标题颜色, 而不影响其他的控件( 例如: 选项卡 ); 在初始化UISearchController的时候, 添加如下代码即可:
// 修改按钮标题文字属性( 颜色, 大小, 字体)
[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor], NSFontAttributeName: [UIFont systemFontOfSize:16]} forState:UIControlStateNormal];
// 修改标题文字
[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:@"souSuo"];
这样也能达到修改按钮文字及其颜色的效果, 但是不会影响其他的控件.
设置光标
设置光标偏移量
searchBar 有两个UIOffset类型的属性:
// 搜索框光标偏移量
@property(nonatomic) UIOffset searchFieldBackgroundPositionAdjustment
// 搜索框在searchBar内的位置偏移量
@property(nonatomic) UIOffset searchTextPositionAdjustment
例如, 如下设置后:
search.searchBar.searchTextPositionAdjustment = UIOffsetMake(20, 0);
search.searchBar.searchFieldBackgroundPositionAdjustment = UIOffsetMake(20, 0);
效果是这样的:
修改光标颜色
修改光标的颜色可以直接设置searchBar 的tintColor属性, 缺点就是会影响整个搜索框的前景色.
目前, 还没有找到特别有效的方法来单独设置光标的颜色, 能想到的就是遍历其子视图, 找到输入框UITextField, 方法类似上面找cancelButton :
UITextField *textField = nil;
for (UIView *tmp in backView.subviews) {
if ([tmp isKindOfClass:NSClassFromString(@"UISearchBarTextField")]) {
textField = (UITextField *)tmp;
break;
}
}
// 找到这个textField, 就可以按UITextField类来设置了
if (textField) {
textField.tintColor = [UIColor orangeColor];
}
这样就修改为了, 橘黄色:
附
以上在遍历子控件, 找自己需要的控件的时候, 判断class时的类型, 我们怎么知道是什么类型的呢? 这里给出, searchController的searchBar的视图层次结构:
这样, 我们就可以看到各个子控件的类型了.
