這篇文章將為大家詳細講解有關(guān)iOS如何實現(xiàn)簡易的導(dǎo)航欄顏色漸變效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元達茂旗做網(wǎng)站,已為上家服務(wù),為達茂旗各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

思考與原理

如何給導(dǎo)航欄設(shè)置顏色？

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

以上兩個方法都可以為導(dǎo)航欄添加顏色，但是方法一的效果并非此處所需。

直接設(shè)置背景色的效果

原因在于 UINavigationBar 的結(jié)構(gòu)中添加了 UIView 、 UIImageView 、 UILabel等控件，覆蓋了 UINavigationBar 。

方法二的效果符合預(yù)期。

UINavigationBar結(jié)構(gòu)圖

如何將顏色轉(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ǎo)航欄設(shè)置背景？

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

實現(xiàn)

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

導(dǎo)航欄的隱藏與顯示

當(dāng)頁面下拉時隱藏導(dǎo)航欄，方法有兩個:

//方法一：[self.navigationController setNavigationBarHidden:YES];//方法二：self.navigationController.navigationBar.hidden = YES;

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

但是，方法一會出現(xiàn)一個bug，就是當(dāng)頁面初始狀態(tài)時 setNavigationBarHidden 為 YES，也就相當(dāng)于 navigationBar 那一刻是不存在的，那么導(dǎo)航欄上的控件也就自然看不到，而且 navigationBar的出現(xiàn)和消失會很突兀。

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

頁面切換的處理

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

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

封裝

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

//UINavigationBar+ChangeColor.m文件//核心方法- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY { if (offsetY < 0) { //下拉時導(dǎo)航欄隱藏 self.hidden = YES; }else { self.hidden = NO; //計算透明度，180為隨意設(shè)置的偏移量臨界值 CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180); //設(shè)置一個顏色并轉(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: ：傳入顏色、滑動視圖、臨界值來實現(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)時手動調(diào)用計算導(dǎo)航欄此時應(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];}

關(guān)于“iOS如何實現(xiàn)簡易的導(dǎo)航欄顏色漸變效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。