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

weixin_33860553發表於2016-04-29
iOSView

來源：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

 

相關文章