Android状态栏着色实践

今日科技快讯

近日美国联邦巡回上诉法庭正式判定，苹果公司在滑动解锁专利侵犯诉讼中获胜，本次判决恢复了三星将向苹果赔偿1.196亿美元的裁定。刚刚经历了Note 7“爆炸门”的三星，再加上这起诉讼，不得不说损失惨重。

苹果公司在本案中指控三星侵犯了其“滑动解锁”专利、自动纠错功能以及一项用于探测手机号的专利。而在最新版 IOS10 操作系统中，苹果公司已不再使用“滑动解锁”功能，而是改为让用户“按下 Home键”以解锁手机。

作者简介

本篇是 VipOthershe 的第二篇投稿，分享了状态栏着色的三种方案，针对不同的情况进行了具体分析，希望大家喜欢。

VipOthershe 的博客地址：

http://www.jianshu.com/users/4235f2b5b350

前言

状态栏着色，也就是我们经常听到的沉浸式状态栏，关于沉浸式的称呼网上也有很多吐槽的，这里就不做过多讨论了，以下我们统称 状态栏着色，这样我觉得更加容易理解。

从 Android4.4 开始，才可以实现状态栏着色，并且从5.0开始系统更加完善了这一功能，可直接在主题中设置 <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 或者 getWindow().setStatusBarColor(color) 来实现，但毕竟4.4+的机器还有很大的占比，所以就有必要寻求其它的解决方案。

第一种方案

1. 首先将手机手机状态栏透明化：

在相应的 Activity 或 基类 执行这段代码就ok了。

可见在4.4到5.0的系统、5.0及以上系统的处理方式有所不同，除了这种代码修改额方式外，还可以通过主题来修改，需要在 values、values-v19、values-v21 目录下分别创建相应的主题：

给相应 Activity 或 Application 设置该主题就ok了。

两种方式根据需求选择就好了，到这里我们就完成了第一步，将状态栏透明化了。

2.给状态栏着色

完成了第一步，我们开始给状态栏加上想要的色彩吧！

将状态栏透明化后，直接运行项目会发现界面布局直接延伸到状态栏，针对这种情况首先可以在布局文件使用 android:fitsSystemWindows="true" 属性让布局不延伸到状态栏，接下来添加一个和状态栏高、宽相同的指定颜色 View 来覆盖被透明化的状态栏，或者使布局的背景颜色为需要的状态栏颜色。这两种方式在后边会说到，这里我们先看另外一种方式，也是个人比较喜欢的。我们分一下几种场景来讨论：

先做一些准备工作，在 values、values-v19 目录添加如下尺寸：

//values
<dimen name="padding_top">0dp</dimen>

//values-v19
<dimen name="padding_top">25dp</dimen>

关于25dp，在有些系统上可能有误差，这里不做讨论！

2.1 页面顶部使用Toolbar（或自定义title）

一般情况状态栏的颜色和Toolbar的颜色相同，既然状态栏透明化后，布局页面延伸到了状态栏，何不给Toolbar加上一个状态栏高度的顶部 padding 呢：

效果图如下：

至于 自定义title 的情况经测试也ok的，图就不贴了，有兴趣可看代码。

2.2、DrawerLayout + NavigationView + Toolbar

同样先给 Toolbar 设置顶部 padding，在4.4系统上看下效果：

NavigationView 竟然没延伸到状态栏，好吧，继续修改，当系统版本小于5.0时，进行如下设置：

再看效果：

2.3、页面顶部是一张图片

这种其实是最简单的，因为状态栏透明化后，布局已经延伸到状态，所以不需要其它额外操作：

效果如下：

2.4、页面底部切换Tab + fragment

某些情况下，当我们的页面采用 底部切换Tab + 多个fragment 时，可能每个fragment的顶部颜色不一样。如何实现状态栏颜色跟随 fragment 切换来变化呢？其实原理和 2.1节 类似，这里我们每个 fragment 采用自定义的Title，先看 FragmentOne 的布局：

我们设置 Title 的背景为 橙黄色、同时设置 paddingTop，FragmentTwo 的布局类似，只是 Title 的背景为蓝色。然后将两个Fragment添加到Activity中，最后看下切换的效果：

嗯，效果还是不错的，没有延迟的情况！可惜没早点发掘这种方式，以前的方案效果略不理想。

第二种方案

在方案一中，我们没有使用 android:fitsSystemWindows="true" 属性，而是将布局延伸到状态栏来处理，这次我们使用 android:fitsSystemWindows="true" 属性，不让布局延伸到状态栏，这时状态栏就是透明的，然后添加一个和状态栏高、宽相同的指定颜色View来覆盖被透明化的状态栏。我们一步步来实现。

1、第一步还是先将状态栏透明化，方法同上。

2、在布局文件中添加android:fitsSystemWindows="true"属性：

3、创建View并添加到状态栏：

原理很简单，但是要额外写这些代码。。。最后看下效果：

第三种方案

和方案二类似，同样使用 android:fitsSystemWindows="true" 属性，再修改布局文件的根布局为需要的状态栏颜色，因根布局的颜色被修改，所以你需要在里边多嵌套一层布局，来指定界面的主背景色，比如白色等等，否则就和状态栏颜色一样了。说起来有点抽象，还是看具体的例子吧：

1、先将状态栏透明化，方法同上。
2、修改布局文件：

修改完了，看效果：

如果项目有几十个界面，这样的方式修改起来还是挺累的，你还要考虑各种嵌套问题。

后两种方案的例子相对简单，有兴趣的话你可以尝试更多的场景！

三种方式如何选择，相信到这里你应该有答案了吧，我个人更喜欢第一种！
如果你有更好的方案，欢迎指点哦！

测试代码地址：

http://download.csdn.net/detail/shehuan320_/9612952

更多

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：

如果觉得有所帮助可赞赏一下作者

赞赏

人赞赏