很多App首頁(yè)要做成類似天貓和京東的導(dǎo)航欄，實(shí)現(xiàn)在頁(yè)面滑動(dòng)過(guò)程中導(dǎo)航欄漸變的效果。筆者之前在項(xiàng)目里用過(guò)一個(gè)三方芜茵，后來(lái)更新版本失效了，于是決定結(jié)合自己對(duì)導(dǎo)航欄的認(rèn)識(shí)來(lái)實(shí)現(xiàn)一下這個(gè)功能倡蝙。完成一個(gè)簡(jiǎn)易的iOS導(dǎo)航欄顏色漸變方案夕晓。
【文末附運(yùn)行效果及demo】
PS：現(xiàn)有版本對(duì)代碼進(jìn)行了重構(gòu)，通過(guò)新增category并利用runtime的method swizzling實(shí)現(xiàn)兩行代碼輕松搞定悠咱。詳情參考README蒸辆。
思考與原理
如何給導(dǎo)航欄設(shè)置顏色？
//方法一
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
//方法二
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];
以上兩個(gè)方法都可以為導(dǎo)航欄添加顏色析既，但是方法一的效果并非此處所需躬贡。
原因在于 UINavigationBar 的結(jié)構(gòu)中添加了 UIView 、 UIImageView 眼坏、 UILabel等控件拂玻，覆蓋了 UINavigationBar 。
方法二的效果符合預(yù)期宰译。
如何將顏色轉(zhuǎn)換為圖片檐蚜？
直接貼代碼并附上注釋：
- (UIImage *)imageWithColor:(UIColor *)color {
//創(chuàng)建1像素區(qū)域并開始繪圖
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
//創(chuàng)建畫板并填充顏色和區(qū)域
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
//從畫板上獲取圖片并關(guān)閉圖片繪圖
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
如何在滑動(dòng)時(shí)為導(dǎo)航欄設(shè)置背景？
通常展示信息頁(yè)面都存放于滑動(dòng)視圖（UIScrollView沿侈、UITableView闯第、UICollectionView 等），這就不難想到可以在滑動(dòng)視圖的 scrollViewDidScroll: 這個(gè)方法里根據(jù)滑動(dòng)視圖縱向偏移量來(lái)計(jì)算顏色的透明度的缀拭。
實(shí)現(xiàn)
除了以上的問(wèn)題思考和基本原理咳短，實(shí)際實(shí)現(xiàn)過(guò)程中還有一些需要注意的內(nèi)容填帽。
導(dǎo)航欄的隱藏與顯示
當(dāng)頁(yè)面下拉時(shí)隱藏導(dǎo)航欄，方法有兩個(gè):
//方法一：
[self.navigationController setNavigationBarHidden:YES];
//方法二：
self.navigationController.navigationBar.hidden = YES;
以上兩個(gè)方法效果相同咙好，區(qū)別在于一個(gè)是操作 navigationController 的屬性（navigationBar 是 navigationController的一個(gè)屬性）篡腌，一個(gè)是操作navigationBar的屬性。
但是勾效，方法一會(huì)出現(xiàn)一個(gè)bug嘹悼，就是當(dāng)頁(yè)面初始狀態(tài)時(shí) setNavigationBarHidden 為 YES，也就相當(dāng)于 navigationBar 那一刻是不存在的层宫，那么導(dǎo)航欄上的控件也就自然看不到杨伙，而且 navigationBar的出現(xiàn)和消失會(huì)很突兀。
采用方法二效果會(huì)好很多卒密，因?yàn)?code>navigationBar本身是存在的，只是做了顯示和隱藏的操作棠赛，過(guò)渡也相對(duì)順滑哮奇。
頁(yè)面切換的處理
導(dǎo)航欄作為的公共區(qū)域，我們可以對(duì)它進(jìn)行自定義睛约，同時(shí)也要考慮當(dāng)前頁(yè)面的導(dǎo)航欄和其他頁(yè)面導(dǎo)航欄之間的相互影響鼎俘。
- 導(dǎo)航欄下面那條線其實(shí)是一張圖片，叫做
shadowImage辩涝，在viewWillAppear對(duì)其隱藏贸伐，又在viewWillDisappear對(duì)其做了還原。 - 為了保證回到該頁(yè)面時(shí)導(dǎo)航欄的顏色和離開時(shí)保持一致怔揩，在頁(yè)面即將呈現(xiàn)時(shí)手動(dòng)調(diào)了一下
scrollViewDidScroll:方法來(lái)計(jì)算當(dāng)前應(yīng)該呈現(xiàn)的顏色捉邢。
封裝
為了方便使用，封裝一個(gè) UINavigationBar的category： UINavigationBar+ChangeColor商膊。
//UINavigationBar+ChangeColor.m文件
//核心方法
- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY {
if (offsetY < 0) {
// 下拉時(shí)導(dǎo)航欄隱藏
self.hidden = YES;
}else {
self.hidden = NO;
// 計(jì)算透明度伏伐，180為隨意設(shè)置的偏移量臨界值
CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180);
// 設(shè)置一個(gè)顏色并轉(zhuǎn)化為圖片
UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
[self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
self.translucent = alpha >= 1.0f ? NO : YES;
}
}
使用方法：
-
star：隱藏導(dǎo)航欄下的橫線，將背景色置空晕拆，一般在viewWillAppear中調(diào)用藐翎，； -
changeColor:WithScrollView:AndValue:：傳入顏色实幕、滑動(dòng)視圖吝镣、臨界值來(lái)實(shí)現(xiàn)，一般在scrollViewDidScroll中調(diào)用昆庇； -
reset：顯示導(dǎo)航欄下橫線末贾，還原導(dǎo)航欄，一般在viewWillDisappear中調(diào)用整吆。
//VC.m文件
/* 頁(yè)面即將顯示 */
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController.navigationBar start];
//該頁(yè)面呈現(xiàn)時(shí)手動(dòng)調(diào)用計(jì)算導(dǎo)航欄此時(shí)應(yīng)當(dāng)顯示的顏色
[self scrollViewDidScroll:_tableview];
}
/* 頁(yè)面即將消失 */
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController.navigationBar reset];
}
/* 滑動(dòng)過(guò)程中做處理 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
[self.navigationController.navigationBar changeColor:[UIColor redColor] withOffsetY:scrollView.contentOffset.y];
}
總結(jié)
- 由于系統(tǒng)自帶的導(dǎo)航欄經(jīng)常不能滿足需求未舟，因此在開發(fā)中導(dǎo)航欄經(jīng)常需要自定義圈暗，哪怕只是修改背景色。
- 了解導(dǎo)航欄的結(jié)構(gòu)處理起來(lái)會(huì)更容易裕膀。
- 自定義導(dǎo)航欄也要考慮和其他頁(yè)面的導(dǎo)航欄之間的相互影響员串。
