文档章节

IOS7的状态栏和导航栏

嘻哈开发者
 嘻哈开发者
发布于 2014/10/14 22:48
字数 1565
阅读 2164
收藏 16

iOS 7中默认的导航栏

在开始定制之前,我们先来看看iOS 7中默认导航栏的外观。通过Xcode用Single View Controller模板创建一个工程。然后将view controller嵌入到一个navigation controller中。如果你不想从头开始,那么也可以在这里下载到这个示例工程。

Xcode 5包含有iOS 6和iOS 7模拟器,我们可以在这两个不同的模拟器版本中运行示例程序,进行对比,如下图所示:

vcC4tcSxs76w0dXJqzwvaDM+CjxwPtTaaU9TIDfW0KOssrvU2cq508N0aW50Q29sb3LK9NDUwLTJ6NbDtby6vcC4tcTR1cmro6y2+MrHyrnTw2JhclRpbnRDb2xvcsr00NTAtNDeuMSxs76wyauho87Sw8e/ydLU1No8Y29kZT5BcHBEZWxlZ2F0ZS5tPC9jb2RlPs7EvP7W0LXEt723qDxjb2RlPmRpZEZpbmlzaExhdW5jaGluZ1dpdGhPcHRpb25zOjwvY29kZT7A78PmzO2808jnz8K0+sLrwLTQ3rjE0dXJq6O6PC9wPgoKPHRhYmxlPgo8dGJvZHk+Cjx0cj4KPHRkIGNsYXNzPQ=="gutter">

?
1
1
?
1
2
<codeclass="objc">[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];
</code>

效果如下图所示:

\

一般情况,我们都会使用自己的颜色,下面这个宏用来设置RGB颜色非常方便:

?
1
1
?
1
2
<codeclass="objc">#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue &0xFF0000) >>16))/255.0green:((float)((rgbValue &0xFF00) >>8))/255.0blue:((float)(rgbValue &0xFF))/255.0alpha:1.0]
</code>

将上面这个宏放到AppDelegate.m文件中,然后通过这个宏来创建一个UIColor对象(根据指定的RGB)。如下示例:

?
1
1
?
1
2
<codeclass="objc">[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];
</code>

默认情况下,导航栏的translucent属性为YES。另外,系统还会对所有的导航栏做模糊处理,这样可以让iOS 7中导航栏的颜色更加饱和。如下图,是translucent值为NO和YES的对比效果:

\

要想禁用translucent属性,可以在Storyboard中选中导航栏,然后在Attribute Inspectors中,取消translucent的勾选。

在导航栏中使用背景图片

如果希望在导航栏中使用一个图片当做背景,那么你需要提供一个稍微高一点的图片(这样可以延伸到导航栏背后)。导航栏的高度从44 points(88 pixels)变为了64 points(128 pixels)。

我们依然可以使用setBackgroundImage:方法为导航栏设置自定义图片。如下代码所示:

?
1
1
?
1
2
<codeclass="objc">[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];
</code>

示例工程中提供了两个背景图片:nav_bg.png 和 nav_bg_ios7.png。运行一下试试看吧,如下效果:

\

定制返回按钮的颜

在iOS 7中,所有的按钮都是无边框的。其中返回按钮会有一个V型箭头,以及上一个屏幕中的标题(如果上一屏幕的标题是空,那么就显示”返回”)。要想给返回按钮着色,可以使用tintColor属性。如下代码所示:

?
1
1
?
1
2
<codeclass="objc">[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
</code>

除了返回按钮,tintColor属性会影响到所有按钮标题和图片。

\

如果想要用自己的图片替换V型,可以设置图片的backIndicatorImage和backIndicatorTransitionMaskImage。如下代码所示:

?
1
2
1
2
?
1
2
3
<codeclass="objc">[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]];
</code>

图片的颜色是由tintColor属性控制的。

\

修改导航栏标题的字体

跟iOS 6一样,我们可以使用导航栏的titleTextAttributes属性来定制导航栏的文字风格。在text attributes字典中使用如下一些key,可以指定字体、文字颜色、文字阴影色以及文字阴影偏移量:

UITextAttributeFont – 字体keyUITextAttributeTextColor – 文字颜色keyUITextAttributeTextShadowColor – 文字阴影色keyUITextAttributeTextShadowOffset – 文字阴影偏移量key

如下代码所示,对导航栏的标题风格做了修改:

?
1
2
3
4
5
6
7
1
2
3
4
5
6
7
?
1
2
3
4
5
6
7
8
<codeclass="objc">NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor colorWithRed:0.0green:0.0blue:0.0alpha:0.8];
    shadow.shadowOffset = CGSizeMake(0,1);
    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor colorWithRed:245.0/255.0green:245.0/255.0blue:245.0/255.0alpha:1.0], NSForegroundColorAttributeName,
                                                           shadow, NSShadowAttributeName,
                                                           [UIFont fontWithName:@"HelveticaNeue-CondensedBlack"size:21.0], NSFontAttributeName, nil]];
</code>

运行效果如下图所示:

\

修改导航栏标题为图片

如果要想将导航栏标题修改为一个图片或者logo,那么只需要使用下面这行代码即可:

?
1
1
?
1
2
<codeclass="objc">self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];
</code>

上面的代码简单的修改了titleView属性,将一个图片赋值给它。注意:这不是iOS 7中的新功能,之前的iOS版本就可以已经有了。

具体效果如下图所示:

\

添加多个按钮

同样,这个技巧也不是iOS 7的,开发者经常会在导航栏中添加多个按钮,所以我决定在这里进行介绍。我们可以在导航栏左边或者右边添加多个按钮。例如,我们希望在导航栏右边添加一个照相机和分享按钮,那只需要使用下面的代码即可:

?
1
2
3
4
5
1
2
3
4
5
?
1
2
3
4
5
6
<codeclass="objc">UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];
UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:nil];
 
NSArray *actionButtonItems = @[shareItem, cameraItem];
self.navigationItem.rightBarButtonItems = actionButtonItems;
</code>

如下效果:

\

修改状态栏的风格

在老版本的iOS中,状态栏永远都是白色风格。而在iOS 7中,我们可以修改每个view controller中状态栏的外观。通过UIStatusBarStyle常量可以指定状态栏的内容是暗色或亮色。默认情况下,状态栏的显示是暗色。也就是说,状态栏上的时间、电池指示器和Wi-Fi信号显示为暗色。如果导航栏中使用暗色为背景,那么看起来的效果如下图所示:

\

如上图这种情况下,我们可能希望将导航栏的风格修改为亮色。这里有两个方法可以实现。在iOS 7中,我们可以在每个view controller中overridingpreferredStatusBarStyle:方法,如下所示:

?
1
2
3
4
1
2
3
4
?
1
2
3
4
5
<codeclass="objc">-(UIStatusBarStyle)preferredStatusBarStyle
{
    returnUIStatusBarStyleLightContent;
}
</code>

上面代码的效果如下图所示:

\

在iOS 7中,通过上面的方法来修改状态栏风格非常的棒。另外,我们也可以使用UIApplication的statusBarStyle方法来设置状态栏,不过,首先需要停止使用View controller-based status bar appearance。在project target的Info tab中,插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO。

\

然后就可以使用下面的代码来设置状态栏风格了:

?
1
1
?
1
2
<codeclass="objc">[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
</code>

隐藏状态栏

有时候我们需要隐藏状态栏,那么此时我们在view controller中override方法prefersStatusBarHidden:即可,如下代码所示:

?
1
2
3
4
1
2
3
4
?
1
2
3
4
5
<codeclass="objc">- (BOOL)prefersStatusBarHidden
{
    returnYES;
}
</code>

本文转载自:http://www.2cto.com/kf/201403/285887.html

共有 人打赏支持
嘻哈开发者
粉丝 54
博文 114
码字总数 1519
作品 0
广州
程序员
iOS开发技巧(系列十四:iOS7导航栏和iOS6的区别)

在说明autolayout之前先说明一下iOS6和iOS7的导航栏区别,还是通过简单的图来说明吧,一个坐标为(0,0,320,200)的ImageView,即Y坐标为0,如下图, iOS6的效果图, iOS7的效果图, 可以看出明...

召唤攻城狮
2014/06/14
0
4
iOS 状态栏和导航栏的控制

iOS的项目多数会遇到控制状态栏和导航栏的问题,比如隐藏状态栏、控制状态栏的文字颜色等,导航栏也有同样需求。 自从iOS7之后状态栏就是透明的了 高度 20.f 导航栏的高度是 64.f 状态栏的控...

w_sen
2016/06/27
1K
3
UINavigationController详解(四)iOS7新特性

@导航栏新不同 1.控制器视图默认全屏显示,导航栏的不同设置会带来不一样的效果 2.导航栏的颜色设置为新增属性:barTintColor 3.导航栏的属性:tintColor用于设置控件颜色 4.导航栏背景图片不同...

humingtao2013
2014/03/18
0
0
UINavigationController导航栏的一些问题

1.设置导航栏颜色 iOS7之前: [self.navigationController.navigationBar setTintColor:[UIColor whiteColor]]; iOS7: [self.navigationController.navigationBar setBarTintColor:[UIColor......

LouDev
2014/02/19
2.7K
0
UINavigationBar 使用总结

UINavigationBar是我们在开发过程中经常要用到的一个控件,下面我会为大家介绍一些常用的用法。 1. 设置导航栏的标题 这个不多说,直接上代码 2. 设置导航栏的背景颜色 得到的效果如下: Sn...

刀客445
2016/08/03
27
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
45分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
1
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部