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


对比这两张图的状态栏效果可以看出。第一张图效果对界面来说不是很美观,但是第二个效果就非常美观了。下面我们就来实现。
使用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 实现沉浸式(透明)状态栏效果的更多相关文章
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- Android 4.4 沉浸式透明状态栏与导航栏
Android 系统自4.2 開始 UI 上就没多大改变,4.4 也仅仅是添加了透明状态栏与导航栏的功能,如图 那么如今我就来给大家解说下怎样使用这个新特性,让你的 app 尾随潮流,当然假设你不在乎 ...
- Android 4.4 沉浸式透明状态栏
原文链接:http://www.bkjia.com/Androidjc/913061.html 第一种方法 这里写代码片第一种方法,在代码设置: if(VERSION.SDK_INT >= VE ...
- delphi 10.3.1 android沉浸式透明状态栏
从10.2升级上来, 之前的沉浸状态栏在android手机上不透明了, 添加二个发布文件,remote path分别设为 res\values-v21和 res\values-v19 style.xm ...
- Android QMUI实战:沉浸式/适配状态栏
近期研究QMUI换肤的实现,顺便分析了下QMUI的沉浸式. 网上已有很多关于QMUI实现页面沉浸式的文章,简而言之:复杂了. 本期,我们仅通过几行代码,即可完美实现页面沉浸式效果,并轻松匹配换肤的色彩 ...
- Android一体式(沉浸式)状态栏的实现
注:公司开发任务适配是在4.4版本之上进行,所以此适配仅在4.4之上进行测试. 1.主要使用了第三方的开源项目SystemBarTint,github:https://github.com/jgilf ...
- Android中的沉浸式状态栏效果
无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...
- 8.Android 系统状态栏沉浸式/透明化解决方案
转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来 ...
- Android状态栏微技巧,带你真正意义上的沉浸式
记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解. 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发 ...
随机推荐
- 【Javascript】数组之二
Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...
- wordpress面包屑导航简单实现
前面我们学了一行代码搞定WordPress面包屑导航breadcrumb,现在wordpress文档中有一个简单实现的方法,适用于page页面,有二级分类的情况(Simple breadcrumb t ...
- reactNative 获取组件高、宽、位置等信息
import {findNodeHandle, UIManager} from 'react-native' layout(ref) { const handle = findNodeHandle(r ...
- redux学你参考网站
redux官方网站 http://cn.redux.js.org/docs/api/combineReducers.html https://www.redux.org.cn 从设计的角度看Redux ...
- centos7.2(一)vultr服务器购买和开通端口
https://vultr.me/52.html 之前我们已经介绍了如何购买 Vultr 以及如何使用支付宝对 Vultr 进行充值,相关教程: VULTR 购买教程 2018 年最新图文版 VULT ...
- RPC笔记搬迁
选择dubbo 启动原理 解析服务 暴露服务 引用服务 提供服务流程 结合Netty 对比 HSF https://www.cnblogs.com/lichengwei/p/5529492.h ...
- Passwords Gym - 101174E (AC自动机上DP)
Problem E: Passwords \[ Time Limit: 1 s \quad Memory Limit: 256 MiB \] 题意 给出两个正整数\(A,B\),再给出\(n\)个字符 ...
- linux学习14 Linux运维高级系统应用-glob通配及IO重定向
一.回顾 1.bash基础特性:命令补全,路径补全,命令引用 2.文件或目录的复制,移动及删除操作 3.变量:变量类型 存储格式,数据表示范围,参与运算 二.bash的基础特性 1.globbing: ...
- SpringBoot 的一些学习资源
很多Java Web开发者目前常用的技术还是SpringBoot,想要工作效率更,在刚入门不久时有必要全面了解一下它的功能特性,而高效学习的方法,除了在官网学习外,还可以看下网上已有的不错的教程.刚看 ...
- 洛谷p2672推销员题解
日常扯废话: 话说题解里的思路都写得真的是很奈斯啊 但是 代码看不懂确实让人头疼(可能是我太弱了) 就像题解里的第一篇题解代码简洁但是属实看不明白 趁着学姐刚给我讲了知识还热乎赶紧给泥萌说说哈 正文: ...