[iOS]关于UISearchBar, 看这个就够了

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 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   *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 *)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 中起作用的是高度, 其他的设置了没效果;

以上设置的, 效果图如下:

search.searchBar.inputAccessoryView

- 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的视图层次结构:

子视图层次关系

可视化视图

这样, 我们就可以看到各个子控件的类型了.

(完)