前言
很多app首頁要做成類似天貓和京東的導(dǎo)航欄，實(shí)現(xiàn)在頁面滑動過程中導(dǎo)航欄漸變的效果。筆者之前在項(xiàng)目里用過一個三方，后來更新版本失效了，于是決定結(jié)合自己對導(dǎo)航欄的認(rèn)識來實(shí)現(xiàn)一下這個功能。完成一個簡易的ios導(dǎo)航欄顏色漸變方案。
【文末附運(yùn)行效果及demo】，下面話不多說了，來一起看看詳細(xì)的介紹吧
思考與原理
如何給導(dǎo)航欄設(shè)置顏色？
|
1
2
3
4
5
|
//方法一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)換為圖片？
直接貼代碼并附上注釋：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
- (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ù)滑動視圖縱向偏移量來計算顏色的透明度的。
實(shí)現(xiàn)
除了以上的問題思考和基本原理，實(shí)際實(shí)現(xiàn)過程中還有一些需要注意的內(nèi)容。
導(dǎo)航欄的隱藏與顯示
當(dāng)頁面下拉時隱藏導(dǎo)航欄，方法有兩個:
|
1
2
3
4
5
|
//方法一：[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)和消失會很突兀。
采用方法二效果會好很多，因?yàn)閚avigationbar本身是存在的，只是做了顯示和隱藏的操作，過渡也相對順滑很多。
頁面切換的處理
導(dǎo)航欄作為的公共區(qū)域，我們可以對它進(jìn)行自定義，同時也要考慮當(dāng)前頁面的導(dǎo)航欄和其他頁面導(dǎo)航欄之間的相互影響。
- 導(dǎo)航欄下面那條線其實(shí)是一張圖片，叫做 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。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//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: ：傳入顏色、滑動視圖、臨界值來實(shí)現(xiàn)，一般在 scrollviewdidscroll中調(diào)用；
- reset：顯示導(dǎo)航欄下橫線，還原導(dǎo)航欄，一般在 viewwilldisappear中調(diào)用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//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í)價值，如果有疑問大家可以留言交流，謝謝大家對服務(wù)器之家的支持。
原文鏈接：https://www.jianshu.com/p/10c71cb19b5e
