自定义ios7标题栏和状态栏

注：本文译自 Customizing Navigation Bar and Status Bar in iOS 7

跟大家一样，我一直忙碌的适配我的APP在ios7下的表现。iOS7的最新版本引入了大量的视觉变化。从开发人员的角度来看，导航栏和状态栏是2个最显而易见的变化。状态栏现在是透明/半透明的，也就是说view 可以透过状态栏,导航栏的背景图像可以向上延伸的状态栏的后面。

如果你自己阅读此片文章 你可以学会如上的几个技巧:

 

本工程是在xcode5下编写的。所以，如果你还在使用旧版本的Xcode，请确保您运行示例Xcode项目之前升级到Xcode中5。

默认的导航栏在iOS中7

在我们进去的定制，让我们先来看看由Xcode 5和iOS 7生成的默认导航栏。只需用单-视图-控制器模板的Xcode项目。嵌入视图控制器在导航控制器。如果您不想从头开始，你可以下载这个示例的Xcode项目。

Xcode5下面有iOS 6和iOS7两个模拟器。你可以尝试用这两个不同版本的模拟器运行示例项目。

正如你所看到的，在iOS的7导航栏默认是交织在一起的状态栏。默认的颜色也改为浅灰色，以及。

更改导航栏的背景颜色

在iOS7，tintColor属性不能再用于设置栏的颜色。相反，使用barTintColor属性来改变背景颜色。您可以将下面的代码在didFinishLaunchingWithOptions：AppDelegate.m文件下。

1	[  [  UINavigationBar appearance ]  setBarTintColor  ： [ UIColor yellowColor  ]  ]  ;

下面是结果：

通常你直接使用系统的颜色并不好看。下面是设置RGB颜色一个非常有用的宏：

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

简单地把它在某处AppDelegate.m的开始，并使用它来创建与任何RGB色彩你想要的任何的UIColor对象。下面是一个例子：

1	[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

默认情况下，导航栏的半透明属性设置为YES。此外，还有适用于所有导航栏系统模糊。在此设定下，iOS的7趋于饱和度的栏的颜色。下面是示例导航栏用不同的半透明设置。

要禁用半透明的属性，你可以简单地选择在xib的导航栏。在属性检查里面，取消半透明复选框,如下图。

在导航栏使用背景图片

如果您的应用程序使用了自定义图像作为栏的背景，你需要提供一个“更大”的图片，使其延伸了状态栏的后面。导航栏的高度是从44点（88像素）更改为64点（128像素）。

你仍然可以使用了setBackgroundImage：方法来指定自定义图像的导航栏。下面是代码行设置背景图片：

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

例程捆绑了两种不同的背景图片：nav_bg.png和nav_bg_ios7.png。

改变导航栏标题的字体

就像iOS 6，您可以通过使用导航栏的“titleTextAttributes”属性来自定义的文本样式。您可以指定字体，文字颜色，文字阴影颜色，文字阴影在文本标题偏移属性字典，使用下面的文本属性键：

• UITextAttributeFont - 字体
• UITextAttributeTextColor - 文字颜色
• UITextAttributeTextShadowColor - 文字阴影颜色
• UITextAttributeTextShadowOffset - 偏移用于文本阴影

下面是示例代码片段改变的导航栏标题的字体样式：

NSShadow *shadow = [[NSShadow alloc] init];       shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];       shadow.shadowOffset = CGSizeMake(0, 1);       [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAnd Keys:                                                                                          [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttribu teName,                                                                                          shadow, NSShadowAttributeName,                                                                                          [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];

如果您更改该示例应用程序，导航栏中的标题看起来应该像这样：

自定义后退按钮的颜色

在iOS7，所有的栏按钮都是没编辑的的。你可以改变tintColor属性，它提供了一个快速和简单的方式，。下面是一个示例代码片段：

1	[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

除了后退按钮，请注意，tintColor属性影响所有按钮标题和按钮图像。

如果你想使用一个自定义图像来替换默认的字体，可以设置backIndicatorImage和backIndicatorTransitionMaskImage。

1	[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];   [[UINavigationBar appearance] setBackIndicatorTransiti onMaskImage:[UIImage imageNamed:@"back_btn.png"]];

图像的颜色由tintColor属性控制。

使用图片作为导航栏标题

不想标题栏是光秃秃的文字？您可以通过使用代码行中的图像或标志取代它：

1	self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

我们简单地改变titleview用来自定义图像来。这不是在iOS7的新功能。该代码也适用于较低版本的iOS。

添加多个栏按钮项目

同样，这个技巧是不是专门为iOS 7。，您希望添加导航栏的一侧不止一个栏按钮项目。无论是leftBarButtonItems和rightBarButtonItems  您在导航栏左侧/右侧指定自定义栏按钮项目。比如你想添加一个摄像头和一个共享按钮右侧的吧。您可以使用下面的代码：

  UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemI tem:UIBarButtonSystemItemAct ion target:self action:nil];
  UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemI tem:UIBarButtonSystemItemCam era target:self action:nil];
  NSArray *actionButtonItems = @[shareItem, cameraItem];
  self.navigationItem.rightBarButtonItems = actionButtonItems;

下面是示例结果：

改变状态栏的风格

在旧版本的iOS，状态栏总是在黑色的风格，没有太多可以改变。与iOS 7的发布，你可以改变每个视图控制器状态栏的外观。您可以使用UIStatusBarStyle常量来指定状态栏的内容是否应该或深或浅。默认情况下，状态栏会显示暗的内容。换句话说，如时间，电池指示灯和Wi-Fi信号的项目显示为暗色。如果您使用的是深色背景在导航栏上，你最终会像这样：

在这种情况下，你可能需要的状态栏的风格改变从暗到亮。有两种方法可以做到这一点。在iOS系统7，你可以控制从单个视图控制器通过覆盖preferredStatusBarStyle状态栏的样式：

- ( UIStatusBarStyle ) preferredStatusBarStyle 
{  
     return  UIStatusBarStyleLightContent; 
}

对于示例应用程序，只要把上面的代码中RecipeNavigationController.m和状态栏和白得的内容。

上面介绍的方法是首选的方法来改变状态栏风格的iOS 7。或者，您也可以使用的UIApplication statusBarStyle方法设置状态栏的风格。但首先你需要选择退出““View controller-based status bar appearance”。根据项目目标的信息选项卡中，插入一个名为“View controller-based status bar appearance”新字符串并将其值设置为NO。

通过禁用“View controller-based status bar appearance”，您可以通过使用下面的代码设置状态栏的样式：

1	[  [ 的UIApplication sharedApplication  ]  setStatusBarStyle  ：  UIStatusBarStyleLightContent  ]  ;

隐藏状态栏

在任何情况下，你要隐藏状态栏，可以覆盖prefersStatusBarHidden：在你的控制器：

-   ( BOOL ) prefersStatusBarHidden {      return   YES ; }

总结

iOS的7为开发人员提供新的自由定制的导航栏和状态栏的外观。如果您是从的iOS 6移植应用程序到iOS 7或创建一个全新的应用程序为iOS 7，我希望你会发现这些有用的技巧。

为了您的完整的参考，你可以从这里下载本演示项目的源代码。只是取消注释在示例项目中的任何代码片段来测试的变化。

像你们许多人，我还在探索的iOS 7 SDK的所有新的变化。我绝不是在iOS 7的专家。如果您发现文中的任何错误，请让我知道。如果您发现与导航栏和状态栏的任何提示和技巧，也请与我们留下评论如下分享。