美文网首页iOSiOS开发程序员
NavigationBar&tabBar调色那些事儿

NavigationBar&tabBar调色那些事儿

作者: 非典型技术宅 | 来源:发表于2016-12-04 09:14 被阅读343次
    Paste_Image.png

    1. 导航栏调色那些事儿

    小规律:

    • 要设置内容,全找item
    • 要修改颜色及文字属性,找bar

    1.1 改变 NavigationBar 的背景颜色

    [UINavigationBar appearance].barTintColor = [UIColor blueColor];
    //如果使用的是backgroundColor,就会自带毛玻璃效果
    self.navigationBar.backgroundColor = [UIcolor blueColor];
    

    1.2 改变 NavigationBar 的字体颜色

    NavigationBar 上面有两处可以改变字体颜色,一是标题,二是左右按钮的文字。

    1.2.1 改变左右按钮的文字颜色:

    [UINavigationBar appearance].tintColor = [UIColor whiteColor];
    

    1.2.2 改变标题的文字颜色

    • 字典对应了一个系统自带的KEY,就是
      • 1,NSFontAttributeName:表示要穿一个字体UIFont
      • 2,NSForegroundColorAttributeName:表示要传一个颜色
    [[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];
    

    1.3 去掉 NavigationBar 下方的阴影

    iOS 7 NavigationBar的下方默认是有一条阴影的,如果想要 NavigationBar 和下面内容的背景颜色融为一体的话,就要去掉这个阴影。- 这里需要注意的是,如果图片传入的是nil,依然还会添加默认的阴影线。

    • 系统判断是否出现阴影线的标准是:是否传入照片。所以我们用[UIImage new]创建了一个空照片(不是nil)。
    [[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];[[UINavigationBar appearance] setShadowImage:[UIImage new]];
    

    1.4 改变 TabBar 的字体颜色

    [UITabBarItem.appearance setTitleTextAttributes: @{ NSForegroundColorAttributeName : [UIColor blueColor] } forState:UIControlStateNormal];
    [UITabBarItem.appearance setTitleTextAttributes: @{ NSForegroundColorAttributeName : [UIColor whiteColor] } forState:UIControlStateSelected];
    

    1.5 改变 StatusBar 的颜色

    iOS7以后,status bar 的背景颜色变成了透明色,而且系统会根据 app的颜色自动改变 status bar 的字体颜色(黑和白)。但是这个自动改变的字体颜色并不一定和所有的 app 都搭配,比如我们 app 的主题色是稍微浅一丢丢的蓝,但是系统匹配的 status bar 的字体颜色就是黑色,看起来就很不爽,所以就要强制将其改为白色。

    • 方法一: 在 Info.plist 中的 Information Property List 中添加一个 Key为View controller-based status bar appearance的 item,其 Type 设为 Boolean,Value 设为 NO
    • 方法二: 然后在AppDelegate.mapplication:didFinishLaunchingWithOptions:中添加突下设置:
    [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
    

    1.6 隐藏 StatusBar

    有时候为了实现沉浸式设计,比如 app 首次打开的引导页,需要隐藏整个 StatusBar,方法如下:

    • 状态栏的高度是20
    • 方法一: 和改变 StatusBar 颜色一样,在 Info.plist 中的 Information Property List 中添加一个 Key为View controller-based status bar appearance的 item,其 Type 设为 Boolean,Value 设为 NO
    • 方法二: 在需要隐藏StatusBar 的 ViewController 中的viewDidLoad加入以下代码:
    if ([self respondsToSelector:@selector(setNeedsStatusBarAppearanceUpdate)]) { [self prefersStatusBarHidden]; [self setNeedsStatusBarAppearanceUpdate]; }
    
    • 方法三: 重写prefersStatusBarHidden:
    -(BOOL)prefersStatusBarHidden { return YES;}
    
    • 如果子控制器需要控制状态栏,在全局导航栏控制器下面还需要增加以下方法:
    - (UIViewController *)childViewControllerForStatusBarStyle{
       return self.topViewController;
    }
    

    1.7 给导航栏设置一张背景图片

    • 这张背景图片系统默认的高度是64
     [self.navigationBar setBackgoundImage:[UIImage imageNamed:@"navBar"] forBarMetrics:UIBarMetricsDefault];
    

    1.8 导航栏的半透明效果

    • 如果设置成NO,tableView就从状态栏下面开始。
    • 如果是YES,就带了毛玻璃效果,tableView就从屏幕的左上角开始了。
    • 导航栏的默认高度是44.
    self.navigationBar.translucent = YES;
    

    1.9 自定义头部View

    self.navigationItem.titleView = [[UILabel alloc] init]; 
    

    2. 标签栏TableBar那些事儿

    2.1 调色

    可以完全参考导航栏的,几乎雷同。

    2.2 关闭半透明效果

    • 一旦关闭标签栏的半透明效果,控制器的view就不会到达屏幕最底部了,而是到了标签栏的紧上方。
    • 标签栏的默认高度是49.
    self.tabBar.translucent = NO;
    

    相关文章

      网友评论

      本文标题:NavigationBar&tabBar调色那些事儿

      本文链接:https://www.haomeiwen.com/subject/hgchmttx.html