很多App首頁要做成類似天貓和京東的導(dǎo)航欄，實(shí)現(xiàn)在頁面滑動過程中導(dǎo)航欄漸變的效果。筆者之前在項(xiàng)目里用過一個(gè)三方，后來更新版本失效了，于是決定結(jié)合自己對導(dǎo)航欄的認(rèn)識來實(shí)現(xiàn)一下這個(gè)功能。完成一個(gè)簡易的iOS導(dǎo)航欄顏色漸變方案。
【文末附運(yùn)行效果及demo】
PS：現(xiàn)有版本對代碼進(jìn)行了重構(gòu)，通過新增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;
}
如何在滑動時(shí)為導(dǎo)航欄設(shè)置背景？
通常展示信息頁面都存放于滑動視圖（UIScrollView、UITableView、UICollectionView 等），這就不難想到可以在滑動視圖的 scrollViewDidScroll: 這個(gè)方法里根據(jù)滑動視圖縱向偏移量來計(jì)算顏色的透明度的。
實(shí)現(xiàn)
除了以上的問題思考和基本原理，實(shí)際實(shí)現(xiàn)過程中還有一些需要注意的內(nèi)容。
導(dǎo)航欄的隱藏與顯示
當(dāng)頁面下拉時(shí)隱藏導(dǎo)航欄，方法有兩個(gè):
//方法一：
[self.navigationController setNavigationBarHidden:YES];
//方法二：
self.navigationController.navigationBar.hidden = YES;
以上兩個(gè)方法效果相同，區(qū)別在于一個(gè)是操作 navigationController 的屬性（navigationBar 是 navigationController的一個(gè)屬性），一個(gè)是操作navigationBar的屬性。
但是，方法一會出現(xiàn)一個(gè)bug，就是當(dāng)頁面初始狀態(tài)時(shí) setNavigationBarHidden 為 YES，也就相當(dāng)于 navigationBar 那一刻是不存在的，那么導(dǎo)航欄上的控件也就自然看不到，而且 navigationBar的出現(xiàn)和消失會很突兀。
采用方法二效果會好很多，因?yàn)?code>navigationBar本身是存在的，只是做了顯示和隱藏的操作，過渡也相對順滑。
頁面切換的處理
導(dǎo)航欄作為的公共區(qū)域，我們可以對它進(jìn)行自定義，同時(shí)也要考慮當(dāng)前頁面的導(dǎo)航欄和其他頁面導(dǎo)航欄之間的相互影響。
- 導(dǎo)航欄下面那條線其實(shí)是一張圖片，叫做
shadowImage，在viewWillAppear對其隱藏，又在viewWillDisappear對其做了還原。 - 為了保證回到該頁面時(shí)導(dǎo)航欄的顏色和離開時(shí)保持一致，在頁面即將呈現(xiàn)時(shí)手動調(diào)了一下
scrollViewDidScroll:方法來計(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:：傳入顏色、滑動視圖、臨界值來實(shí)現(xiàn)，一般在scrollViewDidScroll中調(diào)用； -
reset：顯示導(dǎo)航欄下橫線，還原導(dǎo)航欄，一般在viewWillDisappear中調(diào)用。
//VC.m文件
/* 頁面即將顯示 */
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController.navigationBar start];
//該頁面呈現(xiàn)時(shí)手動調(diào)用計(jì)算導(dǎo)航欄此時(shí)應(yīng)當(dāng)顯示的顏色
[self scrollViewDidScroll:_tableview];
}
/* 頁面即將消失 */
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController.navigationBar reset];
}
/* 滑動過程中做處理 */
- (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)處理起來會更容易。
- 自定義導(dǎo)航欄也要考慮和其他頁面的導(dǎo)航欄之間的相互影響。
