您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
前言
很多App首页要做成类似天猫和京东的导航栏，实现在页面滑动过程中导航栏渐变的效果。笔者之前在项目里用过一个三方，后来更新版本失效了，于是决定结合自己对导航栏的认识来实现一下这个功能。完成一个简易的iOS导航栏颜色渐变方案。
【文末附运行效果及demo】，下面话不多说了，来一起看看详细的介绍吧
思考与原理
如何给导航栏设置颜色？
//方法一 self.navigationController.navigationBar.backgroundColor = [UIColor redColor]; //方法二 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];
以上两个方法都可以为导航栏添加颜色，但是方法一的效果并非此处所需。
直接设置背景色的效果
原因在于 UINavigationBar 的结构中添加了 UIView 、 UIImageView 、 UILabel等控件，覆盖了 UINavigationBar 。
方法二的效果符合预期。
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;
}
如何在滑动时为导航栏设置背景？
通常展示信息页面都存在滑动视图（UITableview 、 UICollectionView 等），这就不难想到可以在滑动视图的 scrollViewDidScroll 这个方法里根据滑动视图纵向偏移量来计算颜色的透明度的。
实现
除了以上的问题思考和基本原理，实际实现过程中还有一些需要注意的内容。
导航栏的隐藏与显示
当页面下拉时隐藏导航栏，方法有两个:
//方法一： [self.navigationController setNavigationBarHidden:YES]; //方法二： self.navigationController.navigationBar.hidden = YES;
以上两个方法效果相同，区别在于一个是操作 navigationController 的属性（navigationBar 是 navigationController的一个属性），一个是操作navigationBar的属性。
但是，方法一会出现一个bug，就是当页面初始状态时 setNavigationBarHidden 为 YES，也就相当于 navigationBar 那一刻是不存在的，那么导航栏上的控件也就自然看不到，而且 navigationBar的出现和消失会很突兀。
采用方法二效果会好很多，因为navigationBar本身是存在的，只是做了显示和隐藏的操作，过渡也相对顺滑很多。
页面切换的处理
导航栏作为的公共区域，我们可以对它进行自定义，同时也要考虑当前页面的导航栏和其他页面导航栏之间的相互影响。
封装
为了方便使用，封装一个 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;
}
}
使用方法：
//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（本地下载）
总结
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。