没有更多推荐了，
不良信息举报
举报内容：
Android 沉浸式状态栏 一体化状态栏实现
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！51CTO旗下网站
Android沉浸式状态栏实现
应用市场上App越来越多的出现沉浸式状态栏的设计(如下图所示)状态栏和导航栏具有相同的颜色。Android在4.4开始对于该种效果的支持，而在4.4之下，状态栏只是黑框，无法控制。同时在4.4和5.0及其之上的版本对该种效果的支持又有所差异，因此要实现该种效果，可以将4.4归为一类，5.0及其之上归为一类。
作者：Jensen来源：| 11:00
应用市场上App越来越多的出现沉浸式状态栏的设计(如下图所示)状态栏和导航栏具有相同的颜色。Android在4.4开始对于该种效果的支持，而在4.4之下，状态栏只是黑框，无法控制。同时在4.4和5.0及其之上的版本对该种效果的支持又有所差异，因此要实现该种效果，可以将4.4归为一类，5.0及其之上归为一类。接下来，我们将一步步来在4.4和5.0及其之上来实现如下所示效果。
导航栏问题
在Android中，顶部导航栏目前常用的两种实现方式，一个是通过Toolbar，一个是通过自定义View的方式来实现。两种方式各有利弊。Toolbar为官方指定规范，开发者使用更方便，但可拓展性差，对于一些特殊的展示效果无法实现，而通过自定义方式的方式，可以支持更多展示效果，但却需要我们写更多的代码。两种方式在实现状态栏沉浸上也有所差别。
Toolbar默认主题会具有一个title，当我们使用Toolbar的时候，而没有去掉title，应用则会crash，报出如下所示错误。&
因此在使用Toolbar 的时候，我们需要style中添加如下属性配置
&item&name=&windowNoTitle&&true&/item&&
当然我们也可以通过代码动态去掉title，但当我们的主题从Theme.AppCompat作为父类继承的时候，通过代码并不可以去掉title。
自定义导航栏
当我们未设置windowNoTitle属性的时候，在导航栏之上有title。显然和我们要实现导航栏的沉浸式有所违背，因此实现对于导航栏的沉浸，
&item name=&windowNoTitle&&true&/item&该配置是必不可少的。
设置状态栏透明
去掉title之后，是否我们就可以实现上述的效果了呢?
这个时候，我们发现状态栏还是黑色，并没有沉浸，需要我们将状态栏设置为透明。
&item&name=&android:windowTranslucentStatus&&true&/item&&
该属性只有在在4.4和高于4.4版本上可以进行该属性的配置，但是在更低版本上则无法使用。配置该属性之后，执行效果如下图所示。
解决导航栏上移问题
这个时候，Toolbar被整体上移了，导致其部分功能也进入了状态栏之下，包括导航栏的内容也到了状态栏位置之中，显然这是不符合我们最初的要求的。如何解决这个问题?我们在Toolbar中添加fitSystemWindows属性，即可使得toolbar的上部空出一个高度，使得Toolbar内容部分脱离状态栏。
&android.support.v7.widget.Toolbar&&&&&&&&android:id=&@+id/toolbar&&&&&&&&&android:fitsSystemWindows=&true&&&&&&&&&android:layout_width=&match_parent&&&&&&&&&android:layout_height=&wrap_content&&&&&&&/android.support.v7.widget.Toolbar&&&
得到我们最终想要得到的效果
自定义导航栏与之实现类似。
fitsSystemWindows属性
前面对Toolbar的设置是在Toolbar中添加的fitSystemWindows属性，那么当我们将其属性添加到Toolbar所在的最外层的布局会怎么样呢?
&RelativeLayout&&&&&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&xmlns:tools=&http://schemas.android.com/tools&&&&&&android:id=&@+id/activity_toolbar&&&&&&android:layout_width=&match_parent&&&&&&android:layout_height=&match_parent&&&&&&android:fitsSystemWindows=&true&&tools:context=&com.example.netease.toolbardemo.activity.ToolbarActivity&&&&&&&&&android.support.v7.widget.Toolbar&&&&&&&&&android:id=&@+id/toolbar&&&&&&&&&&android:layout_width=&match_parent&&&&&&&&&&android:layout_height=&wrap_content&&&&&&&&/android.support.v7.widget.Toolbar&&&&/RelativeLayout&&&
执行之后，可以看到和之前未设置状态栏透明时的效果相同。
那么这个fitSystemWindows工作的原理是什么呢?通过上述实验，不难发现，对于沉浸状态栏的控制，该属性起到了一个很关键的作用。
接下来通过一个实验来验证下，该属性所起的作用，在Toolbar所在的布局中，在布局的底部添加一个Button.
&android.support.v7.widget.Toolbar&&&&&&&&&android:id=&@+id/toolbar&&&&&&&&&&android:fitsSystemWindows=&true&&&&&&&&&&android:layout_width=&match_parent&&&&&&&&&&android:layout_height=&wrap_content&&&&&&&&/android.support.v7.widget.Toolbar&&&&&&&&Button&&&&&&&&&android:text=&Test&&&&&&&&&&android:layout_width=&match_parent&&&&&&&&&&android:layout_height=&wrap_content&&&&&&&&&&android:background=&@color/colorAccent&&&&&&&&&&android:layout_alignParentBottom=&true&/&&&&
当我们将该属性设置到按钮上，又会发生什么呢?
&Button&&&&&&&&android:text=&Test&&&&&&&&&android:fitsSystemWindows=&true&&&&&&&&&android:layout_width=&match_parent&&&&&&&&&android:layout_height=&wrap_content&&&&&&&&&android:background=&@color/colorAccent&&&&&&&&&android:layout_alignParentBottom=&true&/&&&
通过比较可以很明显的看出，设置了fitsSystemWindows属性的View在其上部被设置了一个padding。根据之前做的实验，我们可以知道当我们设置了窗口状态栏透明之后，整个内容视图会向上移动了一个状态栏的高度，而当前为该View增加的padding的大小是不是和其高度相同呢?
Button&btn&=&(Button)&findViewById(R.id.test_btn);&&Log.i(&padding&,&btn.getPaddingTop()+&&);&&Rect&frame&=&new&Rect();&&getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);&&Log.i(&height&,&frame.top+&&);&&
获取按钮的padding高度和状态栏的高度，我们可以得到如下日志。
通过实验我们可以得出结论，fitSystemWindows属性会对所设置的View增加一个top
padding，因此当我们在实现让导航栏沉浸的时候，设置窗口状态栏的透明会使得视图整体上移，而借助fitSystemWindows属性的功能，为视图中最顶部的View设置一个和状态栏高度相同的padding，使得导航栏不会被顶到状态栏内。
当我们在一个视图中，多个View设置该属性时，发现只有第一个设置该属性的View会起作用，在视图布局上，自上而下的第一个View其作用。层级上则为最顶级的View上首先其作用。因此其功能归纳为：
为设置该属性的View增加一个和状态栏高度相同的toppadding
当视图中有多个View被设置了该属性，那么只布局上最顶部的View起作用
5.0及其以上
至此，我们可以完美的实现一个状态栏的沉浸，上述的实现是在Android
4.4版本上，在视图的最上部，会有一个黑色渐变的阴影，而在5.0设备上的展示效果如下所示，在状态栏上整个都会有一个阴影。当然不同厂家对此也有自己的一些优化，比如魅族在4.4上是不具有阴影的。
对于5.0及其之上，官方提供了对状态栏颜色控制的相应API，我们可以通过代码来控制状态栏的颜色，实现如下效果。
if(Build.VERSION.SDK_INT&&=&21)&{&&&&&&&&&&&&&Window&window&=&getWindow();&&&&&&&&&&&&&//取消设置透明状态栏,使&ContentView&内容不再沉浸到状态栏下&&&&&&&&&&&&&window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);&&&&&&&&&&&&&//需要设置这个&flag&才能调用&setStatusBarColor&来设置状态栏颜色&&&&&&&&&&&&&window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);&&&&&&&&&&&&&//设置状态栏颜色&&&&&&&&&&&&&window.setStatusBarColor(getResources().getColor(R.color.yx_red));&&&&&&&&&}&&
据此可以看出，当我们在5.0及其之上的实现中，可以不用进行状态栏透明的设置和fitSystemWindows属性的设置，直接通过代码来控制，但为了适应4.4版本，建议在代码中仍然按之前的方式实现，如果想在5.0及其高版本中实现去阴影，再手动在代码中控制。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条头条关注热点头条
24H热文一周话题本月最赞
讲师：747358人学习过
讲师：26339人学习过
讲师：353114人学习过
CTO专属活动
精选博文论坛热帖下载排行
Java Web程序员直接在JSP页面中书写Java代码的做法，使得页面中混杂有JavaScript、HTML、Java等多种语言的程序代码，可读性差，可复用性也...
订阅51CTO邮刊平板/笔记本
HiLink生态产品
终端云服务专区
无需root，EMUI4.0 状态栏完全沉浸的方法（分享）！
&独步江湖&
来自：浏览器
最新回复 3&天前
本帖最后由 Arthur0513 于
12:18 编辑
& &&&楼主前两天刚入手mate8，用了几天发现以前的主题没办法完全适配EMUI4.0，特别是状态栏，总是白色的，不协调啊！所以研究了一下，发现EMUI4.0是可以让状态栏完全沉浸的。现在把方法分享给大家，大家自己DIY吧！（PS：前几天过年太忙了，没有自己适配，教程太简陋了。这两天把以前得到的布鲁斯之夜适配EMUI4.0，补充几张效果图）
Screenshot_-09-52-44.png (656.68 KB, 下载次数: 94)
16:28 上传
IMG_654.png (542.43 KB, 下载次数: 84)
16:28 上传
IMG_949.png (509.66 KB, 下载次数: 90)
16:28 上传
Screenshot_-10-03-02.png (517.47 KB, 下载次数: 86)
16:28 上传
IMG_118.png (464.46 KB, 下载次数: 89)
16:28 上传
Screenshot_-10-06-16.png (552.33 KB, 下载次数: 98)
16:28 上传
Screenshot_-09-52-19.png (555.93 KB, 下载次数: 86)
16:28 上传
Screenshot_-10-07-19.png (507.95 KB, 下载次数: 84)
16:28 上传
Screenshot_-10-08-03.png (511.08 KB, 下载次数: 90)
16:28 上传
IMG_058[1].png (435.36 KB, 下载次数: 84)
22:05 上传
主题状态栏问题预览图（举两个常用的界面：拨号和设置，其他的类推）：
<font color="#、拨号界面
Screenshot_-21-29-33_副本.png (645.86 KB, 下载次数: 95)
23:42 上传
360截图58519.jpg (35.13 KB, 下载次数: 103)
23:42 上传
状态栏为白色，不协调
2、设置界面
Screenshot_-21-29-42.png (304.87 KB, 下载次数: 79)
23:42 上传
360截图31272.jpg (33.39 KB, 下载次数: 92)
23:42 上传
经过楼主的研究，无需root，EMUI 4.0只需简单的几步就能使状态栏完全沉浸，如图，美化后的效果：
1、拨号界面
Screenshot_-21-48-06_副本.png (688.55 KB, 下载次数: 88)
23:42 上传
360截图50582.jpg (33.44 KB, 下载次数: 107)
23:42 上传
<font color="#、设置界面
Screenshot_-21-47-59.png (305.09 KB, 下载次数: 87)
23:42 上传
360截图44136.jpg (38.9 KB, 下载次数: 91)
23:42 上传
那么，具体怎么弄，教程如下：
游客，如果您要查看本帖隐藏内容请
好赞~鼓掌~
width:100%">
&独步江湖&
来自：浏览器
学习一下啊！
width:100%">
&渐入佳境&
来自：浏览器
width:100%">
&独步江湖&
来自：浏览器
width:100%">
&渐入佳境&
来自：浏览器
ASD ASD ASD ASD ASD ASD DFG DFG F
width:100%">
&独步江湖&
来自：浏览器
学习一下啊！
width:100%">
&炉火纯青&
来自：浏览器
width:100%">
&登堂入室&
来自：浏览器
感谢分享&&
width:100%">
&略有小成&
来自：浏览器
width:100%">
&独步江湖&
来自：浏览器
width:100%">
1 / 424 页
沙海飞雪发现对称之美P20pro 晚霞佳丽影中式对称之美油坊里的&油鬼子“田园风光
花粉客户端
Make it Possible
Make your device special
华为云空间
Huawei cloud services
音乐播放器
Huawei Music
Huawei Vmall
关注花粉俱乐部
举报邮箱：
|关注花粉俱乐部：
Copyright (C)
华为软件技术有限公司 版权所有 保留一切权利ZUK Z2 Pro
总帖数： 18703
今日发帖： 57
关注数： 4552
版主： &nbsp&nbsp&nbsp
在线时间5 小时
希望zui3.5能使更多软件状态栏沉浸
多适配一些应用的状态栏沉浸，大半部分软件状态栏是深色而软件是浅色的。状态栏不沉浸让人感觉不美观尤其是QQ、微信、淘宝这三个经常使用的软件。
在线时间35 小时
原生安卓的沉浸式状态栏就是这样的啊，状态栏深色软件浅色，以前用CM和魔趣的时候就是这样的，只有状态栏是黑色的说明状态栏没有沉浸
在线时间35 小时
QQ，淘宝这种已经是沉浸式状态栏了
在线时间5 小时
不是更多，而是全局沉浸，没有例外，网络上已经流传出了反编译调整透明的方法
在线时间8 小时
大哥，先搞清楚什么叫沉浸什么叫强制变色再说吧，真正的沉浸是需要系统和应用双方都支持，ZUI系统本身就支持沉浸，不过不是你要的透明沉浸，只要应用同样支持那么显示的就是沉浸了。如果你想要所谓的全局，那不好意思，那不叫沉浸，那只是系统硬性做变色而已，纯色应用还好，如果在不是纯色的情况下会很难看。
在线时间3 小时
没梦想了，只希望修复网络断网问题，没那个版本说不断网的，
在线时间1 小时
更多的是软件不支持！
扫码下载联想社区APP经验1024 米
在线时间231 小时
版本7.11.15
积分 1884, 距离下一级还需 116 积分
积分 1884, 距离下一级还需 116 积分
机型小米手机5
签到次数18
MIUI版本7.11.15
本帖最后由 董事会主席 于
16:49 编辑
沉浸式，听着还含有黑科技的赶脚。
沉浸了吗？当背景为纯白时，我看是真的沉浸了，沉浸得看不见状态栏上的所有图标、时间。瞧吧：
5.png (489.22 KB, 下载次数: 0)
6.png (38.29 KB, 下载次数: 0)
而当背景色与纯白稍有色差时，能隐约看见一点点，但色盲靠边。
3.png (420.81 KB, 下载次数: 0)
4.png (1.04 MB, 下载次数: 0)
再来看下面两张可正常显示、正常沉浸的：
1、注意状态栏上的时钟、网速、闹钟、wfifi、网络、电量均为白色的，背景是其它色：可正常显示，能清晰看见。
1.png (1.16 MB, 下载次数: 0)
2、进入一篇文章，背景更为其它色，而状态栏上的由白色也变为了黑色，仍然能清晰看见，这才是叫做沉浸吧？
2.png (424.35 KB, 下载次数: 0)
毕竟严重影响到铁粉们的体验了。
——————
不要怪别人的软件是白色背景，而是你状态栏的颜色不会变或不能变为更多色。
不是拿别人的背景来适配你的状态栏，而是应该状态栏识别背景色，自动更换为有反差的颜色。
望开发组及相关人员，重视下这个问题，你们可以做到的。
——————要不直接黑底白字、白底黑字定死，轻松解决问题，虽然没沉浸那么好看、美观！
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
经验5435 米
在线时间43 小时
版本8.4.27
机型小米手机6
签到次数56
MIUI版本8.4.27
经验7239 米
在线时间65 小时
版本8.1.11
积分 8275, 距离下一级还需 11725 积分
积分 8275, 距离下一级还需 11725 积分
机型红米手机4 高配版
签到次数43
MIUI版本8.1.11
确实会出现这种情况
经验208167 米
威望2146 米
在线时间0 小时
版本8.4.27
机型小米MIX 2
签到次数224
MIUI版本8.4.27
需要app适配
各位开发组以及其他官方人员你好，如果我的回复有错误，在你不忙的时候请麻烦回复我纠正下，谢谢
做下广告，
经验3653 米
在线时间18 小时
版本8.4.18
机型小米手机3/4 WCDMA版
签到次数114
MIUI版本8.4.18
需要app适配
是需要APP适配9吗？9不能根据背景颜色动态调整吗？谢谢
静坐常思己过 闲谈莫论人非
经验12811 米
在线时间602 小时
版本8.5.22
MIUI 10荣誉内测
机型小米手机5
签到次数189
MIUI版本8.5.22
看看这篇帖子吧：
经验12811 米
在线时间602 小时
版本8.5.22
MIUI 10荣誉内测
机型小米手机5
签到次数189
MIUI版本8.5.22
是需要APP适配9吗？9不能根据背景颜色动态调整吗？谢谢
看看这篇帖子吧：
经验3653 米
在线时间18 小时
版本8.4.18
机型小米手机3/4 WCDMA版
签到次数114
MIUI版本8.4.18
看看这篇帖子吧：http://www.miui.com/thread--1.html
静坐常思己过 闲谈莫论人非
经验3932 米
在线时间36 小时
版本7.11.23
机型小米手机6
签到次数160
MIUI版本7.11.23
我用nova桌面就不会有。可以自己选择暗图标。
经验3932 米
在线时间36 小时
版本7.11.23
机型小米手机6
签到次数160
MIUI版本7.11.23
nova桌面可以自动识别顶部，自动变换。足以说明，是MIUI适配不足！
MIUI七夕鹊桥勋章
2018新年勋章
参与回帖活动
MIUI3亿用户纪念勋章
参与回帖活动
MIUI七周年
关注新浪微博
已关注新浪微博
MIUI 9纪念勋章
2017圣诞节勋章
参与回帖活动
全局搜索纪念勋章
参加全局搜索内测
感恩节勋章
参与回帖活动
万圣节勋章
参加回帖活动
米兔月饼勋章
参加回帖活动
小米众筹2周年
参加回帖活动
新版论坛APP
更新新版APP
小米7周年勋章
2017米粉节晒单赢专属勋章
“澎湃S1 ”芯片纪念勋章
参与活动回帖可得
参与红米Note 4X活动
2017年小金鸡勋章
回复2016年度评选活动贴
APP 1000万
MIUI论坛APP注册用户突破1000万纪念勋章
小火箭勋章
神舟11号 话题活动
MIUI 300周
MIUI 300周更新纪念勋章
内测督查勋章
内测督查员专属勋章
MIUI 3000万
MIUI 3000万发烧友纪念勋章
MIUI 2000万
MIUI 2000万发烧友纪念勋章
MIUI 7纪念勋章
小米商城购买纪念勋章
论坛APP购买小米商品获得
优秀解答组
优秀解答组员专属勋章
小米平板2 Win10 荣誉内测
小米平板2 Win10 荣誉内测
MIUI五周年
MIUI五周年纪念勋章
已关注微信
已关注极客秀微信
关注腾讯微博
已关注腾讯微博
MIUI年度优秀勋章
MIUI六周年
MIUI六周年纪念勋章
为奥运加油勋章
为奥运加油勋章
Copyright (C) 2017 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号