美文网首页iOS Developer
iOS 导航栏实现技巧

iOS 导航栏实现技巧

作者: 李周 | 来源:发表于2017-04-09 22:08 被阅读463次

其实导航栏是每一个项目中多多少少会涉及的部分,从开发到后期的维护,如果导航栏维护的不错,那么后续的开发也会简单一些,所以记录下我在开发中的几个思路技巧。


1 原生导航栏

1.1 基础简介

系统的导航栏已经可以满足很多的要求了,一开始设置的可以是导航栏的整体框架barStyle,

barStyle的值

显而易见,barStyle目前可以使用的只有UIBarStyleDefault和UIBarStyleBlack两个值,两个值设置的差异是:

UIBarStyleDefault的效果图

UIBarStyleDefault:状态栏和导航栏上的字都是黑色,表面有一层略透明的白色遮罩。

UIBarStyleBlack的效果图

UIBarStyleBlack:状态栏和导航栏上的字都是白色的,表面有一层略透明的黑色遮罩。

而略透明的遮罩在iOS 7之后是由translucent属性控制,该值默认为YES(略透明),而设置为no的时候,就是完全不透明的状态:UIBarStyleDefault(全白),UIBarStyleBlack(全黑)

官方文档简介

但是设置图片之后的话,还是没有太大的差异性。

1.2 显示效果

导航栏最重要的部分还是左右按钮和中间的title或titleView,按钮的话,主要是系统返回按钮back是在navigationController上,所以在没有设置任何的leftBarButtonItem的情况下会显示默认的。中间的字体其实是固定的,颜色也是黑白两色,要改成别的颜色或者字体大小以及位置的时候,使用titleView这个属性:

titleView的设置

效果图:

效果图

1.3 效果设置

其实除了导航栏中间的title或titleView以及左右的按钮item,更多的效果是配合scrollView的一个滚动,在iOS 8之后原生的导航栏添加一些点击事件的处理,其中比较常见的有:

滑动处理

hidesBarsOnSwipe:当向下滑动的时候,导航栏会显示;当向上滑动的时候,导航栏会消失

hidesBarsOnSwipe效果图

hidesBarsOnTap:如果是没有处理的点击效果会让导航栏消失。

点击处理

当然还有一些不错的处理方法,但是处理这些基础的导航栏消失和消失的效果,还有一个常用就是滑动时候的动态颜色改变:

这里的话一定要注意不能使用[UINavigationBar appearance]来处理,因为[UINavigationBar appearance]获得的是屏幕中已有的导航栏,滑动时不能改变屏幕中已经存在的元素。所以只能在导航栏上面加一层view,通过改变这个view的颜色实现动态的颜色改变效果:

滑动处理方法

滑动处理效果:

滑动处理效果图

2 自定义导航栏

2.1基础元素封装

其实封装的话主要还是因为设置一些固定位置的图片、侧滑效果等,封装其实不需要放在NavigationController的类中,可以直接放在rootViewController中。属性方面:中间标题是一定存在的,但是左边按钮的设置可以添加一个bool判断值等:

nav相关属性设置

这样的话其实将能将大部分导航栏的颜色、按钮位置、分割线固定,而且在RootViewController里面还可以加上转屏相关的设置。


导航栏的基础设置的话搞明白的话,其实加一些效果的话也不会很难。接下来的话可能对侧滑的实现技巧研究一下。

相关文章

网友评论

    本文标题:iOS 导航栏实现技巧

    本文链接:https://www.haomeiwen.com/subject/kwidattx.html