沉浸式状态栏(Immersive Mode)和透明状态栏(Translucent Bar)。

这两个概念很多地方的解释都不是很清晰,所以导致很多人都各有各的认识。所以这里我也有一个自己的认识,笔者认为沉浸式状态栏也可以说是全屏模式,即隐藏状态栏与导航栏。 而透明状态栏是不隐藏状态栏但是它所呈现的是透明的。因为默认情况下状态栏都是黑底白字。而我们现在要实现的就是透明状态栏下的全屏模式。话不多说,看效果:

 
1.png
 
2.png

对比这两张图的状态栏效果可以看出。第一张图效果对界面来说不是很美观,但是第二个效果就非常美观了。下面我们就来实现。

使用cordova实现就需要cordova-plugin-statusbar这个插件,我们需要对此插件进行一些修改即可实现我们想要的效果。

在项目路径->platforms->android->src->org->apache->cordova->statusbar中找到StatusBar.java文件。
然后修改run方法即可:

            public void run() {
// Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
// by the Cordova.
Window window = cordova.getActivity().getWindow(); //添加代码start
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.TRANSPARENT);
//添加代码end
window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
//注释原有设置背景色的方法
//setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));
}
 
 

Cordova 实现沉浸式(透明)状态栏效果的更多相关文章

  1. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  2. Android 4.4 沉浸式透明状态栏与导航栏

    Android 系统自4.2 開始 UI 上就没多大改变,4.4 也仅仅是添加了透明状态栏与导航栏的功能,如图 那么如今我就来给大家解说下怎样使用这个新特性,让你的 app 尾随潮流,当然假设你不在乎 ...

  3. Android 4.4 沉浸式透明状态栏

    原文链接:http://www.bkjia.com/Androidjc/913061.html 第一种方法 这里写代码片第一种方法,在代码设置: if(VERSION.SDK_INT >= VE ...

  4. delphi 10.3.1 android沉浸式透明状态栏

    从10.2升级上来, 之前的沉浸状态栏在android手机上不透明了, 添加二个发布文件,remote path分别设为 res\values-v21和 res\values-v19 style.xm ...

  5. Android QMUI实战:沉浸式/适配状态栏

    近期研究QMUI换肤的实现,顺便分析了下QMUI的沉浸式. 网上已有很多关于QMUI实现页面沉浸式的文章,简而言之:复杂了. 本期,我们仅通过几行代码,即可完美实现页面沉浸式效果,并轻松匹配换肤的色彩 ...

  6. Android一体式(沉浸式)状态栏的实现

    注:公司开发任务适配是在4.4版本之上进行,所以此适配仅在4.4之上进行测试. 1.主要使用了第三方的开源项目SystemBarTint,github:https://github.com/jgilf ...

  7. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  8. 8.Android 系统状态栏沉浸式/透明化解决方案

    转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来 ...

  9. Android状态栏微技巧,带你真正意义上的沉浸式

    记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解. 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发 ...

随机推荐

  1. 【Javascript】数组之二

    Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...

  2. wordpress面包屑导航简单实现

    前面我们学了一行代码搞定WordPress面包屑导航breadcrumb,现在wordpress文档中有一个简单实现的方法,适用于page页面,有二级分类的情况(Simple breadcrumb t ...

  3. reactNative 获取组件高、宽、位置等信息

    import {findNodeHandle, UIManager} from 'react-native' layout(ref) { const handle = findNodeHandle(r ...

  4. redux学你参考网站

    redux官方网站 http://cn.redux.js.org/docs/api/combineReducers.html https://www.redux.org.cn 从设计的角度看Redux ...

  5. centos7.2(一)vultr服务器购买和开通端口

    https://vultr.me/52.html 之前我们已经介绍了如何购买 Vultr 以及如何使用支付宝对 Vultr 进行充值,相关教程: VULTR 购买教程 2018 年最新图文版 VULT ...

  6. RPC笔记搬迁

      选择dubbo 启动原理 解析服务 暴露服务 引用服务 提供服务流程 结合Netty 对比 HSF   https://www.cnblogs.com/lichengwei/p/5529492.h ...

  7. Passwords Gym - 101174E (AC自动机上DP)

    Problem E: Passwords \[ Time Limit: 1 s \quad Memory Limit: 256 MiB \] 题意 给出两个正整数\(A,B\),再给出\(n\)个字符 ...

  8. linux学习14 Linux运维高级系统应用-glob通配及IO重定向

    一.回顾 1.bash基础特性:命令补全,路径补全,命令引用 2.文件或目录的复制,移动及删除操作 3.变量:变量类型 存储格式,数据表示范围,参与运算 二.bash的基础特性 1.globbing: ...

  9. SpringBoot 的一些学习资源

    很多Java Web开发者目前常用的技术还是SpringBoot,想要工作效率更,在刚入门不久时有必要全面了解一下它的功能特性,而高效学习的方法,除了在官网学习外,还可以看下网上已有的不错的教程.刚看 ...

  10. 洛谷p2672推销员题解

    日常扯废话: 话说题解里的思路都写得真的是很奈斯啊 但是 代码看不懂确实让人头疼(可能是我太弱了) 就像题解里的第一篇题解代码简洁但是属实看不明白 趁着学姐刚给我讲了知识还热乎赶紧给泥萌说说哈 正文: ...