Ionic3--Android手机状态栏实现沉浸式效果（即透明悬浮状态）

本文链接：https://blog.csdn.net/weixin_44035088/article/details/88064456

先来对比一下几种状态栏的效果：

图1: 初始化项目时的效果图2: 改变背景色和字体颜色后的效果图3: 实现沉浸式透明悬浮后的效果

简单介绍一下ionic的StatusBar中的一些属性，具体内容请参见Ionic官方文档（https://ionicframework.com/docs/v3/native/status-bar/）

属性	说明
`overlaysWebView(boolean)`	设置状态栏是否覆盖主应用程序视图。默认值为true。
backgroundColorByName(white)	设置状态栏背景色，使用特定的颜色命名，可选值有：black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown。
backgroundColorByHexString(#ffffff)	设置状态栏背景色，使用十六进制的颜色。
styleDefault()	深色文本，用于浅色背景，默认效果
styleLightContent()	浅色文本，用于深色背景。这几个属性的具体效果我还没有测试过，如果你有兴趣可以自己试一下。
styleBlackTranslucent()
styleBlackOpaque()

一、改变状态栏背景字体样式，实现图2的效果

// app.component.ts

import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  constructor(public platform: Platform, 
              public statusBar: StatusBar) {

    this.platform.ready().then(() => {
      this.statusBar.styleDefault(); //深色文本
      this.statusBar.backgroundColorByHexString("#f8f8f8"); //浅色背景
    });

  }
}

二、沉浸式效果，即图3所示的效果

1、在app.component.ts中将overlaysWebView设置为true,再将状态栏的文本色设置为深色文本（具体你们可以根据自己项目的标题栏背景色来设置）

// app.component.ts

import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  constructor(public platform: Platform, 
              public statusBar: StatusBar) {

    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(true);
      this.statusBar.styleDefault(); //深色文本
    });

  }
}

2、在app.scss文件中设置标题栏的padding-top值和背景色

// app.scss

.platform-android {
  // 沉浸式状态栏，设置header留出状态栏的位置
  ion-header {
    padding-top: #{$cordova-md-statusbar-padding};
    background-color: color($colors, head-color); //设置标题栏的背景色
    .toolbar-background {
      background-color: color($colors, head-color); //设置标题栏的背景色
    }
  }
  .immersive {
    padding-top: #{$cordova-md-statusbar-padding};
  }
}


//variables.scss

$colors: (
  head-color: #f8f8f8;
)

3、最后在StatusBar.java文件中的 run 方法里添加以下内容，代码中有注释。（文件路径：⁨platforms⁩ ▸ ⁨android⁩ ▸ ⁨app⁩ ▸ ⁨src⁩ ▸ ⁨main⁩ ▸ ⁨java⁩ ▸ ⁨org⁩ ▸ ⁨apache⁩ ▸ ⁨cordova⁩ ▸ ⁨statusbar⁩ ▸ ⁨StatusBar.java）

// StatusBar.java

this.cordova.getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
                // by the Cordova.
                Window window = cordova.getActivity().getWindow();

                // 添加的内容开始
                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);
                // 添加的内容结束
                
                window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

                // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
                setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));

                // Read 'StatusBarStyle' from config.xml, default is 'lightcontent'.
                setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));
            }
        });

写完这三部分的代码就可以实现图3中的透明悬浮状态栏效果。

总结：

我自己在做这个沉浸式状态栏的效果时，其实前两步就基本上可以实现沉浸式效果，不过在我手机（HONOR V9）上测试时需要手动触发一下，比如点击input框。添加第3步的代码是为了在App启动时就能实现沉浸式效果，具体代码含义我还没有搞懂。但这样做又有一个缺点，假如你执行了ionic cordova platform rm android命令后，我们更改的这个StatusBar.java文件就会被删除，重新添加Android平台支持后，就会出现我之前遇到的问题，需要手动触发。所以建议这个沉浸式状态栏效果放到项目的最后来做。

最后，特别感谢大BUG在这个过程中对我的帮助和鼓励。

参考文档：