iOS如何实现简易的导航栏颜色渐变效果

这篇文章将为大家详细讲解有关iOS如何实现简易的导航栏颜色渐变效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

思考与原理

如何给导航栏设置颜色？

//方法一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本身是存在的，只是做了显示和隐藏的操作，过渡也相对顺滑很多。

页面切换的处理

导航栏作为的公共区域，我们可以对它进行自定义，同时也要考虑当前页面的导航栏和其他页面导航栏之间的相互影响。

导航栏下面那条线其实是一张图片，叫做 shadowImage，在 viewWillAppear对其隐藏，又在 viewWillDisappear对其做了还原。页面即将呈现时防止其他页面回来其他页面设置的导航栏背景色对本页面造成影响，在 viewWillAppear 对导航栏背景色先做了置空处理。为了保证回到该页面时导航栏的颜色和离开时保持一致，在页面即将呈现时手动调了一下 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];}

关于“iOS如何实现简易的导航栏颜色渐变效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。