iOS：導航條滾動透明度隨着tableView的滾動而變化

來源：HelloYeah 

鏈接：http://www.jianshu.com/p/b8b70afeda81

下面這個界面有沒有覺得很眼熟。打開你手里的App仔細觀察，你會發現很多都有實現這個功能。比如美團外賣的首頁模塊，新浪微博的個人詳情頁面。要怎么樣才能快速的實現這個功能呢！那下面由筆者來告訴你如何三行代碼，集成這個功能。。。

 

原理介紹：

要想把一個view設計成透明的我們一下子就會想到兩種方案，設置view的alpha值為0，或者設置view的backgroundColor為clearColor.但是UINavigationBar是一個比較特殊的視圖，它是沒有alpha屬性的，那我們可以設置opaque（不透明度）為NO，上代碼試一試

//方案一：不透明度為NO

navigationBar.opaque = NO；

//方案二：背景顏色為clearColor

navigationBar.backgroudcolor = [UIColor clearColor]；

結果，然並卵，完全沒用。這時候該怎么辦呢？這時候我們就得來看看UINavigationBar這個視圖的結構了，如下圖。

 

現在筆者教大家一個小技巧。請看下面代碼：

//設置一張空的圖片

[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];

//清除邊框，設置一張空的圖片

[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];

這時候再打開項目層次圖，你會有驚人的發現

對比一下，你會發現只剩兩層了。不要問為什么，這都是系統幫你做的。。。當你設置了背景圖片的時候，就會出現這樣的結果。

知道了上述的原理，這就好辦了，現在只要監聽，控制器內部的scrollView 的滾動，就可以實現導航條漸漸透明的效果了。

• 業務邏輯，功能實現其實都不是很難。但是也需要花費一些時間，筆者在這給大家分享一下自己寫的一個分類。導入這個分類，你只需要調用兩三個接口就可以實現這個功能了。

  首先看一下分類提供的接口

 

分類介紹

• 我寫的這個分類不僅可以在系統的UITableViewController 和UICollectionViewController中使用，（系統的只需調用分類中兩個方法即可）。而且當你的UIViewController中有1個或多個可以垂直滾動的scrollView都可以使用。（需要告訴控制器需要監聽哪個scrollView的滾動，即設置keyScrollView）.

•  

• 重要的是，這個分類的代碼侵入性非常低，使用簡單方便。當不需要這些功能的時候，你只需要注釋掉幾行代碼即可。對原控制器沒有任何影響，無需更改控制器內的其他代碼結構。

分類代碼

分類接口 #import <UIKit/UIKit.h> typedef struct { BOOL isLeftAlpha; BOOL isTitleAlpha; BOOL isRightAlpha; }HYBarItemAlphaControl; @interface UIViewController (NavBarHidden) /** 當你的控制器里有多個scrollView的時候，設置需要監聽的keyScrollView */ @property (nonatomic,weak) UIScrollView * keyScrollView; /** 設置導航條上的標簽是否需要跟着隱藏 */
- (void)setBarItemAlphaControl:(HYBarItemAlphaControl)isBarItemAlphaControl; /** * 在控制器ViewWillAppear.ViewWillDisappear需要調用的接口 * 避免push到下一個控制器,消除對其他控制器導航條的影響 */
- (void)setInViewWillAppear; - (void)setInViewWillDisappear; /** rate將決定顏色變化程度,值越大,顏色變化越明顯,rate的取值范圍是0.01 - 0.999999 */
- (void)scrollControlRate:(CGFloat)height colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue ; @end

下面這個效果圖是系統的UITableViewController，以下是效果圖和代碼

 

控制器代碼： #import "TestViewController.h"
#import "UIViewController+NavBarHidden.h"
 
@implementation TestViewController - (void)viewDidLoad{ [super viewDidLoad]; //設置當有導航欄自動添加64的高度的屬性為NO
    self.automaticallyAdjustsScrollViewInsets = NO; //設置tableView的頭部視圖
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 250)]; imageView.image = [UIImage imageNamed:@"1.jpg"]; self.tableView.tableHeaderView = imageView; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView{ [self scrollControlRate:0.5 colorWithRed:0.0 green:1.0 blue:0.0 ]; } - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [self setInViewWillAppear]; } - (void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear:animated]; [self setInViewWillDisappear]; } @end

下面這個效果圖是一個ViewController中含有自己創建的一個CollectionView.

控制器代碼 @implementation TestCollectionController -(void)viewDidLoad{ [super viewDidLoad]; //1.設置當有導航欄自動添加64的高度的屬性為NO
    self.automaticallyAdjustsScrollViewInsets = NO; //2.設置導航條內容
 [self setUpNavBar]; //3.導航條上的自定義的子標簽是否需要跟着隱藏,只對自定義的view有效果.對系統默認的無效
    [self  setBarItemAlphaControl:(HYBarItemAlphaControl){0,1,1}]; //4.設置collectionView
 [self setUpCollectionView]; //5.告訴程序是根據哪個scrollView的滾動來控制狀態欄的變化
    self.keyScrollView = self.collectionView; [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent; } #warning 監聽滾動,調用框架接口
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{ //rate將決定顏色變化程度,值越大,顏色變化越明顯,rate的取值范圍是0.01 - 0.999999
    [self scrollControlRate:0.5 colorWithRed:1.0 green:0.0 blue:0.0 ]; } - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [self setInViewWillAppear]; } - (void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear:animated]; [self setInViewWillDisappear]; }

項目源碼分享，希望大家喜歡，下載的時候順便star一下，好人多福。https://github.com/newyeliang/HYNavBarHidden.git