下面這個界面有沒有覺得很眼熟。打開你手里的App仔細觀察，你會發(fā)現(xiàn)很多都有實現(xiàn)這個功能。比如美團外賣的首頁模塊，新浪微博的個人詳情頁面。要怎么樣才能快速的實現(xiàn)這個功能呢！那下面由筆者來告訴你如何三行代碼，集成這個功能。。。
2.gif
原理介紹：
要想把一個view設計成透明的我們一下子就會想到兩種方案，設置view的alpha值為0，或者設置view的backgroundColor為clearColor.但是UINavigationBar是一個比較特殊的視圖，它是沒有alpha屬性的，那我們可以設置opaque（不透明度）為NO，上代碼試一試
//方案一：不透明度為NO
navigationBar.opaque = NO；
//方案二：背景顏色為clearColor
navigationBar.backgroudcolor = [UIColor clearColor]；
結果，然并卵，完全沒用。這時候該怎么辦呢？這時候我們就得來看看UINavigationBar這個視圖的結構了，如下圖。
NavgationBar.png
現(xiàn)在筆者教大家一個小技巧。請看下面代碼：
//設置一張空的圖片
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
//清除邊框，設置一張空的圖片
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];
這時候再打開項目層次圖，你會有驚人的發(fā)現(xiàn)
Snip20160314_4.png
對比一下，你會發(fā)現(xiàn)只剩兩層了。不要問為什么，這都是系統(tǒng)幫你做的。。。當你設置了背景圖片的時候，就會出現(xiàn)這樣的結果。
知道了上述的原理，這就好辦了，現(xiàn)在只要監(jiān)聽，控制器內部的scrollView 的滾動，就可以實現(xiàn)導航條漸漸透明的效果了。
- 業(yè)務邏輯，功能實現(xiàn)其實都不是很難。但是也需要花費一些時間，筆者在這給大家分享一下自己寫的一個分類。導入這個分類，你只需要調用兩三個接口就可以實現(xiàn)這個功能了。
首先看一下分類提供的接口
Snip20160326_2.png
分類介紹
-
我寫的這個分類不僅可以在系統(tǒng)的UITableViewController 和UICollectionViewController中使用，（系統(tǒng)的只需調用分類中兩個方法即可）。而且當你的UIViewController中有1個或多個可以垂直滾動的scrollView都可以使用。（需要告訴控制器需要監(jiān)聽哪個scrollView的滾動，即設置keyScrollView）.
-
重要的是，這個分類的代碼侵入性非常低，使用簡單方便。當不需要這些功能的時候，你只需要注釋掉幾行代碼即可。對原控制器沒有任何影響，無需更改控制器內的其他代碼結構。
分類代碼
分類接口
#import <UIKit/UIKit.h>
typedef struct {
BOOL isLeftAlpha;
BOOL isTitleAlpha;
BOOL isRightAlpha;
}HYBarItemAlphaControl;
@interface UIViewController (NavBarHidden)
/** 當你的控制器里有多個scrollView的時候，設置需要監(jiān)聽的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
下面這個效果圖是系統(tǒng)的UITableViewController，以下是效果圖和代碼
2.gif
控制器代碼：
#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中含有自己創(chuàng)建的一個CollectionView.
1.gif
控制器代碼
@implementation TestCollectionController
-(void)viewDidLoad{
[super viewDidLoad];
//1.設置當有導航欄自動添加64的高度的屬性為NO
self.automaticallyAdjustsScrollViewInsets = NO;
//2.設置導航條內容
[self setUpNavBar];
//3.導航條上的自定義的子標簽是否需要跟著隱藏,只對自定義的view有效果.對系統(tǒng)默認的無效
[self setBarItemAlphaControl:(HYBarItemAlphaControl){0,1,1}];
//4.設置collectionView
[self setUpCollectionView];
//5.告訴程序是根據(jù)哪個scrollView的滾動來控制狀態(tài)欄的變化
self.keyScrollView = self.collectionView;
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
}
#warning 監(jiān)聽滾動,調用框架接口
- (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];
}
