DCloud_App_Array
DCloud_App_Array
  • 发布:2015-10-28 17:02
  • 更新:2018-11-13 17:54
  • 阅读:67750

Android平台设置沉浸式状态栏显示效果

分类:HTML5+

系列文章导航:
状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

正文:

应用可视区域到系统状态栏下透明显示效果,如下图所示:

此模式下应用占用全屏区域,而系统状态栏会拦截用户操作事件,此时需要预留出系统状态栏高度。
获取系统状态栏高度及沉浸式状态判断参考:如何动态判断沉浸式状态栏模式

HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。

"plus": {  
    "statusbar": {  
        "immersed": true  
    }  
}  

如下图所示:

保存后提交App云端打包

注意:

  1. 真机运行不生效,需提交App云端打包后才生效;
  2. 此功能仅在Android4.4及以上系统有效。

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台5+SDK原生环境配置方法
iOS平台设置沉浸式状态栏显示效果

6 关注 分享
蔡繁荣 软猫猫 Trust 爆栈工程师 dudan@sinnbo.com 18768156@qq.com

要回复文章请先登录注册

g417317028@163.com

g417317028@163.com

回复 SDK_骁骑:
写着已过期,来个新的吧!!!!!
2018-11-13 17:54
lxl

lxl

回复 蜡笔不小心:
不行呀,这样貌似是只把启动图片沉浸了,其它webview页面用启动图的背景不搭呀
2017-11-30 14:04
lxl

lxl

回复 Element:
这和手机有关,三星是半透明灰色,小米是全透明
2017-11-30 11:54
15874025525@163.com

15874025525@163.com

回复 15874025525@163.com:
这里有对于沉浸模式的详解http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarBackground
2017-10-26 16:08
15874025525@163.com

15874025525@163.com

回复 15874025525@163.com:
android:
打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> google 下添加ImmersedStatusbar节点并设置值为true。
2017-10-26 15:52
15874025525@163.com

15874025525@163.com

回复 蜡笔不小心:
在华为和荣耀上测试无效。另外一中设置全屏的方式倒是可以用,但是那个还蛮麻烦的,得自己预留一个高
2017-10-26 15:51
15874025525@163.com

15874025525@163.com

回复 蜡笔不小心:
这个写法貌似无效
2017-10-26 15:35
蜡笔不小心

蜡笔不小心

回复 m18311387909@163.com:
plus 下添加 "launchwebview":{
"statusbar":{
"immersed": true,
"background":"#ff5034"
}
} 完美解决
2017-09-19 15:47
蜡笔不小心

蜡笔不小心

这个文档很老了 亲自测过无效,可能写法改变了吧,这样写就解决了:
plus 下增加这个:launchwebview。。。

"launchwebview":{
"statusbar":{
"immersed": true,
"background":"#ff5034"
}
},

希望能帮助大家
2017-09-19 15:44
lam

lam

回复 Runic:
估计离线比较难,每个人用的方式可能不统一,这问题的确问了很多都没有得到回复。但也希望官方能给出一些相应的操作规范
2017-06-10 11:03
Runic

Runic

实际测试,在线打包的确可以实现沉浸式,不过离线打包却无法实现。是不是该完善离线打包教程,应该有步骤没有做的。
2017-05-15 14:49
Runic

Runic

回复 又起风了:
我也发现了,问了无数次 都没 回复
2017-05-15 14:48
小明子

小明子

安卓手机不行啊,虽然通顶了,但是状态栏还是有渐变色或者直接就是原来的状态栏。
2017-04-22 21:27
m18311387909@163.com

m18311387909@163.com

回复 Element:
你的问题解决了吗,怎么弄的能告诉下吗
2017-03-30 11:23
m18311387909@163.com

m18311387909@163.com

楼上的问题解决了吗
2017-03-30 11:22
Element

Element

回复 SDK_骁骑:
如何设置全透明的状态栏呢?现在离线打包的是有一点半透明的灰色
2017-01-06 12:02
沙子

沙子

如何隐藏状态栏呢?
2017-01-05 11:03
SDK_骁骑

SDK_骁骑

回复 又起风了:
安卓平台原生打包请参考文档[Android平台5+SDK原生环境配置方法](http://ask.dcloud.net.cn/article/216)
2016-09-30 17:54
DCloud_App_Array

DCloud_App_Array (作者)

回复 又起风了:
@DCloud_SDK_骁骑
2016-09-30 17:43
又起风了

又起风了

经过我实际测试,在线打包的确可以实现沉浸式,不过离线打包却无法实现。是不是该完善离线打包教程,应该有步骤没有做的。
2016-09-29 14:31
想一想D

想一想D

这个沉浸式状态栏是直接改变手机状态栏的颜色还是将整个页面占到整个屏幕!
2016-05-18 11:02
getName

getName

那他返回false到底是个什么意思呢?什么叫不支持?是根据什么判断的啊。我系统是5.0的
2016-02-25 09:40
CLOUD_S

CLOUD_S

判断当前环境是否支持沉浸式状态栏
plus.navigator.isImmersedStatusbar()
如果当前支持沉浸式状态栏则返回true,否则返回false。可以使用js动态修改DOM元素的css属性来设置样式
2015-12-27 23:46
Danny

Danny

不能像iOS一样通过更改通知栏的前景、背景色来实现吗?这样以来是不是意味着APP在Android系统中要预留通知栏高度的空白...
2015-10-28 17:11