下面這個(gè)界面有沒有覺得很眼熟熊昌。打開你手里的App仔細(xì)觀察女淑，你會發(fā)現(xiàn)很多都有實(shí)現(xiàn)這個(gè)功能蒲稳。比如美團(tuán)外賣的首頁模塊氮趋，新浪微博的個(gè)人詳情頁面。要怎么樣才能快速的實(shí)現(xiàn)這個(gè)功能呢江耀！那下面由筆者來告訴你如何三行代碼剩胁，集成這個(gè)功能。祥国。昵观。
2.gif
原理介紹：
要想把一個(gè)view設(shè)計(jì)成透明的我們一下子就會想到兩種方案，設(shè)置view的alpha值為0舌稀，或者設(shè)置view的backgroundColor為clearColor.但是UINavigationBar是一個(gè)比較特殊的視圖啊犬，它是沒有alpha屬性的，那我們可以設(shè)置opaque（不透明度）為NO扩借，上代碼試一試
//方案一：不透明度為NO
navigationBar.opaque = NO椒惨；
//方案二：背景顏色為clearColor
navigationBar.backgroudcolor = [UIColor clearColor]；
結(jié)果潮罪，然并卵康谆，完全沒用。這時(shí)候該怎么辦呢嫉到？這時(shí)候我們就得來看看UINavigationBar這個(gè)視圖的結(jié)構(gòu)了沃暗，如下圖。
NavgationBar.png
現(xiàn)在筆者教大家一個(gè)小技巧何恶。請看下面代碼：
//設(shè)置一張空的圖片
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
//清除邊框孽锥，設(shè)置一張空的圖片
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];
這時(shí)候再打開項(xiàng)目層次圖，你會有驚人的發(fā)現(xiàn)
Snip20160314_4.png
對比一下，你會發(fā)現(xiàn)只剩兩層了惜辑。不要問為什么唬涧，這都是系統(tǒng)幫你做的。盛撑。碎节。當(dāng)你設(shè)置了背景圖片的時(shí)候，就會出現(xiàn)這樣的結(jié)果抵卫。
知道了上述的原理狮荔，這就好辦了，現(xiàn)在只要監(jiān)聽介粘，控制器內(nèi)部的scrollView 的滾動殖氏，就可以實(shí)現(xiàn)導(dǎo)航條漸漸透明的效果了。
- 業(yè)務(wù)邏輯姻采，功能實(shí)現(xiàn)其實(shí)都不是很難雅采。但是也需要花費(fèi)一些時(shí)間，筆者在這給大家分享一下自己寫的一個(gè)分類偎谁。導(dǎo)入這個(gè)分類总滩，你只需要調(diào)用兩三個(gè)接口就可以實(shí)現(xiàn)這個(gè)功能了。
首先看一下分類提供的接口
Snip20160326_2.png
分類介紹
-
我寫的這個(gè)分類不僅可以在系統(tǒng)的UITableViewController 和UICollectionViewController中使用巡雨，（系統(tǒng)的只需調(diào)用分類中兩個(gè)方法即可）闰渔。而且當(dāng)你的UIViewController中有1個(gè)或多個(gè)可以垂直滾動的scrollView都可以使用。（需要告訴控制器需要監(jiān)聽哪個(gè)scrollView的滾動铐望，即設(shè)置keyScrollView）.
-
重要的是冈涧，這個(gè)分類的代碼侵入性非常低，使用簡單方便正蛙。當(dāng)不需要這些功能的時(shí)候督弓，你只需要注釋掉幾行代碼即可。對原控制器沒有任何影響乒验，無需更改控制器內(nèi)的其他代碼結(jié)構(gòu)愚隧。
分類代碼
分類接口
#import <UIKit/UIKit.h>
typedef struct {
BOOL isLeftAlpha;
BOOL isTitleAlpha;
BOOL isRightAlpha;
}HYBarItemAlphaControl;
@interface UIViewController (NavBarHidden)
/** 當(dāng)你的控制器里有多個(gè)scrollView的時(shí)候，設(shè)置需要監(jiān)聽的keyScrollView */
@property (nonatomic,weak) UIScrollView * keyScrollView;
/** 設(shè)置導(dǎo)航條上的標(biāo)簽是否需要跟著隱藏 */
- (void)setBarItemAlphaControl:(HYBarItemAlphaControl)isBarItemAlphaControl;
/**
* 在控制器ViewWillAppear.ViewWillDisappear需要調(diào)用的接口
* 避免push到下一個(gè)控制器,消除對其他控制器導(dǎo)航條的影響
*/
- (void)setInViewWillAppear;
- (void)setInViewWillDisappear;
/** rate將決定顏色變化程度,值越大,顏色變化越明顯,rate的取值范圍是0.01 - 0.999999 */
- (void)scrollControlRate:(CGFloat)height colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue ;
@end
下面這個(gè)效果圖是系統(tǒng)的UITableViewController锻全，以下是效果圖和代碼
2.gif
控制器代碼：
#import "TestViewController.h"
#import "UIViewController+NavBarHidden.h"
@implementation TestViewController
- (void)viewDidLoad{
[super viewDidLoad];
//設(shè)置當(dāng)有導(dǎo)航欄自動添加64的高度的屬性為NO
self.automaticallyAdjustsScrollViewInsets = NO;
//設(shè)置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
下面這個(gè)效果圖是一個(gè)ViewController中含有自己創(chuàng)建的一個(gè)CollectionView.
1.gif
控制器代碼
@implementation TestCollectionController
-(void)viewDidLoad{
[super viewDidLoad];
//1.設(shè)置當(dāng)有導(dǎo)航欄自動添加64的高度的屬性為NO
self.automaticallyAdjustsScrollViewInsets = NO;
//2.設(shè)置導(dǎo)航條內(nèi)容
[self setUpNavBar];
//3.導(dǎo)航條上的自定義的子標(biāo)簽是否需要跟著隱藏,只對自定義的view有效果.對系統(tǒng)默認(rèn)的無效
[self setBarItemAlphaControl:(HYBarItemAlphaControl){0,1,1}];
//4.設(shè)置collectionView
[self setUpCollectionView];
//5.告訴程序是根據(jù)哪個(gè)scrollView的滾動來控制狀態(tài)欄的變化
self.keyScrollView = self.collectionView;
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
}
#warning 監(jiān)聽滾動,調(diào)用框架接口
- (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];
}
