iOS實現(xiàn)簡易的導(dǎo)航欄顏色漸變實例代碼
前言
很多App首頁要做成類似天貓和京東的導(dǎo)航欄,實現(xiàn)在頁面滑動過程中導(dǎo)航欄漸變的效果。筆者之前在項目里用過一個三方,后來更新版本失效了,于是決定結(jié)合自己對導(dǎo)航欄的認(rèn)識來實現(xiàn)一下這個功能。完成一個簡易的iOS導(dǎo)航欄顏色漸變方案。
【文末附運(yùn)行效果及demo】,下面話不多說了,來一起看看詳細(xì)的介紹吧
思考與原理
如何給導(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ū)域,我們可以對它進(jìn)行自定義,同時也要考慮當(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]; }
效果展示
總結(jié)
- 由于系統(tǒng)自帶的導(dǎo)航欄經(jīng)常不能滿足需求,因此在開發(fā)中導(dǎo)航欄經(jīng)常需要自定義,哪怕只是修改背景色。
- 了解導(dǎo)航欄的結(jié)構(gòu)處理起來會更容易。
- 自定義導(dǎo)航欄也要考慮和其他頁面的導(dǎo)航欄之間的相互影響。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
iOS開發(fā)實現(xiàn)隨機(jī)圖片驗證碼封裝
這篇文章主要介紹了iOS開發(fā)實現(xiàn)隨機(jī)圖片驗證碼封裝,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08iOS Swift創(chuàng)建代理協(xié)議的多種方式示例
這篇文章主要給大家介紹了關(guān)于iOS Swift創(chuàng)建代理協(xié)議的多種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12iOS11上Xcode9 AppIcon 圖標(biāo)不顯示
升級到iOS11系統(tǒng)下自己的項目桌面app圖標(biāo)不見了,是什么原因呢,經(jīng)過一番查找,終于發(fā)現(xiàn)問題所在,現(xiàn)在分享給大家2017-11-11IOS 粒子系統(tǒng) (CAEmitterLayer)實例詳解
這篇文章主要介紹了IOS 粒子系統(tǒng) (CAEmitterLayer)實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09iOS使用runtime修改文本框(TextField)的占位文字顏色
相信大家都知道TextField默認(rèn)的占位顏色也是深灰色,這個顏色比較難看清,這篇文章給大家介紹如何使用runtime修改TextField文本框的占位文字顏色,有需要的可以參考借鑒.2016-09-09