iOS定制UISearchBar導(dǎo)航欄同步iOS11的方法
系統(tǒng)原生的UISearchBar在iOS 11經(jīng)歷了一次變革，高度由原來的44變成了56 (使用默認(rèn)高度的估計(jì)都被坑了)，樣式也發(fā)生了些微的變化,比如在未輸入狀態(tài)下圓角變化,放大鏡圖標(biāo)和文本的文字不再居中而是靠左了。具體看圖
一些主流App也常見在導(dǎo)航欄嵌入searchBar，以網(wǎng)易云音樂和知乎為例，左邊是主頁，右邊是搜索頁面 (注意光標(biāo))。
實(shí)現(xiàn)思路與案例
核心思想是設(shè)置導(dǎo)航欄的titleView和左右的barButtonItem。主要有3種方式
- 首頁導(dǎo)航欄的titleView使用button來實(shí)現(xiàn)，搜索頁面使用searchBar。
- 首頁和搜索頁面導(dǎo)航欄的titleView都是用searchBar，searchBar的樣式針對兩個頁面做不同的修改。這種方式可以重用我們定制的searchBar，減少冗余。
- 首頁導(dǎo)航欄titleView使用button來實(shí)現(xiàn)，搜索頁面的使用textField。這種方式更徹底，更靈活，相對也更復(fù)雜一些。
為什么上面的titleView說是button不是其他的？其他的當(dāng)然也可以實(shí)現(xiàn)。button自帶imageView和titleLabel，只需要設(shè)置偏移量更容易達(dá)到我們想要的，而且視圖層級更少，在流暢性方面更有保證些。
案例
網(wǎng)易云音樂首頁和搜索頁面的導(dǎo)航欄視圖層級，titleView都使用MCSearchBar來實(shí)現(xiàn)，并且設(shè)置了導(dǎo)航欄左右兩邊的按鈕 。這類似上文所說的第二種思路。
圖中可以清楚看到知乎首頁導(dǎo)航欄由2個button組成，搜索頁面使用了textField，這類似上文提到的第三種思路。
實(shí)戰(zhàn)
通過自定義SearchBar實(shí)現(xiàn)一個如下樣式的導(dǎo)航欄
先自定義一個UISearchBar的初始化方法，觀察一下首頁和搜索頁的異同，像searchField的大小背景色是一致的，可以這部分可以直接給定，而placeholder是不一樣的，所以應(yīng)該在調(diào)用的時候提供。以此類推，新建一個OHSearchBar類，一個初始化方法
- (instancetype)initWithFrame:(CGRect)frame placeholder:(NSString *)placeholder textFieldLeftView:(UIImageView *)leftView showCancelButton:(BOOL)showCancelButton tintColor:(UIColor *)tintColor {
if (self = [super initWithFrame:frame]) {
self.frame = frame;
self.tintColor = tintColor; //光標(biāo)顏色
self.barTintColor = [UIColor whiteColor];
self.placeholder = placeholder;
self.showsCancelButton = showCancelButton;
self.leftView = leftView; // 用來代替左邊的放大鏡
[self setImage:[UIImage imageNamed:@"clear"] forSearchBarIcon:UISearchBarIconClear state:UIControlStateNormal]; // 替換輸入過程中右側(cè)的clearIcon
}
return self;
}
新建一個首頁OHHomeViewController，設(shè)置導(dǎo)航欄的titleView和rightBarButton
// navigation buttom
UIButton *messageButton = [UIButton buttonWithType:UIButtonTypeSystem];
[messageButton setImage:[UIImage imageNamed:@"msg"] forState:UIControlStateNormal];
messageButton.bounds = CGRectMake(0, 0, 30, 30);
UIBarButtonItem *messageBarButton = [[UIBarButtonItem alloc] initWithCustomView:messageButton];
self.navigationItem.rightBarButtonItem = messageBarButton;
// search bar
UIImageView *leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"scan"]];
leftView.bounds = CGRectMake(0, 0, 24, 24);
self.ohSearchBar = [[OHSearchBar alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)
placeholder:@"點(diǎn)擊我跳轉(zhuǎn)"
textFieldLeftView:leftView
showCancelButton:NO
tintColor:[UIColor clearColor]];
self.navigationItem.titleView = self.ohSearchBar;
讓我們來看下效果，左邊為iOS 9，右邊iOS 11
這時候可以看到幾處差異
- searchBar的高度
- searchBar的textField的放大鏡和文字位置
- textField的圓角不一致
- 更細(xì)心的還會發(fā)現(xiàn)，textField的位置不一致
解決方法： 第一和第二個問題，判斷設(shè)備是否是iOS 11，若是則設(shè)置其高度，不是則讓其placeholder居左。關(guān)鍵代碼如下
if ([[UIDevice currentDevice] systemVersion].doubleValue >= 11.0) {
[[self.heightAnchor constraintEqualToConstant:44.0] setActive:YES];
} else {
[self setLeftPlaceholder];
}
- (void)setLeftPlaceholder {
SEL centerSelector = NSSelectorFromString([NSString stringWithFormat:@"%@%@", @"setCenter", @"Placeholder:"]);
if ([self respondsToSelector:centerSelector]) {
BOOL centeredPlaceholder = NO;
NSMethodSignature *signature = [[UISearchBar class] instanceMethodSignatureForSelector:centerSelector];
NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
[invocation setTarget:self];
[invocation setSelector:centerSelector];
[invocation setArgument:¢eredPlaceholder atIndex:2];
[invocation invoke];
}
}
對于第三和第四個問題，用KVC獲取textField，并對其進(jìn)行定制。令textField位置、大小、圓角一致。
- (void)layoutSubviews{
[super layoutSubviews];
// search field
UITextField *searchField = [self valueForKey:@"searchField"];
searchField.backgroundColor = DARK_BLUE_COLOR;
searchField.textColor = [UIColor whiteColor];
searchField.font = [UIFont systemFontOfSize:16];
searchField.leftView = self.leftView;
searchField.frame = CGRectMake(0, 8, SCREEN_WIDTH, 28);
searchField.layer.cornerRadius = 5;
searchField.layer.masksToBounds = YES;
[searchField setValue:[UIColor whiteColor] forKeyPath:@"placeholderLabel.textColor"];
[self setValue:searchField forKey:@"searchField"];
self.searchTextPositionAdjustment = (UIOffset){10, 0}; // 光標(biāo)偏移量
}
同樣的，先看下運(yùn)行效果
原本以為這下是沒什么問題的，結(jié)果簡直是坑
textFild的長度、位置、圓角都不一樣 解釋下這里出現(xiàn)的問題
觀察上方圖片上方的searchBar，會發(fā)現(xiàn)textField左邊是圓角，右邊是直角，說明是被截取的。導(dǎo)航欄titleView的范圍就劃分到了那個部分，而下邊的searchBar連rightBarButton都不放過，直接搶占了位置。推測這是由于iOS 11導(dǎo)航欄視圖層級變化產(chǎn)生的，可以這里了解下 www.jianshu.com/p/352f101d6… ，或者自行科普，不詳細(xì)展開。所以對于searchBar的size設(shè)置要小心了，盡量控制在合適的范圍。
textField的圓角是不一致的，自定義圓角大小時，取消其本身的圓角樣式
searchField.borderStyle = UITextBorderStyleNone;
查看視圖層級會發(fā)現(xiàn)，iOS 11以下，設(shè)置titleView，x的默認(rèn)坐標(biāo)居然是12，而iOS 11是0。所以設(shè)置textField的x坐標(biāo)的話，在iOS 11下必須多出12才會是一致的位置。
修改代碼上面的代碼
- (void)layoutSubviews{
[super layoutSubviews];
// search field
UITextField *searchField = [self valueForKey:@"searchField"];
searchField.backgroundColor = DARK_BLUE_COLOR;
searchField.textColor = [UIColor whiteColor];
searchField.font = [UIFont systemFontOfSize:16];
searchField.leftView = self.leftView;
if (@available(iOS 11.0, *)) {
// 查看視圖層級，在iOS 11之前searchbar的x是12
searchField.frame = CGRectMake(12, 8, SCREEN_WIDTH*0.8, 28);
} else {
searchField.frame = CGRectMake(0, 8, SCREEN_WIDTH*0.8, 28);
}
searchField.borderStyle = UITextBorderStyleNone;
searchField.layer.cornerRadius = 5;
searchField.layer.masksToBounds = YES;
[searchField setValue:[UIColor whiteColor] forKeyPath:@"placeholderLabel.textColor"];
[self setValue:searchField forKey:@"searchField"];
self.searchTextPositionAdjustment = (UIOffset){10, 0}; // 光標(biāo)偏移量
}
這時候就是我們想要的結(jié)果了。
首頁暫時告一段落，接著開始我們的搜索頁面。與首頁不同的是需要searchBar與searchController配合使用。新建一個OHSearchController類 添加一個屬性
@property (nonatomic, strong) OHSearchBar *ohSearchBar;
初始化代碼
- (instancetype)initWithSearchResultsController:(UIViewController *)searchResultsController searchBarFrame:(CGRect)searchBarFrame placeholder:(NSString *)placeholder textFieldLeftView:(UIImageView *)leftView showCancelButton:(BOOL)showCancelButton barTintColor:(UIColor *)barTintColor{
if (self = [super initWithSearchResultsController:searchResultsController]) {
self.ohSearchBar = [[OHSearchBar alloc] initWithFrame:searchBarFrame
placeholder:placeholder
textFieldLeftView:leftView
showCancelButton:YES
tintColor:barTintColor];
UIButton *button = [self.ohSearchBar valueForKey:@"cancelButton"];
button.tintColor = [UIColor whiteColor];
[button setTitle:@"取消" forState:UIControlStateNormal];
[self.ohSearchBar setValue:button forKey:@"cancelButton"];
}
return self;
}
接著是我們的視圖控制器OHSearchViewController
UIImageView *leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search"]];
leftView.bounds = CGRectMake(0, 0, 24, 24);
self.ohSearchController = [[OHSearchController alloc] initWithSearchResultsController:self
searchBarFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)
placeholder:@"請輸入搜索內(nèi)容進(jìn)行搜索"
textFieldLeftView:leftView
showCancelButton:YES
barTintColor:BASE_BLUE_COLOR];
[self.ohSearchController.ohSearchBar becomeFirstResponder];
self.ohSearchController.ohSearchBar.delegate = self;
[self.ohSearchController.ohSearchBar setLeftPlaceholder];
self.navigationItem.titleView = self.ohSearchController.ohSearchBar;
self.navigationItem.hidesBackButton = YES;
完成這一步后到了交互環(huán)節(jié)了，點(diǎn)擊首頁的searchBar跳轉(zhuǎn)搜索頁面，點(diǎn)擊搜索頁面的取消按鈕返回到首頁。 首頁設(shè)置searchbar的代理，并完成一下代理方法
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar {
OHSearchViewController *ohSearchViewController = [[OHSearchViewController alloc] init];
[self.navigationController pushViewController:ohSearchViewController animated:NO];
return YES;
}
搜索頁設(shè)置searchbar的代理，并完成一下代理方法
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
[self.navigationController popViewControllerAnimated:NO];
}
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.ohSearchController.ohSearchBar resignFirstResponder];
// 讓取消按鈕一直處于激活狀態(tài)
UIButton *cancelBtn = [searchBar valueForKey:@"cancelButton"];
cancelBtn.enabled = YES;
}
這時候問題又出現(xiàn)了，點(diǎn)擊搜索頁面的取消按鈕，沒有跳回首頁而是還在這個頁面。但是可以看到屏幕的閃動。通過打印消息發(fā)現(xiàn)，點(diǎn)了取消按鈕，執(zhí)行了首頁的- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar方法。 仔細(xì)推敲之后想明白了原因是沒有取消第一響應(yīng)者，加上導(dǎo)航欄的交互機(jī)制，pop到上個頁面的時候并不會進(jìn)行頁面刷新導(dǎo)致了這個問題。 解決辦法在首頁要push搜索頁面的時候取消第一響應(yīng)者
- (void)viewWillDisappear:(BOOL)animated {
[self.ohSearchBar resignFirstResponder];
}
到此，便大功告成了。可以看下源碼加深理解。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- iOS 封裝導(dǎo)航欄及返回,獲取控件所在控制器的實(shí)例
- 簡單好用的iOS導(dǎo)航欄封裝.runtime屬性控制實(shí)例代碼
- 關(guān)于iOS導(dǎo)航欄返回按鈕問題的解決方法
- iOS實(shí)現(xiàn)頂部標(biāo)簽式導(dǎo)航欄及下拉分類菜單
- IOS仿今日頭條滑動導(dǎo)航欄
- 詳解iOS11關(guān)于導(dǎo)航欄問題
- iOS應(yīng)用開發(fā)中導(dǎo)航欄按鈕UIBarButtonItem的添加教程
- iOS如何去掉導(dǎo)航欄（UINavigationBar）下方的橫線
- iOS界面跳轉(zhuǎn)時導(dǎo)航欄和tabBar的隱藏與顯示功能
- iOS導(dǎo)航欄控制的一些總結(jié)
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ios xcode警告與錯誤的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
iOS開發(fā)中使app獲取本機(jī)通訊錄的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了iOS開發(fā)中使app獲取本機(jī)通訊錄的實(shí)現(xiàn)代碼實(shí)例,主要用到了AddressBook.framework和AddressBookUI.framework,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了iOS中使用ZBar掃描二維碼自定義掃描界面,需要的朋友可以參考下2017-02-02
UIImage加載圖片Images.xcassets加載方法的影響
這篇文章主要介紹了UIImage加載圖片Images.xcassets加載方法的影響的相關(guān)資料,需要的朋友可以參考下2016-12-12
下面小編就為大家分享一篇詳談iPhoneX截圖如何帶"劉海"和圓角，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章給大家介紹了在IOS開發(fā)中常用視圖的四種切換方式以及這四種方式的優(yōu)缺點(diǎn)，這四種方式包括：push,pop、modal、切換窗口的根控制器和添加子視圖，有需要的可以參考借鑒。2016-08-08
本人主要介紹了IOS開發(fā)環(huán)境windows化攻略，需要的朋友可以參考下2013-06-06
iOS逆向工程使用dumpdecrypted工具給App脫殼
這篇文章主要介紹了iOS逆向工程使用dumpdecrypted工具給App脫殼的相關(guān)資料,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
手勢識別在iOS上非常重要，手勢操作移動設(shè)備的重要特征，極大的增加了移動設(shè)備使用便捷性。通過本教程給大家介紹加載帶有手勢識別器的XIB文件需注意哪些問題，需要的朋友可以參考下2015-08-08
IOS 調(diào)整內(nèi)存中的圖片大小實(shí)例詳解
這篇文章主要介紹了IOS 調(diào)整內(nèi)存中的圖片大小實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04