zoukankan      html  css  js  c++  java
  • ios7状态栏和导航条的一些设置

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

    默认的导航栏在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 ] ] ;

    简单地把它在某处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。

    加载中...vcC4sbO+sM28xqw=" class="aligncenter size-full wp-image-2553" src="http://www.2cto.com/uploadfile/Collfiles/20131208/Navigation-Bar-Background-Image.jpg" />

    改变导航栏标题的字体

    就像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 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]];

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

    加载中...

    自定义后退按钮的颜色

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

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

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

    加载中...

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

    1 [[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];
    [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[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] 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的发布,你可以改变每个视图控制器状态栏的外观。您可以使用UIStatusBarStyle常量来指定状态栏的内容是否应该或深或浅。默认情况下,状态栏会显示暗的内容。换句话说,如时间,电池指示灯和Wi-Fi信号的项目显示为暗色。如果您使用的是深色背景在导航栏上,你最终会像这样:

    知识普及:

    ios上状态栏 就是指的最上面的20像素高的部分 
    状态栏分前后两部分,要分清这两个概念,后面会用到:

      • 前景部分:就是指的显示电池、时间等部分;

      • 背景部分:就是显示黑色或者图片的背景部分;

        如下图:前景部分为白色,背景部分为黑色

    设置statusBar的【前景部分】

    简单来说,就是设置显示电池电量、时间、网络部分标示的颜色, 
    这里只能设置两种颜色:

    • 默认的黑色(UIStatusBarStyleDefault
    • 白色(UIStatusBarStyleLightContent

    可以设置的地方有两个:plist设置里面 和 程序代码里

    1.plist设置statusBar

    在plist里增加一行 UIStatusBarStyle(或者是“Status bar style”也可以),这里可以设置两个值,就是上面提到那两个 
    UIStatusBarStyleDefault 和 UIStatusBarStyleLightContent

    这样在app启动的launch页显示的时候,statusBar的样式就是上面plist设置的风格。

    2.程序代码里设置statusBar

    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];  
    

    或者

    //相对于上面的接口,这个接口可以动画的改变statusBar的前景色  
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];
    

    不仅如此,ios还很贴心的在UIViewController也增加了几个接口, 
    目的是让状态栏根据当前显示的UIViewController来定制statusBar的前景部分。

    • - (UIStatusBarStyle)preferredStatusBarStyle;

    • - (UIViewController *)childViewControllerForStatusBarStyle;

    • - (void)setNeedsStatusBarAppearanceUpdate

    - (UIStatusBarStyle)preferredStatusBarStyle:

    在你自己的UIViewController里重写此方法,返回你需要的值(UIStatusBarStyleDefault 或者 UIStatusBarStyleLightContent);

    注意:

    • 这里如果你只是简单的return一个固定的值,那么该UIViewController显示的时候,程序就会马上调用该方法,来改变statusBar的前景部分;
    • 如果在该UIViewController已经在显示在当前,你可能还要在当前页面不时的更改statusBar的前景色,那么,你首先需要调用下面的setNeedsStatusBarAppearanceUpdate方法(这个方法会通知系统去调用当前UIViewController的preferredStatusBarStyle方法), 这个和UIView的setNeedsDisplay原理差不多(调用UIView对象的setNeedsDisplay方法后,系统会在下次页面刷新时,调用重绘该view,系统最快能1秒刷新60次页面,具体要看程序设置)。

    - (UIViewController *)childViewControllerForStatusBarStyle:

    这个接口也很重要,默认返回值为nil。当我们调用setNeedsStatusBarAppearanceUpdate时,系统会调用application.window的rootViewController的preferredStatusBarStyle方法,我们的程序里一般都是用UINavigationController做root,如果是这种情况,那我们自己的UIViewController里的preferredStatusBarStyle根本不会被调用; 
    这种情况下childViewControllerForStatusBarStyle就派上用场了, 
    我们要子类化一个UINavigationController,在这个子类里面重写childViewControllerForStatusBarStyle方法,如下:

    - (UIViewController *)childViewControllerForStatusBarStyle{
        return self.topViewController;
    }
    

    上面代码的意思就是说,不要调用我自己(就是UINavigationController)的preferredStatusBarStyle方法,而是去调用navigationController.topViewControllerpreferredStatusBarStyle方法,这样写的话,就能保证当前显示的UIViewController的preferredStatusBarStyle方法能影响statusBar的前景部分。

    另外,有时我们的当前显示的UIViewController可能有多个childViewController,重写当前UIViewController的childViewControllerForStatusBarStyle方法,让childViewController的preferredStatusBarStyle生效(当前UIViewController的preferredStatusBarStyle就不会被调用了)。

    简单来说,只要UIViewController重写的的childViewControllerForStatusBarStyle方法返回值不是nil,那么,UIViewController的preferredStatusBarStyle方法就不会被系统调用,系统会调用childViewControllerForStatusBarStyle方法返回的UIViewController的preferredStatusBarStyle方法。

    - (void)setNeedsStatusBarAppearanceUpdate:

    让系统去调用application.window的rootViewController的preferredStatusBarStyle方法,如果rootViewController的childViewControllerForStatusBarStyle返回值不为nil,则参考上面的讲解。


    设置statusBar的【背景部分】

    背景部分,简单来说,就是背景色;改变方法有两种:

    系统提供的方法

    navigationBarsetBarTintColor接口,用此接口可改变statusBar的背景色

    注意:一旦你设置了navigationBar- (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics接口,那么上面的setBarTintColor接口就不能改变statusBar的背景色,statusBar的背景色就会变成纯黑色。

    另辟蹊径

    创建一个UIView, 
    设置该UIView的frame.size 和statusBar大小一样, 
    设置该UIView的frame.origin 为{0,-20}, 
    设置该UIView的背景色为你希望的statusBar的颜色, 
    在navigationBar上addSubView该UIView即可。

    隐藏状态栏

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

    - (BOOL)prefersStatusBarHidden
    {
    return YES;
    }

    总结

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

    自定义导航条和状态栏:

    在自定义导航栏背景时,可能会遇到以下一些问题:

    1、当设置导航栏背景后,状态栏的颜色也会跟着一起改变掉,这可能不是你说希望看到的

    2、IOS7以上的版本和低版本显示出来的导航栏高度位置有差别,这个差别就是状态栏的高度20,为了兼容低版本,必须统一

    解决思路:

    1、不正常的是状态栏的背景也一起变了,而状态栏的文字是可以通过其他API去设置的:如 [[UIApplicationsharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

    2、文字是附于背景上方的,因此考虑在这之间插入一个矩形颜色块(甚至图片也可以)

    3、根据这种思路,第二种思路也随之产生,就是制作出20+44=64高度的图片,作为导航栏背景图,其中上方20为状态栏的颜色。

    4、本文实现第一种思路,并且模拟器和真机以及IOS6,7均已验证可行

    //7.0以上版本通过一句代码解决高度上升问题

    if ([[[UIDevicecurrentDevice] systemVersion] doubleValue]>=7.0) {

         self.edgesForExtendedLayout=UIRectEdgeNone;

    }

    //创建一个高20的假状态栏背景

    UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, -20, 320, 20)];

    //将它的颜色设置成你所需要的,这里我选择了黑色,表示我很沉稳

        statusBarView.backgroundColor=[UIColor blackColor];

    //这里我的思路是:之前不理想的状态是状态栏颜色也变成了导航栏的颜色,但根据这种情况,反而帮助我判断出此时的状态栏也是导航栏的一部分,而状态栏文字浮于上方,因此理论上直接在导航栏上添加一个subview就是他们中间的那一层了。

    //推得这样的代码:

        [self.navigationController.navigationBar addSubview:statusBarView];

    //修改导航栏文字颜色,这里我选择白色,表示我很纯洁

        [[UIApplicationsharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

    //设置导航栏的背景图片

    [self.navigationController.navigationBarsetBackgroundImage:[UIImageimageNamed:@"bg.jpg"] forBarMetrics:UIBarMetricsDefault];

  • 相关阅读:
    函数
    字符串格式化
    集合
    习题02
    int/str/list/tuple/dict必会
    元组/字典
    列表方法
    练习题(format、expandtabs、片层)
    字符串方法
    JMM
  • 原文地址:https://www.cnblogs.com/tangaofeng/p/4985082.html
Copyright © 2011-2022 走看看