1 / 670 页
848587 6695
本帖最后由 FunMan 于
16:19 编辑
【Funtouch OS玩机宝典第六章】教你开启透明状态栏（沉浸式）
帖子开始之前必须要先科普一下，很多人不了解什么是沉浸式、什么是透明状态栏，有不少人对这两种效果有严重的误解。大家要继续看我这个帖子的话，最好先看下我之前发的一篇帖子，详细解释了沉浸式和透明状态栏的区别，清清楚楚认识了这些，再继续看我这个帖子才有意义。大家点击这个链接去了解清楚吧 。已经清楚了解的同学可以略过，直接往下看吧。
今天给大家写的教程就是教大家如何在Funtouch OS 2.0上使用透明状态栏效果。另外还要感谢下 ，这位兄弟首先研究出了开启透明状态栏的方法，我的这篇帖子才能够诞生。
大家都知道Funtouch OS官方已经声称过开放了透明状态栏接口，至于第三方App开发者去不去适配其实官方也没法强制，我们也怪不了官方，只能说国内的安卓App环境太过混乱。环境不给力，那我们就自己动手。机哥通过
的方法已经成功让绝大多数支持透明状态栏的第三方App在Funtouch OS 2.0上开启了这个效果！
准备工作：安装主题包
先下载修改版主题包：
1080p屏幕下载这个
(1.03 MB, 下载次数: 65178)
10:54 上传
点击文件名下载附件
2K屏下载这个
(1.03 MB, 下载次数: 30587)
15:59 上传
点击文件名下载附件
下载好主题包后，将这个主题包附件拷贝到手机U盘里。手机进入文件管理——&手机U盘，找到刚刚拷贝的主题包并点开，然后应用主题。应用主题后，你的手机不会有任何变化（因为这本身就是用系统默认的主题修改的）。步骤如下图：
安装主题包_1.png (47.82 KB, 下载次数: 1637)
15:27 上传
安装主题包_2.png (55.7 KB, 下载次数: 1476)
15:27 上传
这个步骤完成后，准备工作就完成了。下面接着跟我做，等待奇迹的出现
特别说明：由于这是修改的主题包，肯定会有App效果不理想的，这个我没办法保证100%完美，只能尽最大可能让绝大多数App能实现出这个效果。大家周知，别到时候遇到一个App效果不好跑来骂我……
奇迹出现：安装App
这一步不需要大家操作什么。因为你的手机现在已经可以配合绝大多数第三方App显示出透明状态栏效果了。大家要做的就是下载App安装即可。下面是我整理的一些高质量App，都是支持透明状态栏效果的。这些App都是机哥认为比较不错的，在国内App乱象丛生的今天，能碰到一些良心App已经难能可贵了，大家好好珍惜吧，搞不好哪天这些App活不下去就消失了……
下面就是我整理的一些App，大家觉得哪个对你有用的话就下载吧，每个App我都会放截图，让大家看看透明状态栏的效果。下载了别忘了回帖支持下，做个有素质的V粉，回帖支持，举手之劳，我为人人，人人为我。
1、Smooth新浪微博客户端
Smooth应该有人听说过，这是一款口碑一直非常不错的第三方微博客户端，界面设计比新浪官方的要好看得多。所有界面元素都遵循了Android的原生界面设计。侧滑菜单整合了日常会用到的选项，通过侧滑手势展开，利于单手操作。当然最重要的透明状态栏也是有的，标准支持！
安装包下载：
(3.37 MB, 下载次数: 8562)
14:43 上传
点击文件名下载附件
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
Smooth_1.png (100.85 KB, 下载次数: 1406)
15:27 上传
Smooth_2.png (57.77 KB, 下载次数: 1426)
15:27 上传
2、Muzei动态壁纸_Muzei Live Wallpaper
这是Google的一位工程师利用业余时间开发的一款极具创意的壁纸App。不要把它和国产那些垃圾壁纸App相提并论。Muzei 它无论是在功能上还是在界面设计上都非常考究，绝非国产垃圾可比。
当你打开Muzei后，肯定会被透明状态栏带来的效果震撼住！这款壁纸App主打特点就是能将任何图片给模糊化、暗化、灰化。
有点设计基础的同学应该会知道，给手机屏幕挑选合适的壁纸也是门技术活。壁纸与屏幕上的图标反差不能太大，否则图标边缘线条会被淡化，导致整个屏幕乱成一团。而将壁纸模糊化是个很好的解决方案，即可以透出图片的内容，模糊化后的图片也不会与桌面图标形成太大的反差，这会形成极好的搭配效果。
大家可以自己调整模糊化的程度，调整到自己认为不会影响壁纸美观度即可。个人强烈推荐下这款壁纸App，绝对值得一试！！！
安装包下载：
(4.77 MB, 下载次数: 50860)
14:42 上传
点击文件名下载附件
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
Muzei_1.png (138.9 KB, 下载次数: 1430)
15:27 上传
Muzei_2.png (129.4 KB, 下载次数: 1403)
15:27 上传
3、Calco Holo计算器
这是一款界面完全遵循Android原生标准的计算器，左右滑动可以在标准模式和函数模式间切换。界面右上角提供了简单的剪贴板功能按钮，可以帮你记录运算结果，方便日常计算。从屏幕左侧向右滑可以展开抽屉菜单，抽屉菜单可以显示计算历史。抽屉菜单下面有设置选项，进入设置可以调整这个计算器的主题界面和其它外观选项。喜欢这种简约界面风格的同学可以试试，个人觉得体验还不错。
安装包下载：
(1.35 MB, 下载次数: 4124)
14:40 上传
点击文件名下载附件
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
Calco_Holo_1.png (13.34 KB, 下载次数: 1421)
15:27 上传
Calco_Holo_2.png (19.11 KB, 下载次数: 1462)
15:27 上传
4、Blurone毛玻璃壁纸
这个壁纸App和上面说的Muzei类似，可以将你自己选择的图片毛玻璃化，就算你选择了一张难看的壁纸，一旦毛玻璃化，逼格就立马上来了，妥妥的一秒钟化身好壁纸！这壁纸App的界面也是一样遵循Android原生界面设计，选项不多，操作起来点两下就可以了。喜欢模糊化壁纸的同学可以试试。
安装包下载：
(2.28 MB, 下载次数: 8581)
14:40 上传
点击文件名下载附件
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
Blurone毛玻璃壁纸_1.png (83.79 KB, 下载次数: 1447)
15:27 上传
Blurone毛玻璃壁纸_2.png (28.18 KB, 下载次数: 1403)
15:27 上传
5、MK文件管理器
这是一款用起来挺顺手的文件管理器，界面完全遵循Android原生设计。你可以在设置中开启双窗口，以后进入文件管理器后就可以通过左右滑动来管理两个窗口，每个窗口可以访问不同的文件夹，提高你管理文件的效率。大家安装后多使用下面截图中的“三个点”菜单，很多高级选项都可以快速展开，使用起来非常顺畅！
安装包下载：
(1.86 MB, 下载次数: 3440)
14:41 上传
点击文件名下载附件
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
MK管理器_1.png (55.47 KB, 下载次数: 1415)
15:27 上传
MK管理器_2.png (80.42 KB, 下载次数: 1400)
15:27 上传
6、闹钟one
这是一款靠口碑流传的国产闹钟App，国内的App能做到这份上也算是可以了。在半透明状态栏的衬托下，界面整体看起来高端大气上档次。它提供的闹钟种类非常个性化，有生活闹钟、日程闹钟、定时器闹钟、位置提醒闹钟。这几种类型的闹钟基本可以涵盖日常生活中常用到的情景。除此之外闹钟还可以基于地理位置显示天气情况。功能上来说已经是绝对够用了。另外还有一些小细节做得不错。想要使用功能强大的闹钟的同学不妨试试。
安装包下载：
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
闹钟one_1.png (56.54 KB, 下载次数: 1384)
15:27 上传
闹钟one_2.png (46.75 KB, 下载次数: 1401)
15:27 上传
7、腾讯地图
说到腾讯了，虽然腾讯名声不怎么好，但是这么大个公司，总会有几款良心产品。PC上就有QQ影像、QQ影音、QQ拼音之类的良心产品。而手机端这里就有像腾讯地图这样的良心产品。大家应该会有一种印象，就是国内几个大厂的地图App给人傻傻分不清的感觉，无论是界面还是功能上，都不能明显的与对手区分开来。机哥给大家说下腾讯地图的一些特别的设计：
- 地图右侧的放大、缩小滑动条，一般的地图App会设计成两个按钮，或者直接是一个滑动条，用起来还不够顺畅，腾讯地图就是一个按钮，想放大或缩小的话直接拖着按钮上下滑动即可。
- 切换地图图层，搜索栏右侧有三个点，点击三个点就可以快速切换不同类型的图层，如实时路况、卫星地图、3D地图
- 双指在屏幕上下滑动可以切换视角，相当方便！
先列出这几个特色，其它的大家可以自己安装体验下，总体是不会差的。
安装包下载：
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
腾讯地图_1.png (138.68 KB, 下载次数: 1388)
15:27 上传
腾讯地图_2.png (125.88 KB, 下载次数: 1392)
15:27 上传
8、最美创意
这是一个集合了各种创意视频的小App，开发者是国人，听说还是vivo的用户，大家要给力支持下，这也算是从我们V粉中出来的精品了。这个App可以为你提供各种各样创意十足的小视频。如果想找灵感、想找创意的化，可以安装这个App试试。比如你想给女朋友送一个有创意的礼物、想办一场有创意的Party，你都可以在这里找到一些创意点子。
安装包下载：
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
最美创意_1.png (201.58 KB, 下载次数: 1345)
15:27 上传
最美创意_2.png (39.41 KB, 下载次数: 860)
15:27 上传
9、Xperia-Walkman
索尼的Walkman可是随身听的开山鼻祖，当年的音乐手机也是称霸一方，机哥还记得当年买到一台索爱的Walkman音乐手机是何等的兴奋，整夜睡不着。如今索尼虽然还在，但是变化已经非常巨大了。Walkman这个品牌也没有了当年那傲人的气势。现在索尼将他们的Walkman播放器独立出App提供给用户们下载了，机哥试了下在Xshot上可以运行，而且透明状态栏效果搭配起来还不错。想要怀旧的同学安装试试，看看能否找回曾经的回忆。
安装包下载：
直接点击即可下载（下载了别忘了回帖支持下，做个有品的V粉，回帖支持，举手之劳）
Xperia-Walkman_1.png (99 KB, 下载次数: 659)
15:27 上传
Xperia-Walkman_2.png (18.4 KB, 下载次数: 788)
15:27 上传
来自 社区电脑版
X3恨你全家
自带应用都不适配还有什么好说的.
说多无意。VIVO将波长
神马都是浮云
神马都是浮云
非常感謝！！！效果不錯哦
效果很好，赞一个！
广告/SPAM只对2.0放的P
给个Xplay3s的谢谢~
来自 社区电脑版
支持个！！
来自 社区手机版
有些不行，例如：QQ。微信& &请问怎么撤销呢
来自 社区电脑版
[/td][/tr]
呵呵了，怎么没X3L的？
来自 vivo乐园
支持！！！！
来自 社区手机版
怎么取消啊
来自 vivo乐园
呵呵了，怎么没X3L的？
不要来这里呵，我不欠你
来自 社区电脑版
有些不行，例如：QQ。微信& &请问怎么撤销呢
所以我在帖子里说明了，这种修改的确可以让大部分App实现透明状态栏效果，但是还是有一些会有些问题，这个要自己取舍了……
来自 社区电脑版
说多了都是累&&没2.0用
来自 vivo乐园
1 / 670 页
24小时全国服务热线
400-678-9688
公众号：vivo智能手机
生活号：vivo智能手机
公众号：vivo智能手机
生活号：vivo智能手机
保存二维码拒绝访问 | www.chiphell.com | 百度云加速
请打开cookies.
此网站 (www.chiphell.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(41faa6b37c7c43ad-ua98).
重新安装浏览器，或使用别的浏览器输入关键字或相关内容进行搜索
HBuilder6.6.1版本已经完全支持沉浸式状态栏，可以下载最新版本应用体验。
各平台配置参考：
2. 由于各系统版本的限制，沉浸式状态栏对系统有要求（Android4.4及以上、iOS7.0及以上），如果要兼容各系统版本，需要动态判断当前环境是否支持沉浸式状态栏以及系统状态栏的高度：使用5+API
- 判断当前环境是否支持沉浸式状态栏
如果当前支持沉浸式状态栏则返回true，否则返回false。
- 获取当前系统状态栏高度
获取系统状态栏高度，Number类型。
其单位是逻辑像素值，即css中可直接使用的像素值，可能存在小数点。实际用法参考HelloH5应用的“plus/doc.html”：
// 创建加载内容窗口
var topoffset='45px';
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
// 使用偏移位置创建子窗口
wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});
\n通过userAgent判断
5+API需要在plusready事件后才能调用，通常此事件在DOM加载渲染后才会触发，无法再渲染前根据不同的状态来设置css。
为了解决此问题，在支持5+API运行环境的userAgent中特定字段Html5Plus/1.0后添加Immersed标识，如下：
&Html5Plus/1.0 (Immersed/30)&
其中Immersed/后的30表示状态栏的高度，单位为逻辑像素值。可以使用正则表达式进行获取：var immersed = 0;
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
if(ms&&ms.length&=3){ // 当前环境为沉浸式状态栏模式
immersed=parseFloat(ms[2]);// 获取状态栏的高度
\nimmersed值如果大于0则表示当前环境支持沉浸式状态栏。
获取状态栏高度后，可以使用js动态修改DOM元素的css属性来设置样式，如设置界面头区域的顶部内边距为状态栏的高度（避免系统状态栏与界面头重叠），示例如下：var t=document.getElementById('header');
t&&t.style.paddingTop=immersed+'px';
\n具体项目中可根据界面设计，灵活使用immersed值来动态适配各种效果。
完整用法可参考HelloH5应用中的“js/immersed.js”
我要在哪里操作。。。。？
字体颜色可以改的，一定是你的操作方式不对。
这样的话怎么设置字体颜色值呢？我在background和bottom之后加，都不管用
t&&t.style.paddingTop=immersed+'px';报错的话改成 ：t&&(t.style.paddingTop=immersed+'px');
这文档可以的，尤其是第二种比较普遍，且能解决在plusready中更改css的闪烁问题，当然header高度需要加高
这样做要不要在manifest.json中设置immersed：ture，，谢谢
但是我的ios 没有效果。。。
不清楚高的那么复杂干嘛。明明一句代码能搞定的事情
plus.webview.currentWebview().setStyle( {statusbar:{background:'#f7f7f7'},top:0,bottom: 0} );
同意，刚测试过，plus/doc里面common.css跟mui.css有冲突，导致选项卡页面沉浸样式实现不了
求解 http://ask.dcloud.net.cn/question/31964
怎么mark啊？
你这个下拉刷新位置拿不到啊；一直是空的；
//===================沉浸式判断并设置=====================
var immersed = 0;
var topoffset = 44;
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
if(ms && ms.length&=3){ // 当前环境为沉浸式状态栏模式
immersed = parseFloat(ms[2]);// 获取状态栏的高度
topoffset = topoffset +
var t = document.getElementsByTagName('header')[0];
t.style.paddingTop = immersed+'px';
t.style.height= topoffset +'px';
var mc = document.getElementsByClassName('mui-content')[0];
var newpt = 44 + immersed +'px';
mc.style.paddingTop =
//下拉刷新位置
var mptp = document.getElementsByClassName('mui-pull-top-pocket')[0];
if (mptp) {
mptp.style.top = immersed +'px';
//======================================================
&UIReserveStatusbarOffset&:false,/*iOS平台开启沉浸式状态栏样式*/状态栏直接就没了，我不要他消失，而且把他设置为和header一样的颜色，怎么搞？刚接触builder，这篇文章始终没看懂，还有
// 使用偏移位置创建子窗口
wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});那我原来的页面到哪里去了？覆盖了？
Android平台系统状态栏的颜色无法通过5+ API修改，可以通过改变应用的主题来调整，参考：http://ask.dcloud.net.cn/article/238
但由于android的碎片化比较严重，无能确定指定的主题在所有的机器上样式一致。
我是没有调整位置，而是把header设置了padding-top,但是系统栏颜色比header的深很多，这是什么原因啊
这样的改动代价也太大了,那么多的页面包括子页面的位置都要通过动态计算来改变top的值.
有没有办法你们这是通过扩大了webview的显示面积,那在顶部增加一个状态栏高度的div或者什么, 类似页面页面的header + div.content 这样的处理方式呢 ? 保证我们简单的使用.
首页可以在plusready事件之后调用plus.webview.currentWebview().setStyle({top:&..px&})方法来动态调整自身的位置。
初始化里面能设置偏移高度不？
首页怎么预留状态栏的高度
Android无法修改状态栏上文字的字体颜色，其颜色受程序使用的主题影响（设置主题参考：http://ask.dcloud.net.cn/article/238），由于android的碎片化严重，不确定各rom在不同主题下的具体情况，需要真机测试显示效果。
iOS平台可设置两种样式，一种是白色文字样式，一种是黑色文字样式，参考：http://ask.dcloud.net.cn/article/33
哦哦，那么系统状态栏的字体颜色是否可以改变
沉浸式状态栏模式实际上是webview的区域放大了，包括原来的系统状态栏区域，而系统状态栏是透明的，看到的就是webview上显示的内容。这时在webview上的布局需要考虑预留出系统状态栏的显示区域。
打包测试了，状态栏颜色改变不了，加入web下拉刷新后，下拉刷新的“下拉刷新”提示被挡住了一半。
真机测试可以获取到
plus.navigator.getStatusbarHeight() 打包运行获取的一直是0，启动页面会有状态栏显示，
嗯，我看过你们最新的App，头部页面怎么改变啊！
immersed.js并不是万能的，需要根据应用的界面情况来调整在沉浸式状态栏模式下的显示样式
引入immersed.js 文件是放到哪里啊？？？index.html还是全部页面都要添加呢？
要回复文章请先或
赞助DCloud可免广告，
赞助DCloud可免广告，ionic的效率很高,我现在要从apicloud转来ionic.但就在实现这个沉浸式状态栏有点卡住.(ps:android的)
你试过 cordova的 statusbar 插件吗？如果没有，您可以试一下。应该可以解决你的问题。
@ 改动StatusBar的颜色为你想要的颜色就可以了,谢谢
AngularJS 之移动 A...没有更多推荐了，
不良信息举报
举报内容：
Android三种方法设置沉浸式状态栏
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！