ionic1开发——APP体验优化之适配刘海屏

前言

自从iPhone X推出刘海屏开始，各大Android厂商也随之跟风。
不但推出了刘海屏，甚至还有水滴屏、打孔屏等各种异形的屏幕。
随之而来的就是开发者需要去适配这些各种各样的屏幕。

当然如果Android没有沉浸式的体验，那就不用做屏幕的适配。
如何实现Android的沉浸式体验，请参考ionic1开发——APP体验优化之实现沉浸式状态栏
在iOS上，ionic3是做了iPhone的刘海屏适配的。但是，ionic1并不具备此功能，所以还是需要我们自行适配。

刘海屏出现之前

• iPhone手机的状态栏高度为固定的20
• Android手机的状态栏高度为固定的24

刘海屏出现之后

• iPhone X及之后手机的状态栏高度都是固定的44
• Android手机高度碎片化，不同机型的状态栏的高度是各种各样的高度

---

思路

鉴于Android手机有各种各样不同的高度，所以只能根据获取到的高度来动态改写css样式。

• 第一步，获取手机状态栏的高度
• 第二步，添加对应platform的初始css样式
• 第三步，动态修改对应platform的css样式

---

实现

获取手机状态栏的高度

获取手机状态栏的高度，需要通过插件来实现。
在原来cordova-plugin-statusbar插件的基础上新增了获取状态栏高度的方法。
新插件地址（带获取状态栏高度的方法）：https://github.com/hhjjj1010/cordova-plugin-statusbar.git

代码示例：

if (window.StatusBar) {
    StatusBar.getStatusBarHeight(function (height) {
      if (!height) return;
      // TODO
    });
}

添加对应platform的初始css样式

在项目的www目录下的css文件中复写iOS platform的css样式

     /**
     * Platform
     * --------------------------------------------------
     * Platform specific tweaks
     */
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
      height: 64px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
      margin-top: 19px !important;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
      margin-top: 20px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs,
    .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
      top: 64px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .has-header,
    .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
      top: 64px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
      top: 108px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top {
      top: 113px;
    }

    .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
      top: 157px;
    }

添加Android platform css样式（若已有则可跳过）

    /*******   Android沉浸式体验样式   *******/
    .platform-android.platform-cordova .bar-header:not(.bar-subheader) {
      height: 68px;
    }

    .platform-android.platform-cordova .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
      margin-top: 23px !important;
    }

    .platform-android.platform-cordova .bar-header:not(.bar-subheader) > * {
      margin-top: 24px;
    }

    .platform-android.platform-cordova .tabs-top > .tabs,
    .platform-android.platform-cordova .tabs.tabs-top {
      top: 68px;
    }

    .platform-android.platform-cordova .has-header,
    .platform-android.platform-cordova .bar-subheader {
      top: 68px;
    }

    .platform-android.platform-cordova .has-subheader {
      top: 112px;
    }

    .platform-android.platform-cordova .has-header.has-tabs-top {
      top: 117px;
    }

    .platform-android.platform-cordova .has-header.has-subheader.has-tabs-top {
      top: 161px;
    }

    /*******   Android沉浸式体验样式   *******/

动态修改对应platform的css样式

在app.js中动态修改样式

if (window.StatusBar) {
     // org.apache.cordova.statusbar required
    StatusBar.styleDefault();

    StatusBar.getStatusBarHeight(function (height) {
      if (!height) return;
      handleNotchStatusBar(Number(height));
    });
}

var handleNotchStatusBar = function (statusBarHeight) {
    var normalHeight = 0;
    var platformStr = "";

    if (ionic.Platform.isIOS()) {
      normalHeight = 20;
      platformStr = "ios";
    } else if (ionic.Platform.isAndroid()) {
      normalHeight = 24;
      platformStr = "android"
    }

    if (statusBarHeight === normalHeight) {
      return;
    }

    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; i++) {
      var sheet = styleSheets[i];
      if (sheet.href && sheet.href.indexOf('your css file path') !== -1) {
        for (var j = 0; j < sheet.cssRules.length; j++) {
          var rule = sheet.cssRules[j];
          var subStr = '.platform-' + platformStr + '.platform-cordova';

          if (rule.selectorText && rule.selectorText.indexOf(subStr) !== -1) {
            if (rule.style.height) {
              var modifyHeight = Number(rule.style.height.substr(0, rule.style.height.length - 2)) + statusBarHeight - normalHeight;
              rule.style.height = modifyHeight + 'px';
            }

            if (rule.style.top) {
              var modifyTop = Number(rule.style.top.substr(0, rule.style.top.length - 2)) + statusBarHeight - normalHeight;
              rule.style.top = modifyTop + 'px';
            }

            if (rule.style.marginTop) {
              var modifyMarginTop = Number(rule.style.marginTop.substr(0, rule.style.marginTop.length - 2)) + statusBarHeight - normalHeight;
              rule.style.marginTop = modifyMarginTop + 'px';
            }
          }
        }
        break;
      }
    }
 };