iOS7的最新版本引入了大量的视觉变囮从开发人员的角度来看,导航栏和状态栏是2个最显而易见的变化状态栏现在是透明/半透明的,也就是说view 可以透过状态栏,导航栏的背景图像可以向上延伸的状态栏的后面
默认的导航栏在iOS中7
在我们进去的定制,让我们先来看看由Xcode 5和iOS 7生成的默认导航栏只需用单-视图-控制器模板的Xcode项目。嵌入视图控制器在导航控制器如果您不想从头开始,你可以这个示例的Xcode项目
Xcode5下面有iOS 6和iOS7两个模拟器。你可以尝试用这两個不同版本的模拟器运行示例项目
正如你所看到的,在iOS的7导航栏默认是交织在一起的状态栏默认的颜色也改为浅灰色,以及
就像iOS 6,您可以通过使用导航栏的“titleTextAttributes”属性来自定义的文本样式您可以指定字体,文字颜色文字阴影颜色,文字阴影在文本标题偏移属性字典使用下面的文本属性键:
下面是示例代码片段改变的导航栏标题的字体样式:
如果您更改该示例应用程序,导航栏中的标题看起来应该潒这样:
在iOS7所有的栏按钮都是没编辑的的。你可以改变tintColor属性它提供了一个快速和简单的方式,下面是一个示例代码片段:
除了后退按钮,请注意tintColor属性影响所有按钮标题和按钮图像。
图像的颜色由tintColor属性控制
使用图片作为导航栏标题
不想标题栏是光秃秃的文字?您可鉯通过使用代码行中的图像或标志取代它:
我们简单地改变titleview用来自定义图像来这不是在iOS7的新功能。该代码也适用于较低版本的iOS
同样,這个技巧是不是专门为iOS 7,您希望添加导航栏的一侧不止一个栏按钮项目无论是leftBarButtonItems和rightBarButtonItems 您在导航栏左侧/右侧指定自定义栏按钮项目。比如你想添加一个摄像头和一个共享按钮右侧的吧您可以使用下面的代码:
在旧版本的iOS,状态栏总是在黑色的风格没有太多可以改变。与iOS 7的發布你可以改变每个视图控制器状态栏的外观。您可以使用UIStatusBarStyle常量来指定状态栏的内容是否应该或深或浅默认情况下,状态栏会显示暗嘚内容换句话说,如时间电池指示灯和Wi-Fi信号的项目显示为暗色。如果您使用的是深色背景在导航栏上你最终会像这样:
ios上状态栏 就昰指的最上面的20像素高的部分
状态栏分前后两部分,要分清这两个概念后面会用到:
-
前景部分:就是指的显示电池、时间等部分;
-
背景蔀分:就是显示黑色或者图片的背景部分;
如下图:前景部分为白色,背景部分为黑色
简单来说就是设置显示电池电量、时间、网络部汾标示的颜色,
这里只能设置两种颜色:
可以设置的地方有两个:plist设置里面 和 程序代码里
这样在app启动的launch页显示的时候statusBar的样式就是上面plist设置的风格。
- 这里如果你只是简单的return一个固定的值那么该UIViewController显示的时候,程序就会马上调用该方法来改变statusBar的前景部分;
- 这个和UIView的setNeedsDisplay原理差不哆(调用UIView对象的setNeedsDisplay方法后,系统会在下次页面刷新时调用重绘该view,系统最快能1秒刷新60次页面具体要看程序设置)。
背景部分简单来说,就昰背景色;改变方法有两种:
在任何情况下你要隐藏状态栏,可以覆盖prefersStatusBarHidden:在你的控制器:
iOS的7为开发人员提供新的自由定制的导航栏和状態栏的外观如果您是从的iOS 6移植应用程序到iOS 7或创建一个全新的应用程序为iOS 7,我希望你会发现这些有用的技巧
自定义导航条和状态栏:
在洎定义导航栏背景时,可能会遇到以下一些问题:
1、当设置导航栏背景后状态栏的颜色也会跟着一起改变掉,这可能不是你说希望看到嘚
2、IOS7以上的版本和低版本显示出来的导航栏高度位置有差别这个差别就是状态栏的高度20,为了兼容低版本必须统一
2、文字是附于背景仩方的,因此考虑在这之间插入一个矩形颜色块(甚至图片也可以)
3、根据这种思路第二种思路也随之产生,就是制作出20+44=64高度的图片莋为导航栏背景图,其中上方20为状态栏的颜色
4、本文实现第一种思路,并且模拟器和真机以及IOS67均已验证可行
//7.0以上版本通过一句代码解決高度上升问题
//创建一个高20的假状态栏背景
//将它的颜色设置成你所需要的,这里我选择了黑色表示我很沉稳
//这里我的思路是:之前不理想的状态是状态栏颜色也变成了导航栏的颜色,但根据这种情况反而帮助我判断出此时的状态栏也是导航栏的一部分,而状态栏文字浮於上方因此理论上直接在导航栏上添加一个subview就是他们中间的那一层了。
//修改导航栏文字颜色这里我选择白色,表示我很纯洁
//设置导航欄的背景图片