简单的 iOS 导航栏渐变色解决方案
很多App首页要做成类似天猫和京东的导航栏,实现在页面滑动过程中导航栏渐变的效果。笔者之前在项目里用过一个三方,后来更新版本失效了,于是决定结合自己对导航栏的认识来实现一下这个功能。完成一个简易的iOS导航栏颜色渐变方案。
【文末附运行效果及demo】
PS:现有版本对代码进行了重构,通过新增category并利用runtime的method swizzling实现两行代码轻松搞定。详情参考README。
思考与原理
如何给导航栏设置颜色?
//方法一
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];
//方法二
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];
以上两个方法都可以为导航栏添加颜色,但是方法一的效果并非此处所需。
原因在于 UINavigationBar
的结构中添加了 UIView
、 UIImageView
、 UILabel
等控件,覆盖了 UINavigationBar
。
方法二的效果符合预期。
如何将颜色转换为图片?
直接贴代码并附上注释:
- (UIImage *)imageWithColor:(UIColor *)color {
//创建1像素区域并开始绘图
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
//创建画板并填充颜色和区域
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
//从画板上获取图片并关闭图片绘图
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
如何在滑动时为导航栏设置背景?
通常展示信息页面都存放于滑动视图(UIScrollView
、UITableView
、UICollectionView
等),这就不难想到可以在滑动视图的 scrollViewDidScroll:
这个方法里根据滑动视图纵向偏移量来计算颜色的透明度的。
实现
除了以上的问题思考和基本原理,实际实现过程中还有一些需要注意的内容。
导航栏的隐藏与显示
当页面下拉时隐藏导航栏,方法有两个:
//方法一:
[self.navigationController setNavigationBarHidden:YES];
//方法二:
self.navigationController.navigationBar.hidden = YES;
以上两个方法效果相同,区别在于一个是操作 navigationController
的属性(navigationBar
是 navigationController
的一个属性),一个是操作navigationBar
的属性。
但是,方法一会出现一个bug,就是当页面初始状态时 setNavigationBarHidden
为 YES
,也就相当于 navigationBar
那一刻是不存在的,那么导航栏上的控件也就自然看不到,而且 navigationBar
的出现和消失会很突兀。
采用方法二效果会好很多,因为navigationBar
本身是存在的,只是做了显示和隐藏的操作,过渡也相对顺滑。
页面切换的处理
导航栏作为的公共区域,我们可以对它进行自定义,同时也要考虑当前页面的导航栏和其他页面导航栏之间的相互影响。
- 导航栏下面那条线其实是一张图片,叫做
shadowImage
,在viewWillAppear
对其隐藏,又在viewWillDisappear
对其做了还原。 - 为了保证回到该页面时导航栏的颜色和离开时保持一致,在页面即将呈现时手动调了一下
scrollViewDidScroll:
方法来计算当前应该呈现的颜色。
封装
为了方便使用,封装一个 UINavigationBar
的category: UINavigationBar+ChangeColor。
//UINavigationBar+ChangeColor.m文件
//核心方法
- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY {
if (offsetY < 0) {
// 下拉时导航栏隐藏
self.hidden = YES;
}else {
self.hidden = NO;
// 计算透明度,180为随意设置的偏移量临界值
CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180);
// 设置一个颜色并转化为图片
UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
[self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
self.translucent = alpha >= 1.0f ? NO : YES;
}
}
使用方法:
-
star
:隐藏导航栏下的横线,将背景色置空,一般在viewWillAppear
中调用,; -
changeColor:WithScrollView:AndValue:
:传入颜色、滑动视图、临界值来实现,一般在scrollViewDidScroll
中调用; -
reset
:显示导航栏下横线,还原导航栏,一般在viewWillDisappear
中调用。
//VC.m文件
/* 页面即将显示 */
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController.navigationBar start];
//该页面呈现时手动调用计算导航栏此时应当显示的颜色
[self scrollViewDidScroll:_tableview];
}
/* 页面即将消失 */
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController.navigationBar reset];
}
/* 滑动过程中做处理 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
[self.navigationController.navigationBar changeColor:[UIColor redColor] withOffsetY:scrollView.contentOffset.y];
}
完整demo
总结
- 由于系统自带的导航栏经常不能满足需求,因此在开发中导航栏经常需要自定义,哪怕只是修改背景色。
- 了解导航栏的结构处理起来会更容易。
- 自定义导航栏也要考虑和其他页面的导航栏之间的相互影响。
推荐阅读
-
一日一技iOS 抓包的最简单解决方案
-
Android 学习(简单使用底部导航栏的底部导航活动)
-
iOS 导航栏基本效果配置 [简单易懂]
-
简单的 iOS 导航栏渐变色解决方案
-
iOS 中导航栏和 Tabbar 的背景颜色、标题颜色
-
iOS 修复了导航栏中的三个蓝点,当侧滑后退一半取消时会出现蓝点的问题
-
为 iOS 简单实现滑动导航栏
-
更新 iOS15 后,导航栏会滑动变白,TabBar 的颜色也会改变,而且 UITableView 顶部很多地方都是空白的。
-
在 iOS 中更改状态栏/导航栏颜色的几种实用方法
-
如何解决 iOS 17 中的 APP 闪退、内存占用过高、微信导航栏消失和电池续航问题?