很多APP都會涉及到搜索框，蘋果也為我們提供了默認的搜索框UISearchBar。但實際項目中我們通常需要更改系統默認搜索框的樣式。為了實現這一目標，我們需要先搞懂 UISearchBar 的屬性及方法。在系統的掌握了這些基礎的前提下才能更好的去應用它，包括修改樣式、或者是模仿系統搜索框的樣式自定義一個自己的搜索框等。
本文主要介紹內容分為以下三個部分：
UISearchBar 的屬性
UISearchBar 的方法
自定義 UISearchBar 的樣式
1. UISearchBar 的屬性
介紹之前先說一下 UISearchBar 的初始化方法：UISearchBar 是 UIView 的子類，它的初始化方法有三種：
- (instancetype)init
- (instancetype)initWithFrame:(CGRect)frame
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder
這三個初始化方法是我們常見的初始化 UIView 以及它的子類的方法，比較常見，而且也不是介紹重點，所以這裡不展開說明。
1.1 搜索框風格
屬性
// 搜索框風格
@property(nonatomic) UIBarStyle barStyle;
UIBarStyle 有四種枚舉值，但後兩種已經禁用。
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 搜索框右側的按鈕
屬性
// 搜索框右側是否顯示圖書按鈕
@property(nonatomic) BOOL showsBookmarkButton;
//搜索框右側是否顯示取消按鈕
@property(nonatomic) BOOL showsCancelButton;
//搜索框右側是否顯示搜索結果按鈕
@property(nonatomic) BOOL showsSearchResultsButton;
// 搜索結果按鈕為選中狀態
@property(nonatomic, getter=isSearchResultsButtonSelected) BOOL searchResultsButtonSelected；
以上四個屬性的默認值都是 NO
效果圖：
showsBookmarkButton = YES 效果
showsCancelButton = YES 效果
showsSearchResultsButton = YES 效果
searchResultsButtonSelected = YES 效果，要結合showsSearchResultsButton = YES使用
1.4 風格顏色、背景顏色
屬性
// 風格顏色，可用於修改輸入框的光標顏色，取消按鈕和選擇欄被選中時候都會變成設置的顏色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
// 搜索框背景顏色
@property(nullable, nonatomic,strong) UIColor *barTintColor;
測試代碼
self.tintColor = [UIColor orangeColor]; //設置光標顏色為橘色
self.barTintColor = [UIColor grayColor]; //設置搜索框背景顏色為灰色
效果圖：
tintColor 和 barTintColor
1.5 搜索框樣式
屬性
// 搜索框樣式
@property (nonatomic) UISearchBarStyle searchBarStyle
它有三種枚舉值：
typedef NS_ENUM(NSUInteger, UISearchBarStyle) {
UISearchBarStyleDefault, // 默認樣式，和UISearchBarStyleProminent 一樣
UISearchBarStyleProminent, // 顯示背景，常用在my Mail, Messages and Contacts
UISearchBarStyleMinimal // 不顯示背景，系統自帶的背景色無效，自定義的有效，常用在Calendar, Notes and Music
}
效果圖：
UISearchBarStyleMinimal 不顯示背景
UISearchBarStyleDefault 和 UISearchBarStyleProminent 都顯示背景
1.6 搜索欄的附件選擇按鈕視圖
屬性
// 選擇按鈕試圖的按鈕標題
@property(nullable, nonatomic,copy) NSArray *scopeButtonTitles ;
// 選中的按鈕下標值 ，默認 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;
測試代碼
//設置搜索框背景圖片
UIImage *backgroundImage = [UIImage imageNamed:@"image001"];
self.backgroundImage = backgroundImage;
//搜索框附屬分欄條的背景顏色
UIImage *scopeBarBackgroundImage = [UIImage imageNamed:@"image002"];
self.scopeBarBackgroundImage = scopeBarBackgroundImage;
效果圖：
設置backgroundImage 和 scopeBarBackgroundImage
1.8 索框中文本框的背景偏移量和文本偏移量
屬性
// 搜索框中文本框的背景偏移量
@property(nonatomic) UIOffset searchFieldBackgroundPositionAdjustment;
// 搜索框中文本框的文本偏移量
@property(nonatomic) UIOffset searchTextPositionAdjustment;
測試代碼
self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(5, 3);
self.searchTextPositionAdjustment = UIOffsetMake(10, 5);
效果圖：
設置偏移量前後對比圖
PS: UITextInputAssistantItem *inputAssistantItem 、BOOL translucent 、UIView *inputAccessoryView 經過測試這三個屬性並不太清楚具體實現效果，之後會繼續深入了解一下，記在這裡，作為提醒，如果有誰剛好了解它們，希望能夠給與幫助，非常感謝。
2. UISearchBar 的方法
2.1 設置是否動畫效果的顯示或隱藏取消按鈕
方法：
// 設置是否動畫效果的顯示或隱藏取消按鈕
- (void)setShowsCancelButton:(BOOL)showsCancelButton animated:(BOOL)animated
通常在開始編輯文本時將調用該方法，讓取消按鈕顯示出來。
測試代碼：
-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
NSLog(@"開始輸入搜索內容");
[searchBar setShowsCancelButton:YES animated:YES]; // 動畫顯示取消按鈕
}
效果圖：
setShowsCancelButton: 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
測試代碼：
self.showsScopeBar = YES;
self.scopeButtonTitles = @[@"One", @"Two", @"Three"];
self.selectedScopeButtonIndex = 1;
// 設置搜索框背景圖片
[self setBackgroundImage:[UIImage imageNamed:@"image001"] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
// 設置選擇按鈕視圖的背景圖片
[self setScopeBarButtonBackgroundImage:[UIImage imageNamed:@"image002"] forState:UIControlStateNormal];
// 設置搜索框文本框的背景圖片
[self setSearchFieldBackgroundImage:[UIImage imageNamed:@"image003"] forState:UIControlStateNormal];
效果圖：
設置搜索框背景圖片、選擇按鈕視圖的背景圖片、文本框的背景圖片
我們可以觀察一下選擇按鈕視圖的背景圖片，發現這個圖片只是設置在三個按鈕的底部視圖，而大的外面的空餘背景依舊是灰色，對比1.7中使用屬性UIImage *scopeBarBackgroundImage 設置的背景圖片，發現使用屬性設置背景圖片不會有空餘的灰色背景,該屬性針對的是大的scopeBar, 而不是一個scopeBarButton，這一點需要注意區分。
2.3 設置（獲取）搜索框的圖標（包括搜索圖標、清除輸入的文字的圖標、圖書圖標、搜索結果列表圖標）
屬性
// 設置搜索框的圖標
- (void)setImage:(nullable UIImage *)iconImage forSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;
// 獲取搜索框的圖標
- (nullable UIImage *)imageForSearchBarIcon:(UISearchBarIcon)icon state:(UIControlState)state;
搜索框圖標 UISearchBarIcon 有四個枚舉值：
typedef NS_ENUM(NSInteger, UISearchBarIcon) {
UISearchBarIconSearch, // 搜索框放大鏡圖標
UISearchBarIconClear , // 搜索框右側可用於清除輸入的文字的圖標x
UISearchBarIconBookmark , // 搜索框右側的圖書圖標
UISearchBarIconResultsList , // 搜索框右側的搜索結果列表圖標
};
測試代碼
self.placeholder = @"搜索";
self.showsSearchResultsButton = YES;
// 設置搜索框放大鏡圖標
UIImage *searchIcon = [UIImage imageNamed:@"searchIcon"];
[self setImage:searchIcon forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
// 設置搜索結果列表圖標
UIImage *resultListIcon = [UIImage imageNamed:@"arrow"];
[self setImage:resultListIcon forSearchBarIcon:UISearchBarIconResultsList state:UIControlStateNormal];
效果圖
重新設置搜索框搜索圖標和顯示結果列表的圖標
可以發現搜索圖標和搜索結果列表圖標已經改變，至於其他的兩個圖標仿照上面代碼修改即可實現。
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 *)attributes forState:(UIControlState)state;
// 獲取選擇按鈕視圖的標題樣式
- (nullable NSDictionary *)scopeBarButtonTitleTextAttributesForState:(UIControlState)state
測試代碼
self.showsScopeBar = YES;
self.scopeButtonTitles = @[@"One", @"Two", @"Three", @"Four"];
// 設置選擇按鈕視圖的分割線圖片為一個橘色的線條
[self setScopeBarButtonDividerImage:[UIImage imageNamed:@"divider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal];
// 設置選擇按鈕視圖的標題樣式為20號橘色空心的系統字體
NSDictionary *attributeDic = @{NSFontAttributeName : [UIFont systemFontOfSize:20] , NSStrokeColorAttributeName : [UIColor orangeColor] , NSStrokeWidthAttributeName : @(3)};
[self setScopeBarButtonTitleTextAttributes:attributeDic forState:UIControlStateNormal];
效果圖
設置選擇按鈕視圖的分割線圖片和按鈕上顯示的標題樣式的效果圖
2.5 設置（獲取）搜索框四種圖標的偏移量
（評論裡的小夥伴說不管怎樣運行搜索圖標總是在左邊，測試後發現在iOS11系統上搜索圖標默認在左邊，而我當時寫文章時沒有升級模擬器為iOS11，所以非常感謝她的評論，不然自己也沒注意到。總之就是如果想要更改搜索圖標的位置，可以使用這個方法哦，親測有效）
方法
// 設置搜索框圖標的偏移量
- (void)setPositionAdjustment:(UIOffset)adjustment forSearchBarIcon:(UISearchBarIcon)icon;
// 獲取搜索框圖標的偏移量
- (UIOffset)positionAdjustmentForSearchBarIcon:(UISearchBarIcon)icon;
測試代碼
self.placeholder = @"搜索";
[self setPositionAdjustment:UIOffsetMake(15, 5) forSearchBarIcon:UISearchBarIconSearch];
效果圖
設置搜索圖標向有偏移15個單位，向下偏移5個單位後的效果圖
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;
測試代碼
- (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];
// 如果希望在點擊取消按鈕調用結束編輯方法需要讓加上這句代碼
//[searchBar resignFirstResponder];
}
- (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{
return YES;
}
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
searchBar.prompt = @"5.已經結束編輯文本";
}
效果圖
點擊取消按鈕但沒有釋放搜索框的第一響應者身份效果圖：
gif1
點擊取消按鈕用時釋放搜索框的第一響應者身份會調用結束編輯文本的方法：
gif2
3. 自定義 UISearchBar 的樣式
在自定義UISearchBar 樣式之前我們先來看一下UISearchBar的組成：
UISearchBar層次結構截圖
根據這個截圖我們可以概括為下圖：
簡單概括的UISearchBar層次結構
根據這個簡單的層次結構圖，我們可以更好的了解UISearchBar的組成部分，這樣有助於我們更方便的進行自定義樣式，下面開始自定義樣式！
目標搜索框樣式
首先看一下目標樣式
目標搜索框樣式.gif
實現代碼
代碼中添加約束和自定義顏色可參考之前寫的兩篇文章：約束和自定義顏色
// 委託
- (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;
}
// 樣式設計
- (void)modifyStyleByTraversal {
// 修改搜索框背景圖片為自定義的灰色
UIColor *backgroundImageColor = [UIColor colorwithHex:0xE3DFDA];
UIImage* clearImg = [self imageWithColor:backgroundImageColor andHeight:45.0];
self.backgroundImage = clearImg;
// 修改搜索框光標顏色
self.tintColor = [UIColor P2Color];
// 修改搜索框的搜索圖標
[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];
//設置輸入框的背景顏色
textField.clipsToBounds = YES;
textField.backgroundColor = [UIColor P1Color];
//設置輸入框邊框的圓角以及顏色
textField.layer.cornerRadius = 10.0f;
textField.layer.borderColor = [UIColor P2Color].CGColor;
textField.layer.borderWidth = 1;
//設置輸入字體顏色
textField.textColor = [UIColor P2Color];
//設置默認文字顏色
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];
}
// 點擊話筒觸發該方法
- (void)say {
// self.prompt = @"在講話哦！";
}
補充：修改UISearchBar寬高
UISearchBar 有默認的布局樣式，我們想要修改他的寬高，需要重寫layoutSubviews 方法。然後在這個方法裡面修改UISearchBarTextField的寬高。
實現代碼
- (void)layoutSubviews {
[super layoutSubviews];
UITextField *textField = [self valueForKey:@"searchBarTextField"];
if (textField) {
textField.frame = CGRectMake(50, 10, self.bounds.size.width - 100, 35);
}
}
效果圖：
自定義搜索框的寬高
作者：遇見0620
連結：https://www.jianshu.com/p/7e49a1c656e7