1. 程式人生 > >Cordova 小米8留海螢幕適配之沉狀態列與 適配大螢幕手機 從開始到結束 總結

Cordova 小米8留海螢幕適配之沉狀態列與 適配大螢幕手機 從開始到結束 總結

 之前專案中打包的apk安裝到全面屏手機後,發現在應用下方出現了一大塊黑色區域(如:小米8),只有在系統中設定適配全面屏才能讓應用在全面屏手機中顯示正常,但是這種方式並不友好,而且有些手機廠商可能也沒有這種設定,所以還是需要我們再打包的時候就做一些相應的處理。

        <activity
            android:name=".MainActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
            android:exported="true"
            android:label="@string/activity_name"
            android:launchMode="singleTop"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
            android:windowSoftInputMode="adjustPan">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
 
        </activity>
 
        <meta-data android:name="android.max_aspect" android:value="2.1" />

接下來就是沉浸狀態列了

沒用cordova的小夥伴 直接style裡面修改這個屬性就可以了

 <item name="android:windowBackground">@drawable/start_page</item>

完整的程式碼

    <style name="ThemeWHITE" parent="android:Theme.Light">
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@drawable/start_page</item>
        <item name="android:windowNoTitle">true</item>
    </style>

也可在程式碼裡面修改 setContentView下面

        setContentView(R.layout.activity_main);
        ConnectServer.Print("啟動時間=====1" + System.currentTimeMillis());
        getWindow().setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_view_tab));

Cordova 之燃燒我的卡路里  (刪除 自己配置statusBar)

方案1刪除()

https://blog.csdn.net/mp624183768/article/details/83578144

方案2 改顏色 ()

從網上找了一套方案 靈感來自 https://blog.csdn.net/h0422856/article/details/70820990?utm_source=itdadao&utm_medium=referral

然後給web端看了 就很上道的給了一串程式碼 換上了 居然真的可以了

在app.js下 修改

             if (window.StatusBar) {
                                     window.StatusBar.overlaysWebView(true);
                                     window.StatusBar.styleDefault();
                                     window.StatusBar.backgroundColorByName("gxbColor");
                                 }

在 cordova-plugin-statusbar

cordova.define("cordova-plugin-statusbar.statusbar", function(require, exports, module) {
/*
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 *
*/

var exec = require('cordova/exec');

var namedColors = {
    "black": "#000000",
    "darkGray": "#A9A9A9",
    "lightGray": "#D3D3D3",
    "white": "#FFFFFF",
    "gray": "#808080",
    "red": "#FF0000",
    "green": "#00FF00",
    "blue": "#0000FF",
    "cyan": "#00FFFF",
    "yellow": "#FFFF00",
    "magenta": "#FF00FF",
    "orange": "#FFA500",
    "purple": "#800080",
    "brown": "#A52A2A",
     "gxbColor": "#1FB6FF"
};

var StatusBar = {

    isVisible: true,

    overlaysWebView: function (doOverlay) {
        exec(null, null, "StatusBar", "overlaysWebView", [doOverlay]);
    },

    styleDefault: function () {
        // dark text ( to be used on a light background )
        exec(null, null, "StatusBar", "styleDefault", []);
    },

    styleLightContent: function () {
        // light text ( to be used on a dark background )
        exec(null, null, "StatusBar", "styleLightContent", []);
    },

    styleBlackTranslucent: function () {
        // #88000000 ? Apple says to use lightContent instead
        exec(null, null, "StatusBar", "styleBlackTranslucent", []);
    },

    styleBlackOpaque: function () {
        // #FF000000 ? Apple says to use lightContent instead
        exec(null, null, "StatusBar", "styleBlackOpaque", []);
    },

    backgroundColorByName: function (colorname) {
        return StatusBar.backgroundColorByHexString(namedColors[colorname]);
    },

    backgroundColorByHexString: function (hexString) {
        if (hexString.charAt(0) !== "#") {
            hexString = "#" + hexString;
        }

        if (hexString.length === 4) {
            var split = hexString.split("");
            hexString = "#" + split[1] + split[1] + split[2] + split[2] + split[3] + split[3];
        }

        exec(null, null, "StatusBar", "backgroundColorByHexString", [hexString]);
    },

    hide: function () {
        exec(null, null, "StatusBar", "hide", []);
        StatusBar.isVisible = false;
    },

    show: function () {
        exec(null, null, "StatusBar", "show", []);
        StatusBar.isVisible = true;
    }

};

// prime it
exec(function (res) {
    if (typeof res == 'object') {
        if (res.type == 'tap') {
            cordova.fireWindowEvent('statusTap');
        }
    } else {
        StatusBar.isVisible = res;
    }
}, null, "StatusBar", "_ready", []);

module.exports = StatusBar;

});