iOS7新特性的兼容性处理方法 之三

转载有人性!转载自 这篇文章html

 

无论适配iOS7,或者是iOS7新项目适配设计师也好,在状态栏、导航栏以及导航按钮每每会是比较难解决的。这篇文章就很好地解决了大部分状况。ios

 

近期,跟大多数开发者同样,我也正忙于对程序进行升级以适配iOS 7。最新的iOS 7外观上有大量的改动。从开发者的角度来看,导航栏和状态栏就发生了明显的变化。状态栏如今是半透明的了,这也就意味着导航栏会显示在状态栏后面。有些状况下,导航栏的背景图片能够延伸显示到状态栏后面。

以前我曾经写过一篇关于如何定制导航栏的文章。不过如今是时候对其进行更新了。下面就是本文将要介绍的内容:
iOS 7中默认的导航栏
设置导航栏的背景颜色
在导航栏中使用背景图片
定制返回按钮的颜色
修改导航栏标题的字体
修改导航栏标题为图片
添加多个按钮
修改状态栏的风格
隐藏状态栏
总结
app

 

 

本文提供的代码须要用Xcode 5来执行。若是你还在使用老版本的Xcode,那么在运行示例以前请将Xcode升级到Xcode 5。ide

iOS 7中默认的导航栏
在开始定制以前,咱们先来看看iOS 7中默认导航栏的外观。经过Xcode用Single View Controller模板建立一个工程。而后将view controller嵌入到一个navigation controller中。若是你不想从头开始,那么也能够在这里下载到这个示例工程。Xcode 5包含有iOS 6和iOS 7模拟器,咱们能够在这两个不一样的模拟器版本中运行示例程序,进行对比,以下图所示:
测试


如上图所示,在iOS 7中的导航栏默认状况下跟状态栏是交织在一块儿的,而且它的颜色也被修改成亮灰色。

设置导航栏的背景颜色
在iOS 7中,再也不使用tintColor属性来设置导航栏的颜色,而是使用barTintColor属性来修改背景色。咱们能够在AppDelegate.m文件中的方法didFinishLaunchingWithOptions:里面添加以下代码来修改颜色:
字体

[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]]; 


效果以下图所示:

通常状况,咱们都会使用本身的颜色,下面这个宏用来设置RGB颜色很是方便:
spa

#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文件中,而后经过这个宏来建立一个UIColor对象(根据指定的RGB)。以下示例:
设计

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


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

要想禁用translucent属性,能够在Storyboard中选中导航栏,而后在Attribute Inspectors中,取消translucent的勾选。

在导航栏中使用背景图片
若是但愿在导航栏中使用一个图片当作背景,那么你须要提供一个稍微高一点的图片(这样能够延伸到导航栏背后)。导航栏的高度从44 points(88 pixels)变为了64 points(128 pixels)。咱们依然可使用setBackgroundImage:方法为导航栏设置自定义图片。以下代码所示:
3d

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


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

 

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

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

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

若是想要用本身的图片替换V型,能够设置图片的backIndicatorImage和backIndicatorTransitionMaskImage。以下代码所示:

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]]; 
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]]; 

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


修改导航栏标题的字体
跟iOS 6同样,咱们可使用导航栏的titleTextAttributes属性来定制导航栏的文字风格。在text attributes字典中使用以下一些key,能够指定字体、文字颜色、文字阴影色以及文字阴影偏移量:
UITextAttributeFont – 字体key
UITextAttributeTextColor – 文字颜色key
UITextAttributeTextShadowColor – 文字阴影色key
UITextAttributeTextShadowOffset – 文字阴影偏移量key

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

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 dictionaryWithObjectsAndKeys: 
                                                           [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName, shadow, NSShadowAttributeName, [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]]; 

运行效果以下图所示:


修改导航栏标题为图片
若是要想将导航栏标题修改成一个图片或者logo,那么只须要使用下面这行代码便可:

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

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

添加多个按钮
一样,这个技巧也不是iOS 7的,开发者常常会在导航栏中添加多个按钮,因此我决定在这里进行介绍。咱们能够在导航栏左边或者右边添加多个按钮。例如,咱们但愿在导航栏右边添加一个照相机和分享按钮,那只须要使用下面的代码便可:

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; 

以下效果:


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

如上图这种状况下,咱们可能但愿将导航栏的风格修改成亮色。这里有两个方法能够实现。在iOS 7中,咱们能够在每一个view controller中overridingpreferredStatusBarStyle:方法,以下所示:

-(UIStatusBarStyle)preferredStatusBarStyle 
{ 
    return UIStatusBarStyleLightContent; 
} 

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

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

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

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; 

 

隐藏状态栏
有时候咱们须要隐藏状态栏,那么此时咱们在view controller中override方法prefersStatusBarHidden:便可,以下代码所示:

- (BOOL)prefersStatusBarHidden 

{ 

    return YES; 

} 

 

总结
iOS 7给开发者提供了一些新的自由度来定制导航栏和状态栏的外观。但愿上面的这些技巧能对你有用。这里能够下载到示例工程源码。只须要取消相关代码注释便可进行测试。

相关文章
相关标签/搜索