iOS实现简易的导航栏颜色渐变实例代码

 更新时间:2018年10月19日 08:39:33   作者:六号先生117  
很多APP 都有导航栏颜色渐变的效果,下面这篇文章主要给大家介绍了关于iOS如何实现简易的导航栏颜色渐变效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧

前言

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

页面切换的处理

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

  • 导航栏下面那条线其实是一张图片,叫做 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];
}

效果展示

完整demo本地下载

总结

  • 由于系统自带的导航栏经常不能满足需求,因此在开发中导航栏经常需要自定义,哪怕只是修改背景色。
  • 了解导航栏的结构处理起来会更容易。
  • 自定义导航栏也要考虑和其他页面的导航栏之间的相互影响。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • iOS开发实现随机图片验证码封装

    iOS开发实现随机图片验证码封装

    这篇文章主要介绍了iOS开发实现随机图片验证码封装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • iOS Swift创建代理协议的多种方式示例

    iOS Swift创建代理协议的多种方式示例

    这篇文章主要给大家介绍了关于iOS Swift创建代理协议的多种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • IOS ObjectiveC中的赋值与对象拷贝

    IOS ObjectiveC中的赋值与对象拷贝

    这篇文章主要介绍了IOS ObjectiveC中的赋值与对象拷贝的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • iOS中设置清除缓存功能的实现方法

    iOS中设置清除缓存功能的实现方法

    清除缓存基本上都是在设置界面的某一个Cell,于是我们可以把清除缓存封装在某一个自定义Cell中,现在位大家介绍一种最基础的清除缓存的方法,感兴趣的朋友一起看看吧
    2017-07-07
  • iOS11上Xcode9 AppIcon 图标不显示

    iOS11上Xcode9 AppIcon 图标不显示

    升级到iOS11系统下自己的项目桌面app图标不见了,是什么原因呢,经过一番查找,终于发现问题所在,现在分享给大家
    2017-11-11
  • IOS 粒子系统 (CAEmitterLayer)实例详解

    IOS 粒子系统 (CAEmitterLayer)实例详解

    这篇文章主要介绍了IOS 粒子系统 (CAEmitterLayer)实例详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • iOS使用runtime修改文本框(TextField)的占位文字颜色

    iOS使用runtime修改文本框(TextField)的占位文字颜色

    相信大家都知道TextField默认的占位颜色也是深灰色,这个颜色比较难看清,这篇文章给大家介绍如何使用runtime修改TextField文本框的占位文字颜色,有需要的可以参考借鉴.
    2016-09-09
  • iOS开发之自定义UITextField的方法

    iOS开发之自定义UITextField的方法

    UITextField是IOS开发中用户交互中重要的一个控件,常被用来做账号密码框,输入信息框等。本文给大家介绍iOS开发之自定义UITextField的方法,感兴趣的朋友一起学习吧
    2016-05-05
  • iOS push侧滑返回功能实现方法

    iOS push侧滑返回功能实现方法

    这篇文章主要为大家详细介绍了iOS push侧滑返回功能实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 详解IOS中如何实现瀑布流效果

    详解IOS中如何实现瀑布流效果

    说到瀑布流, 或许大家都不陌生, 瀑布流的实现也有很多种! 从scrollView 到 tableView 书写的瀑布流, 然后再到2012年iOS6 苹果API新加进的collectionView进行的瀑布流封装! 确实,不论是写起来还是用起来都要方便很多!那么下面一起来看看IOS中具体如何实现瀑布流效果。
    2016-08-08

最新评论