ionic2实现透明状态栏和透明工具栏

ionic2实现透明状态栏和透明工具栏

目录

1. 如何实现？

2. 集成DEMO（2017/4/1更新）

3. 简短的分析

4. 一个额外的小栗子

5. 我想让状态栏变色怎么办？

6. 为何这么作？

7. 总结

如下是个人方案，不绕弯子，直接上实现过程．
首先贴效果图，来张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出一大堆的解决方案，但大可能是针对原生代码的解决方案(我只能呵呵)，有关于ionic２的解决方案少之又少，而且在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实现透明状态栏