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(本地下载)

总结

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

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

(0)

相关推荐

  • iOS 自定义状态栏和导航栏详细介绍

    iOS 自定义状态栏和导航栏 开发IOS APP 经常会根据需求更改状态栏和导航栏,这里整理了几种方法,大家可以看下. 导航栏透明 -(void)viewWillAppear:(BOOL)animated { //viewWillAppear中设置透明 [super viewWillAppear:animated]; [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; /

  • iOS实现知乎和途家导航栏渐变的文字动画效果

    效果图如下 分析如下: 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad { [super viewDidLoad]; [self.view

  • 两种iOS隐藏导航栏的正确方法

    简介 在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了,这里给出两种方法. 第一种做法 -注意这里一定要用动画的方式隐藏导航栏,这样在使用滑动返回手势的时候效果最好,和上面动图一致.这样做有一个缺点就是在切换tabBar的时候有一个导航栏向上消失的动画. - (void)viewWillAppear:(BOOL)animated { [super

  • 详解iOS11关于导航栏问题

    前言 iOS11导航栏除了新加入了largeTitles和searchController两个新特性,可能是加入largeTitles的原因其结构较iOS 10发生了些变化. iOS11之前导航栏的navigationBarButton则直接添加在navigationBar上面 在iOS11之后,苹果添加了新的类来管理,可以看到titleView直接加在_UINavigationBarContentView上,UIBarButtonItem则添加在_UIButtonBarStackView上面,

  • iOS中导航栏pop返回时出现黑块问题的解决方法

    前言 苹果在iOS7以后给导航控制器加了一个Pop手势,只要手指在屏幕边缘滑动,当前的控制器的视图就会随着你的手指移动,当用户松手后,系统会判断手指拖动出来的大小来决定是否要执行控制器的pop操作. 这个想法非常棒,但最近在使用中发现了一些问题,下面话不多说了,来一起看看详细的介绍吧. 问题描述: 导航栏正常从A页面push到B页面,从B页面pop返回A页面时遇到过渡过程中导航栏出现黑块的问题. 如截图所示: 问题原因: A界面导航栏被影藏,B页面的导航栏存在.过渡的时候没有动画. 解决方案:

  • IOS 改变导航栏返回按钮的标题实例详解

    IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

  • IOS仿今日头条滑动导航栏

    之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG

  • iOS实现导航栏透明示例代码

    在最近一个项目中碰到这样一个场景,在被push进来的一个页面设置导航栏透明,且要求控制对tableview组的头视图进行悬停显示,nav随着tableview偏移量改变透明度,当然这样的需求确实不是什么难事,但是如果当前页面继续push一个不需要此类效果的页面,当在返回当前页面的时候就会出现一个坑,nav的展示很突兀,下面是直接上解决方法...ps:假设A页面为需要设置透明,B页面被Apush且不需要设置透明 首先在需要设置导航栏透明的页面的viewDidload中写上 self.title =

  • iOS轻松实现导航栏透明渐变

    首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 1.首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundColor为Clear是没用的,你可以试着设置它的clear,但是没用,原因一会儿我们就知道了. 而对于把导航栏设置为透明,网上大多数的方法是: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] for

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

    前言 很多App首页要做成类似天猫和京东的导航栏,实现在页面滑动过程中导航栏渐变的效果.笔者之前在项目里用过一个三方,后来更新版本失效了,于是决定结合自己对导航栏的认识来实现一下这个功能.完成一个简易的iOS导航栏颜色渐变方案. [文末附运行效果及demo],下面话不多说了,来一起看看详细的介绍吧 思考与原理 如何给导航栏设置颜色? //方法一 self.navigationController.navigationBar.backgroundColor = [UIColor redColor]

  • iOS开发之隐藏导航栏线的简单代码

    去除navigationBar上那条线: ///隐藏navigationBar导航栏线(直接写在UINavigationController-viewDidLoad方法里面即可) UIView *backgroundView = [self.navigationBar subviews].firstObject; _lineView = backgroundView.subviews.firstObject; _lineView.hidden = YES; 去除前(效果图): 去除后(效果图):

  • Android分页中显示出下面翻页的导航栏的布局实例代码

    当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay

  • Android自定义顶部导航栏控件实例代码

    下面一段代码给大家介绍了android 自定义顶部导航栏控件功能,具体代码如下所示: class HeaderBar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : FrameLayout(context, attrs, defStyleAttr) { //重写构造方法 在java里面 我们一般是重写三个构造方法//在kotlin中 我们可以使用

  • sencha touch 模仿tabpanel导航栏TabBar的实例代码

    基于sencha touch 2.2所写 代码: 复制代码 代码如下: /**模仿tabpanel导航栏*/Ext.define('ux.TabBar', {    alternateClassName: 'tabBar',    extend: 'Ext.Toolbar',    xtype: 'tabBar',    config: {        docked: 'bottom',        cls: 'navToolbar',        layout: {           

  • Android仿今日头条顶部导航栏效果的实例代码

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu

  • Android开发之ListView的head消失页面导航栏的渐变出现和隐藏

    1.Fragment页面xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

随机推荐