iOS--UISearchBar 屬性、方法詳解及應(yīng)用（自定義搜索框樣式）

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

在這里我還是要推薦下我自己建的iOS開發(fā)學(xué)習(xí)群：680565220，群里都是學(xué)ios開發(fā)的，如果你正在學(xué)習(xí)ios ，小編歡迎你加入，今天分享的這個案例已經(jīng)上傳到群文件，大家都是軟件開發(fā)黨，不定期分享干貨（只有iOS軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的iOS進階資料和高級開發(fā)教程

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

UISearchBar 的屬性

UISearchBar 的方法

自定義 UISearchBar 的樣式

1. UISearchBar 的屬性

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

- (instancetype)init?

- (instancetype)initWithFrame:(CGRect)frame?

- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder?

這三個初始化方法是我們常見的初始化 UIView 以及它的子類的方法，比較常見，而且也不是介紹重點，所以這里不展開說明。

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;? ??

// 占位符，默認nil, 若有值則在輸入文本后消失

@property(nullable,nonatomic,copy)? ?NSString *placeholder;??

效果圖：

prompt 和 placeholder

輸入文本為 text 后 placeholder 消失

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

屬性

// 搜索框右側(cè)是否顯示圖書按鈕?

@property(nonatomic)? BOOL showsBookmarkButton;? ?

//搜索框右側(cè)是否顯示取消按鈕?

@property(nonatomic) BOOL showsCancelButton;??

//搜索框右側(cè)是否顯示搜索結(jié)果按鈕? ?

@property(nonatomic) BOOL showsSearchResultsButton;?

// 搜索結(jié)果按鈕為選中狀態(tài)

@property(nonatomic, getter=isSearchResultsButtonSelected) BOOL searchResultsButtonSelected；

以上四個屬性的默認值都是 NO

效果圖：

showsBookmarkButton = YES 效果

showsCancelButton = YES 效果

showsSearchResultsButton = YES 效果

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

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

屬性

// 風(fēng)格顏色，可用于修改輸入框的光標(biāo)顏色，取消按鈕和選擇欄被選中時候都會變成設(shè)置的顏色

@property(null_resettable, nonatomic,strong) UIColor *tintColor;

// 搜索框背景顏色

@property(nullable, nonatomic,strong) UIColor *barTintColor;

測試代碼

? ? 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,? ? // 默認樣式，和UISearchBarStyleProminent 一樣

? ? UISearchBarStyleProminent,? // 顯示背景，常用在my Mail, Messages and Contacts

? ? UISearchBarStyleMinimal? ? ?// 不顯示背景，系統(tǒng)自帶的背景色無效，自定義的有效，常用在Calendar, Notes and Music

}?

效果圖：

UISearchBarStyleMinimal 不顯示背景

UISearchBarStyleDefault 和 UISearchBarStyleProminent 都顯示背景

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

屬性

// 選擇按鈕試圖的按鈕標(biāo)題? ??

@property(nullable, nonatomic,copy) NSArray *scopeButtonTitles ;?

// 選中的按鈕下標(biāo)值 ，默認 0. 如果超出范圍則忽略

@property(nonatomic) NSInteger? selectedScopeButtonIndex ;?

// 是否顯示搜索欄的附件選擇按鈕視圖

@property(nonatomic) BOOL showsScopeBar;

測試代碼

? ? 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;

測試代碼

? ? //設(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;

測試代碼

? ? self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(5, 3);

? ? self.searchTextPositionAdjustment =? UIOffsetMake(10, 5);

效果圖：

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

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

2. UISearchBar 的方法

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

方法：

// 設(shè)置是否動畫效果的顯示或隱藏取消按鈕

?- (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated?

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

測試代碼：

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {

? ? NSLog(@"開始輸入搜索內(nèi)容");

? ? [searchBar setShowsCancelButton:YES animated:YES]; // 動畫顯示取消按鈕

}

效果圖：

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

測試代碼：

? ? 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)這個圖片只是設(shè)置在三個按鈕的底部視圖，而大的外面的空余背景依舊是灰色，對比1.7中使用屬性UIImage *scopeBarBackgroundImage 設(shè)置的背景圖片，發(fā)現(xiàn)使用屬性設(shè)置背景圖片不會有空余的灰色背景,該屬性針對的是大的scopeBar, 而不是一個scopeBarButton，這一點需要注意區(qū)分。

2.3 設(shè)置（獲取）搜索框的圖標(biāo)（包括搜索圖標(biāo)、清除輸入的文字的圖標(biāo)、圖書圖標(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 有四個枚舉值：

typedef NS_ENUM(NSInteger, UISearchBarIcon) {

? ? UISearchBarIconSearch, // 搜索框放大鏡圖標(biāo)

? ? UISearchBarIconClear , // 搜索框右側(cè)可用于清除輸入的文字的圖標(biāo)x

? ? UISearchBarIconBookmark , // 搜索框右側(cè)的圖書圖標(biāo)

? ? UISearchBarIconResultsList , // 搜索框右側(cè)的搜索結(jié)果列表圖標(biāo)

};

測試代碼

? 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)改變，至于其他的兩個圖標(biāo)仿照上面代碼修改即可實現(xiàn)。

2.4 設(shè)置（獲取）選擇按鈕視圖的分割線圖片、按鈕上顯示的標(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 *)attributes forState:(UIControlState)state;

// 獲取選擇按鈕視圖的標(biāo)題樣式

- (nullable NSDictionary *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state

測試代碼

? ?self.showsScopeBar = YES;

? ?self.scopeButtonTitles = @[@"One", @"Two", @"Three", @"Four"];

? ?// 設(shè)置選擇按鈕視圖的分割線圖片為一個橘色的線條

? ?[self setScopeBarButtonDividerImage:[UIImage imageNamed:@"divider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];

? ?// 設(shè)置選擇按鈕視圖的標(biāo)題樣式為20號橘色空心的系統(tǒng)字體

? ?NSDictionary *attributeDic = @{NSFontAttributeName : [UIFont systemFontOfSize:20] , NSStrokeColorAttributeName : [UIColor orangeColor] , NSStrokeWidthAttributeName : @(3)};

? ?[self setScopeBarButtonTitleTextAttributes:attributeDic forState:UIControlStateNormal];

效果圖

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

2.5 設(shè)置（獲取）搜索框四種圖標(biāo)的偏移量

（評論里的小伙伴說不管怎樣運行搜索圖標(biāo)總是在左邊，測試后發(fā)現(xiàn)在iOS11系統(tǒng)上搜索圖標(biāo)默認在左邊，而我當(dāng)時寫文章時沒有升級模擬器為iOS11，所以非常感謝她的評論，不然自己也沒注意到。總之就是如果想要更改搜索圖標(biāo)的位置，可以使用這個方法哦，親測有效）

方法

//? 設(shè)置搜索框圖標(biāo)的偏移量

- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon;

//? 獲取搜索框圖標(biāo)的偏移量

- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon;

測試代碼

? ? self.placeholder = @"搜索";

? ? [self setPositionAdjustment:UIOffsetMake(15, 5) forSearchBarIcon:UISearchBarIconSearch];

效果圖

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

2.6 UISearchBarDelegate代理方法

方法

// 1. 將要開始編輯文本時會調(diào)用該方法，返回 NO 將不會變成第一響應(yīng)者

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;? ? ? ? ? ? ? ? ? ? ??

// 2. 開始輸入文本會調(diào)用該方法

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar;? ? ? ? ? ? ? ? ? ? ?

// 3. 將要結(jié)束編輯文本時會調(diào)用該方法，返回 NO 將不會釋放第一響應(yīng)者

- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar;?

?// 4. 結(jié)束編輯文本時調(diào)用該方法

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar;? ? ?

// 5. 文本改變會調(diào)用該方法（包含clear文本）

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText;?

// 6. 文字改變前會調(diào)用該方法，返回NO則不能加入新的編輯文字

- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text ;

// 7. 鍵盤上的搜索按鈕點擊的會調(diào)用該方法

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar;? ? ?

// 8. 搜索框右側(cè)圖書按鈕點擊會調(diào)用該方法

- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar ;

?// 9.點擊取消按鈕會調(diào)用該方法

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar;? ?

// 10.搜索結(jié)果列表按鈕被按下會調(diào)用該方法

- (void)searchBarResultsListButtonClicked:(UISearchBar *)searchBar ;?

// 11. 搜索框的附屬按鈕視圖中切換按鈕會調(diào)用該方法

- (void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope;

測試代碼

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {

? ? return YES;

}

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {

? ? searchBar.prompt = @"1.開始編輯文本";

? ? [searchBar setShowsCancelButton:YES animated:YES]; // 動畫效果顯示取消按鈕

}

- (BOOL)searchBar:(UISearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {

? ? return YES;

}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {

? ? searchBar.prompt = @"2.在改變文本過程中。。。";

}

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {

? ? searchBar.prompt = @"3. 點擊鍵盤上的搜索按鈕";

}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {

? ? searchBar.prompt = @"4. 點擊取消按鈕";

? ? searchBar.text = @"";

? ? [self setShowsCancelButton:NO animated:YES];

? ? // 如果希望在點擊取消按鈕調(diào)用結(jié)束編輯方法需要讓加上這句代碼

? ? //[searchBar resignFirstResponder];

}

- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{

? ? return YES;

}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {

? ? ?searchBar.prompt = @"5.已經(jīng)結(jié)束編輯文本";

}

效果圖

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

gif1

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

gif2

3. 自定義 UISearchBar 的樣式

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

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

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

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

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

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

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

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

實現(xiàn)代碼

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

// 委托

- (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è)計

- (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è)置默認文字顏色

? ? ? ? ? ? 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];

? ? ? ? }

? ? }

}

// 畫指定高度和顏色的圖片

- (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];

}

// 點擊話筒觸發(fā)該方法

- (void)say {

? //? self.prompt = @"在講話哦！";

}

補充：修改UISearchBar寬高

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

實現(xiàn)代碼

- (void)layoutSubviews {

? ? [super layoutSubviews];

? ? UITextField *textField = [self valueForKey:@"searchBarTextField"];

? ? if (textField) {

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

? ? }

}

效果圖：

自定義搜索框的寬高

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容