UINavigationBar的一些特性,經(jīng)常用過就忘,此處做一個記錄骚烧,以免每次翻代碼锉桑。
1. 標題
// 標題文字
self.navigationItem.title = @"Test";
// 標題字體角骤、顏色等屬性
[self.navigationController.navigationBar setTitleTextAttributes:
@{NSForegroundColorAttributeName:[UIColor whiteColor],
NSFontAttributeName:[UIFont systemFontOfSize:18.0]}];
2. navigationBar的背景顏色
self.navigationController.navigationBar.barTintColor = [UIColor orangeColor];
設(shè)置navigationBar背景為透明(此時barTintColor就無效了):
// 背景圖片
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
// 去掉分割線
self.navigationController.navigationBar.shadowImage = [UIImage new];
3. navigationBar填充顏色
self.navigationController.navigationBar.tintColor = [UIColor blueColor];
rightBarButtonItem的圖片被默認方式渲染
如上圖讥邻,barButtonItem的文字或圖片顏色會被渲染夷野,為防止圖片被渲染,可以對圖片做一下渲染模式的處理拇泛。
圖片渲染模式UIImageRenderingMode有三種:
UIImageRenderingModeAutomatic:默認的渲染模式滨巴,系統(tǒng)會自動根據(jù)上下文對圖片進行渲染。如果用于NavigationBar,TabBar, Toolbar,SegmentedControls等控件俺叭,會提取其前臺圖像作為模板恭取,進行渲染(我的理解為重新著色,如上圖的例子熄守,是用tintColor去填充)蜈垮;如果用于imageview耗跛,webview,會直接使用原始圖像窃款。
UIImageRenderingModeAlwaysTemplate:總是將圖像作為模板進行渲染课兄。
UIImageRenderingModeAlwaysOriginal:總是使用原始圖像進行渲染牍氛。
這樣晨继,此處將圖片渲染模式改為UIImageRenderingModeAlwaysOriginal就可以了
// 右按鈕
UIImage *nextBtnImage = [UIImage imageNamed:@"next_btn_gray"];
// 設(shè)置圖片渲染模式為 UIImageRenderingModeAlwaysOriginal
nextBtnImage = [nextBtnImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc]initWithImage:nextBtnImage style:UIBarButtonItemStylePlain target:self action:@selector(next)];
self.navigationItem.rightBarButtonItem = rightItem;
更改渲染模式后
4. 透明導航欄的滑動漸變實現(xiàn)
方法一:根據(jù)滑動的offset,設(shè)置navigationBar的backgroundImage搬俊,相當于反復生成新的圖片紊扬,個人認為這樣的方法比較消耗資源
/**
初始化navigationBar
*/
- (void)setupNavigationBar
{
// 240,230,140
self.barBgColor = [UIColor colorWithRed:240/255.0 green:230/255.0 blue:140/255.0 alpha:1];
// 標題
self.navigationItem.title = @"Test";
// 設(shè)置初始透明背景
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
// 分割線
self.navigationController.navigationBar.shadowImage = [UIImage new];
// 右按鈕
UIImage *nextBtnImage = [UIImage imageNamed:@"next_btn_gray"];
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc]initWithImage:nextBtnImage style:UIBarButtonItemStylePlain target:self action:@selector(next)];
self.navigationItem.rightBarButtonItem = rightItem;
// 初始化navigationBar填充顏色
[self setNavigationBarTintColorByScale:0.0];
}
重點在下面兩個方法,在scrollView的代理方法scrollViewDidScroll中唉擂,以當前偏移量為依據(jù)餐屎,更新navigationBar的backgroundImage,以及tintColor
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat minAlphaOffset = -64; // 最小Offset為-64玩祟,透明度為0
CGFloat maxAlphaOffset = 300; // Offset >= 300后腹缩,透明度為1(這里的值按UI需求改就好嘍)
CGFloat offset = scrollView.contentOffset.y;
// 計算當前 offset 的scale
CGFloat offsetScale = (offset - minAlphaOffset) / (maxAlphaOffset - minAlphaOffset);
// 對scale做些處理
if (offsetScale < 0.0) {
offsetScale = 0.0;
}else if (offsetScale > 1.0) {
offsetScale = 1.0;
}
// 更新背景透明度
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[self.barBgColor colorWithAlphaComponent:offsetScale]] forBarMetrics:UIBarMetricsDefault];
// 更新填充顏色
[self setNavigationBarTintColorByScale:offsetScale];
NSLog(@"offset = %.1f, offsetScale = %.1f",offset,offsetScale);
}
/**
根據(jù)scale(0.0~1.0)更新導航欄填充顏色
@param scale 當前offset的滑動倍數(shù)
*/
- (void)setNavigationBarTintColorByScale:(CGFloat)scale
{
CGFloat whiteColorF = 255.0;
CGFloat grayColorF = 105.0;
CGFloat gradientColorF = whiteColorF+(grayColorF-whiteColorF)*scale;
UIColor *grayColor = [UIColor colorWithRed:gradientColorF / 255.0 green:gradientColorF / 255.0 blue:gradientColorF / 255.0 alpha:1];
[self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName:grayColor}];
self.navigationController.navigationBar.tintColor = grayColor;
}
方法二:直接獲取到navigationBar的背景imageView,刷新它的alpha
代碼如下空扎,重復的部分隱去了
/**
初始化navigationBar
*/
- (void)setupNavigationBar
{
// ···
// 拿到背景ImageView
self.barImageView = self.navigationController.navigationBar.subviews.firstObject;
self.navigationController.navigationBar.barTintColor = self.barBgColor;
self.barImageView.alpha = 0.0;
// ···
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// ···
// 更新背景透明度
/*
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[self.barBgColor colorWithAlphaComponent:offsetScale]] forBarMetrics:UIBarMetricsDefault];
*/
self.barImageView.alpha = offsetScale;
// ···
}
效果如下圖啦~到此藏鹊,就實現(xiàn)了
導航欄滑動漸變效果.gif