ionic2/3/cordova - 沉浸式状态栏、导航栏

前言

• 需要修改StatusBar.java文件

• 修改的内容如下：

  
  StatusBar.java
• 添加内容代码

// ==================== 添加内容start ====================
// /**
//  * 初始化状态栏相关，
//  * PS: 设置全屏需要在调用super.onCreate(arg0);之前设置setIsFullScreen(true);否则在Android 6.0下非全屏的activity会出错;
//  * SDK19：可以设置状态栏透明，但是半透明的SYSTEM_BAR_BACKGROUNDS会不好看；
//  * SDK21：可以设置状态栏颜色，并且可以清除SYSTEM_BAR_BACKGROUNDS，但是不能设置状态栏字体颜色（默认的白色字体在浅色背景下看不清楚）；
//  * SDK23：可以设置状态栏为浅色（SYSTEM_UI_FLAG_LIGHT_STATUS_BAR），字体就回反转为黑色。
//  * 为兼容目前效果，仅在SDK23才显示沉浸式。
//  */

// 透明状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 状态栏字体设置为深色，SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 为SDK23增加
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

// 透明导航栏（返回键、主页键、任务栏）
// window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

// 部分机型的statusbar会有半透明的黑色背景
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

// 设置状态栏颜色为透明
window.setStatusBarColor(Color.TRANSPARENT);
// 设置导航栏颜色为透明
// window.setNavigationBarColor(Color.TRANSPARENT);

// ==================== 添加内容end ====================

实现

• 在如下图目录中找到StatusBar.java文件
  

  目录

• 编辑修改initialize方法中的run方法：
  

  StatusBar.java

• 在app.scss中加入样式：

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

• 欧了

说明

• 因为在设置了沉浸式状态栏后，状态栏内容会覆盖header的内容，所以设置样式将状态栏的位置留出来。
• 如果设置了沉浸式导航栏，在导航栏为虚拟按键的手机中，导航栏会覆盖app中的tabs，所以导航栏不建议设置沉浸式。