ionic2实现透明状态栏和透明工具栏
目录
如何实现?
集成DEMO(2017/4/1更新)
简短的分析
一个额外的小栗子
我想让状态栏变色怎么办?
为什么这么做?
总结
以下是我的方案,不绕弯子,直接上实现过程.
首先贴效果图,来张gif(2017/4/1更新)
如何实现?
第一步: 在MainActivity.java 中的super.onCreate() 函数后添加如下代码:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
不要忘了在MainActivity.java 中导入依赖包:
import android.os.Build;
import android.view.View;
第二步:在项目根目录的config.xml文件中添加下面配置,这里需要注意
颜色的设置至关重要,此处是八位hex color,前两位是透明度,后六位是rgb颜色值.so根据自己的需要配置.<preference name="StatusBarBackgroundColor" value="#551b1d23" />
第三步: 在app.scss中添加样式
.platform-android {
ion-header {
padding-top: $cordova-md-statusbar-padding;
background-color: color($colors, primary);
}
}
ok!你现在有一个透明的状态栏了.
集成DEMO
(2017/4/1更新)
还是有点麻烦,我按照你的方法怎么都实现不了,能不能来点刺激的...
ok!你的要求我尽量满足。
抽时间写了个DEMO,你想要的都在这里了。你可以狠狠的点击下面的链接去往仓库地址,一探究竟。你可以直接clone下来,直接运行。
项目地址:ionic2-super-bar https://github.com/jeneser/io...
简短的分析
第一步,将视口设置全屏将状态栏固定在视图之上,第二步,配置状态栏颜色,这一步有一个概念需要清楚,hex color是能定义透明度的,我们平常所见的类似#ffffff
是六位的RGB颜色,这里在前面再加两位便是能定义透明度的ARGB,也就是RGB色彩模式附加上Alpha(透明度)通道.所以可以根据自己的需要进行设置.第三步,由于我们将视口扩大至了整个屏幕,自然我们的页面会被覆盖在状态栏下面,我的做法是给ion-header
加一个内边距,并且指定一个背景颜色,当然这里你可以自由发挥,你只要记着现在你写的页面已经在透明的状态栏下面了,你要做的就是让页面下移状态栏的高度,腾出位置避免覆盖.
此时,你可能已经意识到,这个方案是比较灵活的,你可以自由的控制你的页面和状态栏的位置.很多同学想要这样一种效果:图片深入到透明的状态栏下面.想一想是不是很容易实现呢?你只需要需改或添加第三步中的css样式即可完成你的设计,是不是很酷...
补充:很多小伙伴记不住hex color各透明度的值,请参考Hex Opacity Values或者自行google我就不复制粘贴了.
一个额外的小栗子
还是先贴效果图
左侧有一个隐藏的滑动菜单,在Material Design中,上面的那张图片一般是延伸到透明的状态栏下面的,如果状态栏不透明,会很难看,对设计有洁癖的,肯定不能容忍...
其实实现起来也很简单,还是上面的步骤,只是第三步有一些变化,在ion-header
外面又套了一层.ion-page
.
.platform-android {
.ion-page {
ion-header {
padding-top: $cordova-md-statusbar-padding;
background-color: color($colors, primary);
}
}
}
我想让状态栏变色怎么办?
在上面第三步,我设置header的padding并指定了background-color,很容易理解这里的背景颜色深入到状态栏下面,提供一种近似于沉浸式的效果,这样做简单,对不了解android的童鞋理解起来很轻松,当然再添加一些原生代码,能自动实现沉浸效果,文章后面我会说为什么没有这么做.
回到正题,想让状态栏变色可以使用cordova-plugin-statusbar
插件,
在不同视图加载时调用StatusBar.backgroundColorByHexString("#55C0C0C0");
(同样这里的颜色值也是能添加透明度的)来实现不同页面不同颜色的状态栏.
为什么这么做?
其实这一段套路够深的话,应该是放在前面调胃口用的...
我为什么要这么做呢?
其实是我不会android的开发,我是前端,能力有限...大神勿喷...
下面是我解决问题的思路和做法 供参考
透明状态栏网上能google出一大堆的解决方案,但大多是针对原生代码的解决方案(我只能呵呵),有关于ionic2的解决方案少之又少,并且在google ionic2 statusbar transparent时结果的第一条答案还是有偏差的,它的标题是How can I make a transparent toolbar? - ionic 2 - Ionic注意是toolbar而不是statusbar,很多同学把这两个东西混在了一起,导致很多童鞋云里雾里的傻傻分不清...
在那个帖子中,大家讨论的是toolbar的透明,其实在Ionic 2 Beta 10中已经解决这个问题了.可以参考里面的做法.我这里就不说了.
好吧,接着google,从各种信息中筛选我想要的结果,未果...后来,发现了这个帖子感谢@peterbetos.
我按照peterbetos提供的方法,但是遇到很多编译错误,尤其是下面这句,ContextCompat依赖android.support.v4.content.ContextCompat,各种尝试各种错误,哪位大神若是解决了,可以分享出来.
getWindow().setStatusBarColor(
ContextCompat.getColor(this, R.color.status_bar_transparet));
这就是不能实现沉浸效果的原因,能力有限,还请路过的大神赐教..
既然上面一小段代码问题这么多,干脆不要,于是就有了上面那三步.我能通过第二步的hex color实现透明,就不用这么麻烦了,理解起来也更简单...
最后
ionic2正在快速迭代,前两天刚发布2.2.0.很多东西在开发和完善中,就透明状态栏来讲,ionic官方给出的方案是使用cordova-plugin-statusbar
插件,但是目前这个插件透明状态栏在android下不支持,这就尴尬了,好消息是已经有人PR,坏消息是,一年了还没有合并...
目前ionic2正在做他认为重要的事,像这种问题不知道要排到什么时候,所以你若是觉得这个方案可行,用以用也是极好的!
(完结)
原创文章转载请注明.
作者:jeneser
原文地址:·ionic2实现透明状态栏
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。