开发者社区> 西关大叔> 正文

控制iOS的导航栏和状态栏的样式

简介: 这是一个很常用的开发场景,就是改变导航栏上的文字颜色与背景色,如果你曾有 windows form 开发经验一定会笑我:“卧槽,这有什么好写的,不就是设置两个属性就可以了吗?” 我以前也这样认为,但在iOS中这个过程是很落后的,先来建立一个简单的带有导航栏的项目,运行效果是这样的: 默认效果 这个界面很不怎么样,至少很多情况下我们希望我们的APP在 导航栏上能显示我们的主题色。
+关注继续查看

这是一个很常用的开发场景,就是改变导航栏上的文字颜色与背景色,如果你曾有 windows form 开发经验一定会笑我:“卧槽,这有什么好写的,不就是设置两个属性就可以了吗?” 我以前也这样认为,但在iOS中这个过程是很落后的,先来建立一个简单的带有导航栏的项目,运行效果是这样的:

默认效果

这个界面很不怎么样,至少很多情况下我们希望我们的APP在 导航栏上能显示我们的主题色。

关于 UIColor

UIKit 的颜色类(UIColor)是很难用的,而且系统颜色也非常有限。鉴于此得先写个直接输入16进制数就能得到颜色实例的函数,代码如下所示:

func uiColorFromHex(rgbValue:UInt32)-> UIColor {
    let red = CGFloat((rgbValue & 0xFF0000) >> 16)/256.0
    let green = CGFloat((rgbValue & 0xFF00) >> 8)/256.0
    let blue = CGFloat(rgbValue & 0xFF)/256.0
    return UIColor(red:red, green:green, blue:blue, alpha:1.0)
}

改变导航栏的颜色

如果要统一地修改所有的导航栏的颜色,那么就要在 AppDelegate.swift 文件内的 didFinishLauchingWithOptions 方法内处理。如果每个视图都有各自的颜色设定那么就得在每个 ViewController 内的 viewDidLoaded 方法实现了。

AppDelegate.swift 的代码如下:

let navigationBarAppearance = UINavigationBar.appearance()

navigationBarApparance.barTintColor = uiColorFromHex(0x007AFF)
navigationBarApparance.tintColor = uiColorFromHex(0xFFFFFF)
  • barTintColor 属性是用于改变导航栏的背景色。(卧槽!Apple 的命名果然还是一如既往的“好”啊,用 backgroundColor 就不用附加说明了,真难以里解这个属性被命名时这个程序员脑子是怎么想的。 )
  • tintColor (另一个更让人抓狂的属性名)属性控制:
    • 按钮标题
    • 左/右按钮图型
645016-20151105153705008-1016942.png

此时,你会发现导航栏中的文字仍然默认的黑色,如果我们想这个文字也能变成白色那么并不是粗暴直接设置文字颜色,当然如果要这么做的话可以设置 navigationBarAppearance.titleTextAttributes 属性实现。但另一个更好的办法是更改导航栏的样式:

navigationBarApparance.barStyle = UIBarStyle.Black

这个 UIBarStyle.Black 的原文解释是这样的:

Use a black background with light content.

好吧,我们可以直接理解为将背景透明化吧。(这种文档实在是糟透了)

Anyway 至少现在已经接近我们所需要的效果了。

645016-20151105153716102-1356325875.png

剩下来就是上方那个占高24pt 状态栏颜色还是默认的黑色, 我们还得将它给换过来。被前面的代码给折磨过后,思路上就是一样的 “light content”

我们就在设置导航栏后加入以下的代码:

UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent

最后还得做点点小修改,用源代码编辑器打开 Info.plist 文件,然后加入以下的代码

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

禁止掉使用默认的状态栏样式。

PList

好了,这就是我们所需要的最终效果。

最终效果

为了大家方便阅读,我将整个方法的代码也贴出来:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    let navigationBarApparance = UINavigationBar.appearance()
    
    navigationBarApparance.barTintColor = uiColorFromHex(0x007AFF)
    navigationBarApparance.tintColor = uiColorFromHex(0xFFFFFF)
    
    navigationBarApparance.barStyle = UIBarStyle.Black

    UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent
      
    return true
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS--设置系统导航栏右上角按钮不显示问题
iOS--设置系统导航栏右上角按钮不显示问题
70 0
iOS开发-导航栏标题动画
iOS开发-导航栏标题动画
75 0
iOS开发 - 系统导航栏左右上角按钮如何不需要定义就可以添加小红点
iOS开发 - 系统导航栏左右上角按钮如何不需要定义就可以添加小红点
50 0
iOS开发 - 渐变导航栏终极版
iOS开发 - 渐变导航栏终极版
35 0
玩转iOS导航栏
玩转iOS导航栏
81 0
iOS 二级页面返回一级页面导航栏错位bug解决方法
iOS 二级页面返回一级页面导航栏错位bug解决方法
230 0
IOS正确解决隐藏导航栏后push、pop闪黑问题
IOS正确解决隐藏导航栏后push、pop闪黑问题
345 0
iOS开发UINavigation系列一——导航栏UINavigtionBar
iOS开发UINavigation系列一——导航栏UINavigtionBar
154 0
+关注
西关大叔
近二十年软件开发、项目管理、团队建设和管理经验。致力于互联网技术应用与大数据应用方面的研究与开发工作。曾任多家软件公司的高级软件工程师、项目经理、首席架构师和技术总监等职务。现任广州市增增智能科技有限公司CEO,从事视觉智能、语音智能及IoT等技术的产品研发与企业经营方面的工作
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
深入剖析iOS性能优化
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载