iOS--UISearchBar 属性、方法详解及应用（自定义搜索框样式）

1. UISearchBar 的属性

介绍之前先说一下 UISearchBar 的初始化方法：UISearchBar 是 UIView 的子类，它的初始化方法有三种：

- (instancetype)init 
- (instancetype)initWithFrame:(CGRect)frame 
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder 

1.1 搜索框风格

• 属性 (两种风格 default 和 black)

// 搜索框风格
@property(nonatomic) UIBarStyle barStyle;

Default : 白色搜索框，黑色背景                                                                                  Black: 黑色搜索框

                                                                      

 1.2 搜索的文本、搜索框顶部的提示信息、占位符

 // 搜索的文本
@property(nullable,nonatomic,copy)   NSString *text;  
 // 搜索框顶部的提示信息 
@property(nullable,nonatomic,copy)   NSString *prompt;    
// 占位符，默认nil, 若有值则在输入文本后消失
@property(nullable,nonatomic,copy)   NSString *placeholder;  

                                      

1.3 搜索框右侧的按钮

• 属性

// 搜索框右侧是否显示图书按钮 
@property(nonatomic)  BOOL showsBookmarkButton;   
//搜索框右侧是否显示取消按钮 
@property(nonatomic) BOOL showsCancelButton;  
//搜索框右侧是否显示搜索结果按钮   
@property(nonatomic) BOOL showsSearchResultsButton; 
// 搜索结果按钮为选中状态
@property(nonatomic, getter=isSearchResultsButtonSelected) BOOL searchResultsButtonSelected；

showsBookmarkButton = true                                              showsCancelButton = true                            

                    

showsSearchResultsButton = true                                         showsSearchResultsButton = true searchResultsButtonSelected=true

                        

1.4 风格颜色、背景颜色

• 属性

// 风格颜色，可用于修改输入框的光标颜色，取消按钮和选择栏被选中时候都会变成设置的颜色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
// 搜索框背景颜色
@property(nullable, nonatomic,strong) UIColor *barTintColor;

bartintcolor修改整个搜索框的背景颜色为粉色                              tintcolor修改光标颜色为红色

                   

                                                                                                        

 

1.5 搜索框样式

• 属性

// 搜索框样式
@property (nonatomic) UISearchBarStyle searchBarStyle

typedef NS_ENUM(NSUInteger, UISearchBarStyle) {
    UISearchBarStyleDefault,    // 默认样式，和UISearchBarStyleProminent 一样
    UISearchBarStyleProminent,  // 显示背景，常用在my Mail, Messages and Contacts
    UISearchBarStyleMinimal     // 不显示背景，系统自带的背景色无效，自定义的有效，常用在Calendar, Notes and Music
} 

 UISearchBarStyleProminent 显示背景                                        UISearchBarStyleMinimal 不显示背景

                

1.6 搜索栏的附件选择按钮视图

• 属性

// 选择按钮试图的按钮标题    
@property(nullable, nonatomic,copy) NSArray<NSString *> *scopeButtonTitles ; 
// 选中的按钮下标值 ，默认 0. 如果超出范围则忽略
@property(nonatomic) NSInteger  selectedScopeButtonIndex ; 
// 是否显示搜索栏的附件选择按钮视图
@property(nonatomic) BOOL showsScopeBar;

 

 1.7 搜索框背景图片、搜索框附属分栏条的背景颜色

• 属性

// 搜索框背景图片
@property(nullable, nonatomic,strong) UIImage *backgroundImage;
// 搜索框附属分栏条的背景颜色
@property(nullable, nonatomic,strong) UIImage *scopeBarBackgroundImage;

 

1.8 索框中文本框的背景偏移量和文本偏移量

// 搜索框中文本框的背景偏移量
@property(nonatomic) UIOffset searchFieldBackgroundPositionAdjustment;
// 搜索框中文本框的文本偏移量
@property(nonatomic) UIOffset searchTextPositionAdjustment;

最后附上系统设置和代码形式实现的两种效果

• 系统设置

         

• 代码实现

class SearchBarViewController: UIViewController, UISearchBarDelegate {

    override func viewDidLoad() {

        super.viewDidLoad()

        layoutSubView()

    }

    func layoutSubView() {

        let searchBar = UISearchBar.init(frame: CGRect.init(x: 0, y: 0, width: self.view.bounds.size.width, height: 44))

        searchBar.prompt = "请输入搜索内容进行搜索"

        searchBar.placeholder = "文本"

        searchBar.showsCancelButton = true

        searchBar.barTintColor =  colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)

        searchBar.tintColor =  colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)

        searchBar.searchBarStyle = .prominent

        searchBar.showsScopeBar = true

        searchBar.scopeButtonTitles = ["One", "Two", "Three"]

        searchBar.selectedScopeButtonIndex = 1

        //searchBar.searchFieldBackgroundPositionAdjustment = UIOffset.init(horizontal: 5, vertical: 5)

        //searchBar.searchTextPositionAdjustment = UIOffset.init(horizontal: 10, vertical: 10)

        searchBar.delegate = self

        self.view.addSubview(searchBar)

    }

}

2. UISearchBar 的方法

2.1 设置是否动画效果的显示或隐藏取消按钮

// 设置是否动画效果的显示或隐藏取消按钮
 - (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated 

2.2 设置 (获取) 搜索框背景图片、选择按钮视图的背景图片、文本框的背景图片

// 1.设置搜索框背景图片
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 
//  获取置搜索框背景图片
- (nullable UIImage *)backgroundImageForBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 

// 2.设置选择按钮视图的背景图片
- (void)setScopeBarButtonBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 获取选择按钮视图的背景图片
- (nullable UIImage *)scopeBarButtonBackgroundImageForState:(UIControlState)state  

// 3.设置搜索框文本框的背景图片
- (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 获取搜索框文本框的背景图片
- (nullable UIImage *)searchFieldBackgroundImageForState:(UIControlState)state

 searchBar.setBackgroundImage(UIImage.init(named: "Image3"), for: UIBarPosition.any, barMetrics: UIBarMetrics.default)

 searchBar.setSearchFieldBackgroundImage(UIImage.init(named:"Image2"), for: UIControl.State.normal)

 searchBar.setScopeBarButtonBackgroundImage(UIImage.init(named:"Image3"), for: UIControl.State.normal)

说明：如果searchbar设置了prompt，那么再使用setBackgroundImage是不起作用的

2.3 设置（获取）搜索框的图标（包括搜索图标、清除输入的文字的图标、图书图标、搜索结果列表图标）

// 设置搜索框的图标
- (void)setImage:(nullable UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;
// 获取搜索框的图标
- (nullable UIImage *)imageForSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;

typedef NS_ENUM(NSInteger, UISearchBarIcon) {
    UISearchBarIconSearch, // 搜索框放大镜图标
    UISearchBarIconClear , // 搜索框右侧可用于清除输入的文字的图标x
    UISearchBarIconBookmark , // 搜索框右侧的图书图标
    UISearchBarIconResultsList , // 搜索框右侧的搜索结果列表图标
};

 //设置搜索图标

searchBar.setImage(UIImage.init(named: "searchicon"), for: UISearchBar.Icon.search, state: .normal)

searchBar.showsSearchResultsButton = true

//设置搜索结果图标

searchBar.setImage(UIImage.init(named: "searchicon"), for: UISearchBar.Icon.resultsList, state: .normal)

2.4 设置（获取）选择按钮视图的分割线图片、按钮上显示的标题样式

// 设置选择按钮视图的分割线图片
- (void)setScopeBarButtonDividerImage:(nullable UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 获取选择按钮视图的分割线图片
- (nullable UIImage *)scopeBarButtonDividerImageForLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 设置选择按钮视图的标题样式
- (void)setScopeBarButtonTitleTextAttributes:(nullable NSDictionary<NSString *, id> *)attributes forState:(UIControlState)state;
// 获取选择按钮视图的标题样式
- (nullable NSDictionary<NSString *, id> *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state

 2.5 设置（获取）搜索框四种图标的偏移量

iOS11系统上搜索图标默认在左边,就是如果想要更改搜索图标的位置，可以使用这个方法

//  设置搜索框图标的偏移量
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon;
//  获取搜索框图标的偏移量
- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon;

2.6 UISearchBarDelegate代理方法

// 1. 将要开始编辑文本时会调用该方法，返回 NO 将不会变成第一响应者
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;                      
// 2. 开始输入文本会调用该方法
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar;                     
// 3. 将要结束编辑文本时会调用该方法，返回 NO 将不会释放第一响应者
- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar; 
 // 4. 结束编辑文本时调用该方法
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar;     
// 5. 文本改变会调用该方法（包含clear文本）
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText; 
// 6. 文字改变前会调用该方法，返回NO则不能加入新的编辑文字
- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text ;

// 7. 键盘上的搜索按钮点击的会调用该方法
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar;     
// 8. 搜索框右侧图书按钮点击会调用该方法
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar ;
 // 9.点击取消按钮会调用该方法
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar;   
// 10.搜索结果列表按钮被按下会调用该方法
- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar ; 
// 11. 搜索框的附属按钮视图中切换按钮会调用该方法
- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope;

//将要开始编辑文本的时候调用此方法，返回no就是不会变成第一响应者,键盘不会弹出

    func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {

        return true

    }

    

    //开始输入文本会调用此方法

    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {

        searchBar.setShowsCancelButton(true, animated: true)

    }

    

    //将要结束编辑文本时会调用该方法，返回 NO 将不会释放第一响应者,调用方法resignFirstResponder的时候会调用到

    func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {

        return true

    }

    

    //结束编辑文本时调用该方法

    func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {



    }

    

    //文本改变会调用该方法（包含clear文本）

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {

        

    }

    

    //字改变前会调用该方法，返回NO则不能加入新的编辑文字

    func searchBar(_ searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {

        return true

    }

    

    //键盘上的搜索按钮点击的会调用该方法

    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {

        

    }

    

    //搜索框右侧图书按钮点击会调用该方法

    func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {

        

    }

    

    //点击取消按钮会调用该方法

    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {

        searchBar.setShowsCancelButton(false, animated: true)

        //收起键盘

        searchBar.resignFirstResponder()

    }

    

    //搜索结果列表按钮被按下会调用该方法

    func searchBarResultsListButtonClicked(_ searchBar: UISearchBar) {

        

    }

    

    //搜索框的附属按钮视图中切换按钮会调用该方法

    func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {

        

    }

 

点击取消按钮但没有释放搜索框的第一响应者身份效果图：

点击取消按钮用时释放搜索框的第一响应者身份会调用结束编辑文本的方法：

 

最后是完整的代码实现

 

class SearchBarViewController: UIViewController, UISearchBarDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        layoutSubView()

    }
    //MARK:- 自定义searchbar样式
    func layoutSubView() {
        let searchBar = UISearchBar.init()
        //这里如果设置了prompt，那么后面的setBackgroundImage会失效
        //searchBar.prompt = "请输入搜索内容进行搜索"
        searchBar.placeholder = "文本"
        //searchBar.showsCancelButton = true
        searchBar.barTintColor = #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)
        searchBar.tintColor = #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)
        searchBar.searchBarStyle = .prominent
        searchBar.showsScopeBar = true
        searchBar.scopeButtonTitles = ["One", "Two", "Three"]
        searchBar.selectedScopeButtonIndex = 1
        searchBar.setBackgroundImage(UIImage.init(named: "Image3"), for: UIBarPosition.any, barMetrics: UIBarMetrics.default)
        searchBar.setSearchFieldBackgroundImage(UIImage.init(named:"Image2"), for: UIControl.State.normal)
        searchBar.setScopeBarButtonBackgroundImage(UIImage.init(named:"Image3"), for: UIControl.State.normal)
        //searchBar.searchFieldBackgroundPositionAdjustment = UIOffset.init(horizontal: 5, vertical: 5)
        //searchBar.searchTextPositionAdjustment = UIOffset.init(horizontal: 10, vertical: 10)
        //设置搜索图标
        searchBar.setImage(UIImage.init(named: "searchicon"), for: UISearchBar.Icon.search, state: .normal)
        searchBar.showsSearchResultsButton = true
        //设置搜索结果图标
        searchBar.setImage(UIImage.init(named: "searchicon"), for: UISearchBar.Icon.resultsList, state: .normal)
        searchBar.delegate = self
        //设置scopebar的分割图片
        searchBar.setScopeBarButtonDividerImage(UIImage.init(named: "divider"), forLeftSegmentState: UIControl.State.normal, rightSegmentState: UIControl.State.normal)
        //设置scopebarbuttontile的文字样式 默认状态
        searchBar.setScopeBarButtonTitleTextAttributes([.foregroundColor: UIColor.white, .backgroundColor:UIColor.red, .strokeColor:UIColor.blue, .strokeWidth:3,.font:UIFont.systemFont(ofSize: 40)], for: .normal)
        //设置scopebarbuttontile的文字样式 选中状态
        searchBar.setScopeBarButtonTitleTextAttributes([.backgroundColor:UIColor.yellow], for: .selected)
        //修改search icon的位置，ios11以后一直默认在最左边出现
        searchBar.setPositionAdjustment(UIOffset.init(horizontal: 100, vertical: 5), for: UISearchBar.Icon.search)
        self.view.addSubview(searchBar)
        
    }

    //MARK:- searchbar的代理方法
    //将要开始编辑文本的时候调用此方法，返回no就是不会变成第一响应者,键盘不会弹出
    func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
        return true
    }
    
    //开始输入文本会调用此方法
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        searchBar.setShowsCancelButton(true, animated: true)
    }
    
    //将要结束编辑文本时会调用该方法，返回 NO 将不会释放第一响应者,调用方法resignFirstResponder的时候会调用到
    func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {
        return true
    }
    
    //结束编辑文本时调用该方法
    func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {

    }
    
    //文本改变会调用该方法（包含clear文本）
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        
    }
    
    //字改变前会调用该方法，返回NO则不能加入新的编辑文字
    func searchBar(_ searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        return true
    }
    
    //键盘上的搜索按钮点击的会调用该方法
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        
    }
    
    //搜索框右侧图书按钮点击会调用该方法
    func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
        
    }
    
    //点击取消按钮会调用该方法
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.setShowsCancelButton(false, animated: true)
        //收起键盘
        searchBar.resignFirstResponder()
    }
    
    //搜索结果列表按钮被按下会调用该方法
    func searchBarResultsListButtonClicked(_ searchBar: UISearchBar) {
        
    }
    
    //搜索框的附属按钮视图中切换按钮会调用该方法
    func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {
        
    }
}