很多APP都會(huì)涉及到搜索框，蘋(píng)果也為我們提供了默認(rèn)的搜索框UISearchBar。但實(shí)際項(xiàng)目中我們通常需要更改系統(tǒng)默認(rèn)搜索框的樣式。為了實(shí)現(xiàn)這一目標(biāo)，我們需要先搞懂 UISearchBar 的屬性及方法。在系統(tǒng)的掌握了這些基礎(chǔ)的前提下才能更好的去應(yīng)用它，包括修改樣式、或者是模仿系統(tǒng)搜索框的樣式自定義一個(gè)自己的搜索框等。

本文主要介紹內(nèi)容分為以下三個(gè)部分：

1. UISearchBar 的屬性

2. UISearchBar 的方法

3. 自定義 UISearchBar 的樣式

1. UISearchBar 的屬性

介紹之前先說(shuō)一下 UISearchBar 的初始化方法：UISearchBar 是 UIView 的子類，它的初始化方法有三種：

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

這三個(gè)初始化方法是我們常見(jiàn)的初始化 UIView 以及它的子類的方法，比較常見(jiàn)，而且也不是介紹重點(diǎn)，所以這里不展開(kāi)說(shuō)明。

1.1 搜索框風(fēng)格

• 屬性

// 搜索框風(fēng)格
@property(nonatomic) UIBarStyle barStyle;

UIBarStyle 有四種枚舉值，但后兩種已經(jīng)禁用。

typedef NS_ENUM(NSInteger, UIBarStyle) {
    UIBarStyleDefault         //白色搜索框，灰色背景
    UIBarStyleBlack           //黑色搜索框,
    
    UIBarStyleBlackOpaque      = 1, // 禁用. Use UIBarStyleBlack
    UIBarStyleBlackTranslucent = 2, // 禁用. Use UIBarStyleBlack and set the translucent property to YES
}

• 效果圖：

UIBarStyleDefault 樣式

UIBarStyleBlack樣式

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

• 屬性

 // 搜索的文本
@property(nullable,nonatomic,copy)   NSString *text;  
 // 搜索框頂部的提示信息 
@property(nullable,nonatomic,copy)   NSString *prompt;    
// 占位符，默認(rèn)nil, 若有值則在輸入文本后消失
@property(nullable,nonatomic,copy)   NSString *placeholder;  

• 效果圖：

prompt 和 placeholder

輸入文本為 text 后 placeholder 消失

1.3 搜索框右側(cè)的按鈕

• 屬性

// 搜索框右側(cè)是否顯示圖書(shū)按鈕 
@property(nonatomic)  BOOL showsBookmarkButton;   
//搜索框右側(cè)是否顯示取消按鈕 
@property(nonatomic) BOOL showsCancelButton;  
//搜索框右側(cè)是否顯示搜索結(jié)果按鈕   
@property(nonatomic) BOOL showsSearchResultsButton; 
// 搜索結(jié)果按鈕為選中狀態(tài)
@property(nonatomic, getter=isSearchResultsButtonSelected) BOOL searchResultsButtonSelected；

以上四個(gè)屬性的默認(rèn)值都是 NO

• 效果圖：

showsBookmarkButton = YES 效果

showsCancelButton = YES 效果

showsSearchResultsButton = YES 效果

searchResultsButtonSelected = YES 效果，要結(jié)合showsSearchResultsButton = YES使用

1.4 風(fēng)格顏色、背景顏色

• 屬性

// 風(fēng)格顏色，可用于修改輸入框的光標(biāo)顏色，取消按鈕和選擇欄被選中時(shí)候都會(huì)變成設(shè)置的顏色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
// 搜索框背景顏色
@property(nullable, nonatomic,strong) UIColor *barTintColor;

• 測(cè)試代碼

    self.tintColor = [UIColor orangeColor];      //設(shè)置光標(biāo)顏色為橘色
    self.barTintColor = [UIColor grayColor];     //設(shè)置搜索框背景顏色為灰色

• 效果圖：

tintColor 和 barTintColor

1.5 搜索框樣式

• 屬性

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

它有三種枚舉值：

typedef NS_ENUM(NSUInteger, UISearchBarStyle) {
    UISearchBarStyleDefault,    // 默認(rèn)樣式，和UISearchBarStyleProminent 一樣
    UISearchBarStyleProminent,  // 顯示背景，常用在my Mail, Messages and Contacts
    UISearchBarStyleMinimal     // 不顯示背景，系統(tǒng)自帶的背景色無(wú)效，自定義的有效，常用在Calendar, Notes and Music
} 

• 效果圖：

  
  
  UISearchBarStyleMinimal 不顯示背景
  
  
  UISearchBarStyleDefault 和 UISearchBarStyleProminent 都顯示背景

1.6 搜索欄的附件選擇按鈕視圖

• 屬性

// 選擇按鈕試圖的按鈕標(biāo)題    
@property(nullable, nonatomic,copy) NSArray<NSString *> *scopeButtonTitles ; 
// 選中的按鈕下標(biāo)值 ，默認(rèn) 0. 如果超出范圍則忽略
@property(nonatomic) NSInteger  selectedScopeButtonIndex ; 
// 是否顯示搜索欄的附件選擇按鈕視圖
@property(nonatomic) BOOL showsScopeBar;

• 測(cè)試代碼

    self.placeholder = @"搜索";
    self.showsScopeBar = YES;
    self.scopeButtonTitles = @[@"One", @"Two", @"Three"];
    self.selectedScopeButtonIndex = 1;

• 效果圖：

帶選擇按鈕視圖的搜索欄

1.7 搜索框背景圖片、搜索框附屬分欄條的背景顏色

• 屬性

// 搜索框背景圖片
@property(nullable, nonatomic,strong) UIImage *backgroundImage;
// 搜索框附屬分欄條的背景顏色
@property(nullable, nonatomic,strong) UIImage *scopeBarBackgroundImage;

• 測(cè)試代碼

    //設(shè)置搜索框背景圖片
    UIImage *backgroundImage = [UIImage imageNamed:@"image001"];
    self.backgroundImage = backgroundImage;

    //搜索框附屬分欄條的背景顏色
    UIImage *scopeBarBackgroundImage = [UIImage imageNamed:@"image002"];
    self.scopeBarBackgroundImage = scopeBarBackgroundImage;

• 效果圖：

設(shè)置backgroundImage 和 scopeBarBackgroundImage

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

• 屬性

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

• 測(cè)試代碼

    self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(5, 3);
    self.searchTextPositionAdjustment =  UIOffsetMake(10, 5);

效果圖：

設(shè)置偏移量前后對(duì)比圖

PS: UITextInputAssistantItem *inputAssistantItem 、BOOL translucent 、UIView *inputAccessoryView 經(jīng)過(guò)測(cè)試這三個(gè)屬性并不太清楚具體實(shí)現(xiàn)效果，之后會(huì)繼續(xù)深入了解一下，記在這里，作為提醒，如果有誰(shuí)剛好了解它們，希望能夠給與幫助，非常感謝。

2. UISearchBar 的方法

2.1 設(shè)置是否動(dòng)畫(huà)效果的顯示或隱藏取消按鈕

• 方法：

// 設(shè)置是否動(dòng)畫(huà)效果的顯示或隱藏取消按鈕
 - (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated 

通常在開(kāi)始編輯文本時(shí)將調(diào)用該方法，讓取消按鈕顯示出來(lái)。

• 測(cè)試代碼：

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    NSLog(@"開(kāi)始輸入搜索內(nèi)容");
    [searchBar setShowsCancelButton:YES animated:YES]; // 動(dòng)畫(huà)顯示取消按鈕
}

• 效果圖：

setShowsCancelButton: animated:

2.2 設(shè)置 (獲取) 搜索框背景圖片、選擇按鈕視圖的背景圖片、文本框的背景圖片

• 方法：

// 1.設(shè)置搜索框背景圖片
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 
//  獲取置搜索框背景圖片
- (nullable UIImage *)backgroundImageForBarPosition:(UIBarPosition)barPosition barMetrics:(UIBarMetrics)barMetrics 

// 2.設(shè)置選擇按鈕視圖的背景圖片
- (void)setScopeBarButtonBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 獲取選擇按鈕視圖的背景圖片
- (nullable UIImage *)scopeBarButtonBackgroundImageForState:(UIControlState)state  

// 3.設(shè)置搜索框文本框的背景圖片
- (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state 
// 獲取搜索框文本框的背景圖片
- (nullable UIImage *)searchFieldBackgroundImageForState:(UIControlState)state

• 測(cè)試代碼：

    self.showsScopeBar = YES;
    self.scopeButtonTitles = @[@"One", @"Two", @"Three"];
    self.selectedScopeButtonIndex = 1;
    // 設(shè)置搜索框背景圖片
    [self setBackgroundImage:[UIImage imageNamed:@"image001"] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
    // 設(shè)置選擇按鈕視圖的背景圖片
    [self setScopeBarButtonBackgroundImage:[UIImage imageNamed:@"image002"] forState:UIControlStateNormal];
    // 設(shè)置搜索框文本框的背景圖片
    [self setSearchFieldBackgroundImage:[UIImage imageNamed:@"image003"] forState:UIControlStateNormal];

• 效果圖：

設(shè)置搜索框背景圖片、選擇按鈕視圖的背景圖片、文本框的背景圖片

我們可以觀察一下選擇按鈕視圖的背景圖片，發(fā)現(xiàn)這個(gè)圖片只是設(shè)置在三個(gè)按鈕的底部視圖，而大的外面的空余背景依舊是灰色，對(duì)比1.7中使用屬性UIImage *scopeBarBackgroundImage 設(shè)置的背景圖片，發(fā)現(xiàn)使用屬性設(shè)置背景圖片不會(huì)有空余的灰色背景,該屬性針對(duì)的是大的scopeBar, 而不是一個(gè)scopeBarButton，這一點(diǎn)需要注意區(qū)分。

2.3 設(shè)置（獲?。┧阉骺虻膱D標(biāo)（包括搜索圖標(biāo)、清除輸入的文字的圖標(biāo)、圖書(shū)圖標(biāo)、搜索結(jié)果列表圖標(biāo)）

• 屬性

// 設(shè)置搜索框的圖標(biāo)
- (void)setImage:(nullable UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;
// 獲取搜索框的圖標(biāo)
- (nullable UIImage *)imageForSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;

搜索框圖標(biāo) UISearchBarIcon 有四個(gè)枚舉值：

typedef NS_ENUM(NSInteger, UISearchBarIcon) {
    UISearchBarIconSearch, // 搜索框放大鏡圖標(biāo)
    UISearchBarIconClear , // 搜索框右側(cè)可用于清除輸入的文字的圖標(biāo)x
    UISearchBarIconBookmark , // 搜索框右側(cè)的圖書(shū)圖標(biāo)
    UISearchBarIconResultsList , // 搜索框右側(cè)的搜索結(jié)果列表圖標(biāo)
};

• 測(cè)試代碼

    self.placeholder = @"搜索";
    self.showsSearchResultsButton = YES;
    // 設(shè)置搜索框放大鏡圖標(biāo)
    UIImage *searchIcon = [UIImage imageNamed:@"searchIcon"];
    [self setImage:searchIcon forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
  
    // 設(shè)置搜索結(jié)果列表圖標(biāo)
    UIImage *resultListIcon = [UIImage imageNamed:@"arrow"];
    [self setImage:resultListIcon forSearchBarIcon:UISearchBarIconResultsList state:UIControlStateNormal];
  

• 效果圖

重新設(shè)置搜索框搜索圖標(biāo)和顯示結(jié)果列表的圖標(biāo)

可以發(fā)現(xiàn)搜索圖標(biāo)和搜索結(jié)果列表圖標(biāo)已經(jīng)改變，至于其他的兩個(gè)圖標(biāo)仿照上面代碼修改即可實(shí)現(xiàn)。

2.4 設(shè)置（獲?。┻x擇按鈕視圖的分割線圖片、按鈕上顯示的標(biāo)題樣式

• 方法

// 設(shè)置選擇按鈕視圖的分割線圖片
- (void)setScopeBarButtonDividerImage:(nullable UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 獲取選擇按鈕視圖的分割線圖片
- (nullable UIImage *)scopeBarButtonDividerImageForLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState;
// 設(shè)置選擇按鈕視圖的標(biāo)題樣式
- (void)setScopeBarButtonTitleTextAttributes:(nullable NSDictionary<NSString *, id> *)attributes forState:(UIControlState)state;
// 獲取選擇按鈕視圖的標(biāo)題樣式
- (nullable NSDictionary<NSString *, id> *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state

• 測(cè)試代碼

   self.showsScopeBar = YES;
   self.scopeButtonTitles = @[@"One", @"Two", @"Three", @"Four"];
   // 設(shè)置選擇按鈕視圖的分割線圖片為一個(gè)橘色的線條
   [self setScopeBarButtonDividerImage:[UIImage imageNamed:@"divider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];

   // 設(shè)置選擇按鈕視圖的標(biāo)題樣式為20號(hào)橘色空心的系統(tǒng)字體
   NSDictionary *attributeDic = @{NSFontAttributeName : [UIFont systemFontOfSize:20] , NSStrokeColorAttributeName : [UIColor orangeColor] , NSStrokeWidthAttributeName : @(3)};
   [self setScopeBarButtonTitleTextAttributes:attributeDic forState:UIControlStateNormal];

• 效果圖

  
  
  設(shè)置選擇按鈕視圖的分割線圖片和按鈕上顯示的標(biāo)題樣式的效果圖

2.5 設(shè)置（獲?。┧阉骺蛩姆N圖標(biāo)的偏移量

（評(píng)論里的小伙伴說(shuō)不管怎樣運(yùn)行搜索圖標(biāo)總是在左邊，測(cè)試后發(fā)現(xiàn)在iOS11系統(tǒng)上搜索圖標(biāo)默認(rèn)在左邊，而我當(dāng)時(shí)寫(xiě)文章時(shí)沒(méi)有升級(jí)模擬器為iOS11，所以非常感謝她的評(píng)論，不然自己也沒(méi)注意到?？傊褪侨绻胍乃阉鲌D標(biāo)的位置，可以使用這個(gè)方法哦，親測(cè)有效）

• 方法

//  設(shè)置搜索框圖標(biāo)的偏移量
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon;
//  獲取搜索框圖標(biāo)的偏移量
- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon;

• 測(cè)試代碼

    self.placeholder = @"搜索";
    [self setPositionAdjustment:UIOffsetMake(15, 5) forSearchBarIcon:UISearchBarIconSearch];

• 效果圖

設(shè)置搜索圖標(biāo)向有偏移15個(gè)單位，向下偏移5個(gè)單位后的效果圖

2.6 UISearchBarDelegate代理方法

• 方法

// 1. 將要開(kāi)始編輯文本時(shí)會(huì)調(diào)用該方法，返回 NO 將不會(huì)變成第一響應(yīng)者
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;                      
// 2. 開(kāi)始輸入文本會(huì)調(diào)用該方法
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar;                     
// 3. 將要結(jié)束編輯文本時(shí)會(huì)調(diào)用該方法，返回 NO 將不會(huì)釋放第一響應(yīng)者
- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar; 
 // 4. 結(jié)束編輯文本時(shí)調(diào)用該方法
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar;     
// 5. 文本改變會(huì)調(diào)用該方法（包含clear文本）
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText; 
// 6. 文字改變前會(huì)調(diào)用該方法，返回NO則不能加入新的編輯文字
- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text ;

// 7. 鍵盤(pán)上的搜索按鈕點(diǎn)擊的會(huì)調(diào)用該方法
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar;     
// 8. 搜索框右側(cè)圖書(shū)按鈕點(diǎn)擊會(huì)調(diào)用該方法
- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar ;
 // 9.點(diǎn)擊取消按鈕會(huì)調(diào)用該方法
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar;   
// 10.搜索結(jié)果列表按鈕被按下會(huì)調(diào)用該方法
- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar ; 
// 11. 搜索框的附屬按鈕視圖中切換按鈕會(huì)調(diào)用該方法
- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope;

• 測(cè)試代碼

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {
    return YES;
}

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    searchBar.prompt = @"1.開(kāi)始編輯文本";
    [searchBar setShowsCancelButton:YES animated:YES]; // 動(dòng)畫(huà)效果顯示取消按鈕
}

- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    return YES;
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    searchBar.prompt = @"2.在改變文本過(guò)程中。。。";
}

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    searchBar.prompt = @"3. 點(diǎn)擊鍵盤(pán)上的搜索按鈕";
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    searchBar.prompt = @"4. 點(diǎn)擊取消按鈕";
    searchBar.text = @"";
    [self setShowsCancelButton:NO animated:YES];
    // 如果希望在點(diǎn)擊取消按鈕調(diào)用結(jié)束編輯方法需要讓加上這句代碼
    //[searchBar resignFirstResponder];
}

- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{
    return YES;
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
     searchBar.prompt = @"5.已經(jīng)結(jié)束編輯文本";
}

• 效果圖
  點(diǎn)擊取消按鈕但沒(méi)有釋放搜索框的第一響應(yīng)者身份效果圖：

gif1

點(diǎn)擊取消按鈕用時(shí)釋放搜索框的第一響應(yīng)者身份會(huì)調(diào)用結(jié)束編輯文本的方法：

gif2

3. 自定義 UISearchBar 的樣式

在自定義UISearchBar 樣式之前我們先來(lái)看一下UISearchBar的組成：

UISearchBar層次結(jié)構(gòu)截圖

根據(jù)這個(gè)截圖我們可以概括為下圖：

簡(jiǎn)單概括的UISearchBar層次結(jié)構(gòu)

根據(jù)這個(gè)簡(jiǎn)單的層次結(jié)構(gòu)圖，我們可以更好的了解UISearchBar的組成部分，這樣有助于我們更方便的進(jìn)行自定義樣式，下面開(kāi)始自定義樣式！

目標(biāo)搜索框樣式

首先看一下目標(biāo)樣式

目標(biāo)搜索框樣式.gif

實(shí)現(xiàn)代碼

代碼中添加約束和自定義顏色可參考之前寫(xiě)的兩篇文章：約束 和 自定義顏色

// 委托
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    [searchBar setShowsCancelButton:YES animated:YES];
}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
    searchBar.text = @"";
    [self setShowsCancelButton:NO animated:YES];
    [searchBar resignFirstResponder];
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
    self.voiceButton.hidden = searchText.length > 0 ? YES : NO;
}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
    self.voiceButton.hidden = NO;
}

// 樣式設(shè)計(jì)
- (void)modifyStyleByTraversal {
    // 修改搜索框背景圖片為自定義的灰色
    UIColor *backgroundImageColor = [UIColor colorwithHex:0xE3DFDA];
    UIImage* clearImg = [self imageWithColor:backgroundImageColor andHeight:45.0];
    self.backgroundImage = clearImg;
    // 修改搜索框光標(biāo)顏色
    self.tintColor = [UIColor P2Color];
    // 修改搜索框的搜索圖標(biāo)
    [self setImage:[UIImage imageNamed:@"searchIcon"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

    for (UIView *view in self.subviews.lastObject.subviews) {
        if([view isKindOfClass:NSClassFromString(@"UISearchBarTextField")]) {
            UITextField *textField = (UITextField *)view;
           //添加話筒按鈕
            [self addVoiceButton:textField];
            //設(shè)置輸入框的背景顏色
            textField.clipsToBounds = YES;
            textField.backgroundColor = [UIColor P1Color];

            //設(shè)置輸入框邊框的圓角以及顏色
            textField.layer.cornerRadius = 10.0f;
            textField.layer.borderColor = [UIColor P2Color].CGColor;
            textField.layer.borderWidth = 1;

            //設(shè)置輸入字體顏色
            textField.textColor = [UIColor P2Color];

            //設(shè)置默認(rèn)文字顏色
            textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@" 搜索" attributes:@{NSForegroundColorAttributeName:[UIColor P2Color]}];
        }

        if ([view isKindOfClass:NSClassFromString(@"UINavigationButton")]) {
            UIButton *cancel = (UIButton *)view;
            [cancel setTitle:@"取消" forState:UIControlStateNormal];
            [cancel setTitleColor:[UIColor P2Color] forState:UIControlStateNormal];
        }
    }
}

// 畫(huà)指定高度和顏色的圖片
- (UIImage*) imageWithColor:(UIColor*)color andHeight:(CGFloat)height {
    CGRect rect = CGRectMake(0.0, 0.0, 1.0, height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

// 添加話筒按鈕
- (void)addVoiceButton:(UIView *)view {
    if (!self.voiceButton) {
        self.voiceButton = [UIButton buttonWithType:UIButtonTypeCustom];
    }

    [self.voiceButton setImage:[UIImage imageNamed:@"voice"] forState:UIControlStateNormal];
    [self.voiceButton addTarget:self action:@selector(say) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:self.voiceButton];
    self.voiceButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.voiceButton addWidthConstraint:15];
    [self.voiceButton addHeightConstraint:15];
    [self.voiceButton addTopConstraintToView:view constant:8];
    [self.voiceButton addTrailingConstraintToView:view constant:- 15];
}

// 點(diǎn)擊話筒觸發(fā)該方法
- (void)say {
  //  self.prompt = @"在講話哦！";
}

補(bǔ)充：修改UISearchBar寬高

UISearchBar 有默認(rèn)的布局樣式，我們想要修改他的寬高，需要重寫(xiě)layoutSubviews 方法。然后在這個(gè)方法里面修改UISearchBarTextField的寬高。

實(shí)現(xiàn)代碼

- (void)layoutSubviews {
    [super layoutSubviews];
    UITextField *textField = [self valueForKey:@"searchBarTextField"];

    if (textField) {
        textField.frame = CGRectMake(50, 10, self.bounds.size.width - 100, 35);
    }
}

• 效果圖：

  
  
  自定義搜索框的寬高

關(guān)注我的微信公眾號(hào)：“豆沙包小姐”！一個(gè)喜歡閱讀，喜歡寫(xiě)字的女孩子，希望我的文字你能喜歡！謝謝你那么好看還能看我的文章到末尾處，祝陌生的你一切都好！