簡易的iOS導航欄顏色漸變方案

iOS開發 · 發表 2018-10-18 13:27:36

摘要：很多App首頁要做成類似天貓和京東的導航欄，實現在頁面滑動過程中導航欄漸變的效果。筆者之前在專案裡用過一個三方，後來更新版本失效了，於是決定結合自己對導航欄的認識來實現一下這個功能。完成一個簡易的iOS導航欄顏色漸變方案。【文末附執行效果及demo】思考與原理如何給導航欄設定...

很多App首頁要做成類似天貓和京東的導航欄，實現在頁面滑動過程中導航欄漸變的效果。筆者之前在專案裡用過一個三方，後來更新版本失效了，於是決定結合自己對導航欄的認識來實現一下這個功能。完成一個簡易的iOS導航欄顏色漸變方案。

【文末附執行效果及demo】

思考與原理

如何給導航欄設定顏色？

//方法一
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

//方法二
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];

以上兩個方法都可以為導航欄新增顏色，但是方法一的效果並非此處所需。

直接設定背景色的效果

原因在於 UINavigationBar 的結構中添加了 UIView 、 UIImageView 、 UILabel等控制元件，覆蓋了 UINavigationBar 。

方法二的效果符合預期。

UINavigationBar結構圖

如何將顏色轉換為圖片？

直接貼程式碼並附上註釋：

- (UIImage *)imageWithColor:(UIColor *)color {

//建立1畫素區域並開始圖片繪圖
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);

//建立畫板並填充顏色和區域
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);

//從畫板上獲取圖片並關閉圖片繪圖
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return image;
}

如何在滑動時為導航欄設定背景？

通常展示資訊頁面都存在滑動檢視（UITableview 、 UICollectionView 等），這就不難想到可以在滑動檢視的 scrollViewDidScroll 這個方法里根據滑動檢視縱向偏移量來計算顏色的透明度的。

實現

除了以上的問題思考和基本原理，實際實現過程中還有一些需要注意的內容。

導航欄的隱藏與顯示

當頁面下拉時隱藏導航欄，方法有兩個:

//方法一：
[self.navigationController setNavigationBarHidden:YES];

//方法二：
self.navigationController.navigationBar.hidden = YES;

以上兩個方法效果相同，區別在於一個是操作 navigationController 的屬性（navigationBar 是 navigationController的一個屬性），一個是操作navigationBar的屬性。

但是，方法一會出現一個bug，就是當頁面初始狀態時 setNavigationBarHidden 為 YES，也就相當於 navigationBar 那一刻是不存在的，那麼導航欄上的控制元件也就自然看不到，而且 navigationBar的出現和消失會很突兀。

採用方法二效果會好很多，因為navigationBar本身是存在的，只是做了顯示和隱藏的操作，過渡也相對順滑很多。

頁面切換的處理

導航欄作為的公共區域，我們可以對它進行自定義，同時也要考慮當前頁面的導航欄和其他頁面導航欄之間的相互影響。

導航欄下面那條線其實是一張圖片，叫做 shadowImage，在 viewWillAppear對其隱藏，又在 viewWillDisappear對其做了還原。
頁面即將呈現時防止其他頁面回來其他頁面設定的導航欄背景色對本頁面造成影響，在 viewWillAppear 對導航欄背景色先做了置空處理。
為了保證回到該頁面時導航欄的顏色和離開時保持一致，在頁面即將呈現時手動調了一下 scrollViewDidScroll 方法來計算當前應該呈現的顏色。

封裝

為了方便使用，封裝一個 UINavigationBar的category： UINavigationBar+ChangeColor 。

//UINavigationBar+ChangeColor.m檔案

//核心方法
- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY {

if (offsetY < 0) {

//下拉時導航欄隱藏
self.hidden = YES;
}else {

self.hidden = NO;
//計算透明度，180為隨意設定的偏移量臨界值
CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180);

//設定一個顏色並轉化為圖片
UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
[self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

self.translucent = alpha >= 1.0f ? NO : YES;
}
}

使用方法：

star：隱藏導航欄下的橫線，將背景色置空，一般在viewWillAppear中呼叫，；
changeColor:WithScrollView:AndValue: ：傳入顏色、滑動檢視、臨界值來實現，一般在 scrollViewDidScroll中呼叫；
reset：顯示導航欄下橫線，還原導航欄，一般在 viewWillDisappear中呼叫。

//VC.m檔案

/* 頁面即將顯示 */
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];

[self.navigationController.navigationBar start];
//該頁面呈現時手動呼叫計算導航欄此時應當顯示的顏色
[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];
}

效果展示

ofollow,noindex">完整demo

總結

由於系統自帶的導航欄經常不能滿足需求，因此在開發中導航欄經常需要自定義，哪怕只是修改背景色。
瞭解導航欄的結構處理起來會更容易。
自定義導航欄也要考慮和其他頁面的導航欄之間的相互影響。

作者：六號先生117

連結：https://www.jianshu.com/p/10c71cb19b5e

簡易的iOS導航欄顏色漸變方案

您可能也會喜歡…