首先我們來看下效果

一開始當(dāng)我們什么只設(shè)置了一張圖片作為它的頭部視圖的時候,它是這樣的

1.首當(dāng)其沖的,我們先得把導(dǎo)航欄弄透明

那么我們首先得知道，設(shè)置navigationBar的BackgroundColor為Clear是沒用的,你可以試著設(shè)置它的clear，但是沒用，原因一會兒我們就知道了。

而對于把導(dǎo)航欄設(shè)置為透明，網(wǎng)上大多數(shù)的方法是：

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];

你可以運行這兩句話到你的程序，你會發(fā)現(xiàn)這樣確實是可以的,那么我們可以從中得到幾個信息：

1）我們設(shè)置的是BackgroundImage，說明也許在我們的navigationBar上有一個ImageView的子視圖，而我們的看到的導(dǎo)航欄實際上看到的就是這個圖片，因此設(shè)置它為無圖片我們就可以看到透明,而設(shè)置backgroundColor卻不行。

2）我們還設(shè)置了shadowImage為無圖，它其實就是導(dǎo)航欄下面的那根細線，如果你不寫第二句話你則會看到一根線。

我們來看一下navigationBar的結(jié)構(gòu)圖

從圖中我們可以很清楚的看到，NavigationBar他背后是有一張類型為_UINavigationBarBackground(UIImageView的子類)的視圖，我們平時看到的大部分其實都是它，第二個箭頭那里的ImageView就是那根細線,他是加在我們背景的ImageView上面的，我們設(shè)置BackgroundImage其實就是設(shè)置_UINavigationBarBackground的image。

運行效果如圖：

2.還得讓它不僅僅是透明

這,怎么整？我們有幾種方案

設(shè)置漸變圖片
根據(jù)上面設(shè)置為透明的方法，我們最直接能想到的還是setBackgroundImage,根據(jù)滑動距離去設(shè)置圖片的alpha。是的，我們是去設(shè)置圖片，而不是設(shè)置UIView，這樣的話就需要你不停的去生成新圖片賦給BackgroundImage，這樣感覺是不是會不太好？

運行時動態(tài)綁定
我們可以在運行時動態(tài)綁定他的背景視圖，然后設(shè)置他的背景透明度，網(wǎng)上有一個通過類別方式動態(tài)綁定實現(xiàn)導(dǎo)航欄顏色漸變的三方框架,感興趣的朋友可以自行去研究研究LTNavigation。

直接獲取那張ImageView，然后設(shè)置他的透明度。
其實我們從結(jié)構(gòu)圖中可以看出來，它是NavigationBar的子視圖，我們可以通過for...in循環(huán)遍歷navigationBar.subviews，然后獲得這個view。

當(dāng)然，更簡單的，它其實就在subviews的第一個，即我們可以這樣：

barImageView = self.navigationController.navigationBar.subviews.firstObject

我們可以用一個全局的imageView引用他，以免我們每次都要寫一長串。

3.其實已經(jīng)可以了

我們還需要做什么？沒錯，最后一步，我們僅僅只需要在scrollViewDidScroll里面，根據(jù)偏移量來動態(tài)改變barImageView的背景顏色(或者透明度)就行了。

例如我們需要在-64(默認的最小偏移量)到200之間變化：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  CGFloat minAlphaOffset = - 64;
  CGFloat maxAlphaOffset = 200;
  CGFloat offset = scrollView.contentOffset.y;
  CGFloat alpha = (offset - minAlphaOffset) / (maxAlphaOffset - minAlphaOffset);
  _barImageView.alpha = alpha;

}

就這樣你就可以實現(xiàn)我在文章一開始那個圖片的效果了(其實并不是，tintColor和satusBarStyle還沒變)。

Tips

1）你也可以動態(tài)的更改的狀態(tài)欄和標(biāo)題的顏色以和導(dǎo)航欄更匹配

//狀態(tài)欄
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
//標(biāo)題顏色
self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName : [UIColor someColor]}
//導(dǎo)航欄子控件顏色
self.navigationController.navigationBar.tintColor = [UIColor someColor];

2）注意釋放tableView 的 delegate(不然你進進出出時候會發(fā)現(xiàn)哪里好像不太對)

- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];
 self.tableView.delegate = self;
}
- (void)viewWillDisappear:(BOOL)animated {
 [super viewWillDisappear:animated];
 self.tableView.delegate = nil;

}

3）導(dǎo)航欄是公有的

所以你可能需要在ViewWillDisappear里面再把導(dǎo)航欄設(shè)置為你需要的樣子

還有一件事情(This word Learn from Steve jobs)

我自己封裝了一些導(dǎo)航欄變化效果，使用簡單，歡迎大家嘗試：MXNavigationBarManager。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論