时间戳

首页 > 解决方案 > 在沉浸式模式下使用 Cordova 的 Android 中带有缺口的黑条

javascript - 在沉浸式模式下使用 Cordova 的 Android 中带有缺口的黑条

问题描述

我正在制作一个 android 应用程序，我希望它处于沉浸式模式，我使用插件完成了它，但我无法在带有缺口的 android 设备上进行沉浸式工作（顶部和底部的黑条）。如何使用整个屏幕？

所以我一直在阅读很多解决方案：

setTimeout(function(){
    if (window.AndroidFullScreen) { 
        window.AndroidFullScreen.immersiveMode(); 
        AndroidFullScreen.showUnderStatusBar();
        AndroidFullScreen.showUnderSystemUI();
}, 2000);

（我也需要使用超时来应用更改，但我不知道为什么，无论如何要在应用程序启动时应用代码，我正在使用 deviceready。

AndroidFullScreen.setSystemUiVisibility(
        AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_STABLE
        | AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        | AndroidFullScreen.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        | AndroidFullScreen.SYSTEM_UI_FLAG_HIDE_NAVIGATION
        | AndroidFullScreen.SYSTEM_UI_FLAG_FULLSCREEN
        | AndroidFullScreen.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
    , successFunction, errorFunction
);

但问题是系统UI没有隐藏，当我从顶部拖动打开通知菜单并隐藏它时，UI最终消失但屏幕又回到了黑条，所以它就像旧的沉浸模式() （此代码也再次出现在 setTimeOut 中）。

我的 config.xml：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.adia.security" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="AndroidLaunchMode" value="singleInstance" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="KeepRunning" value="true" />
    </platform>
    <edit-file parent="/manifest/application" target="AndroidManifest.xml">
        <meta-data android:name="android.max_aspect" android:value="2.1" />
        <activity android:resizeableActivity="false" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" />
    </edit-file>
    <preference name="Fullscreen" value="true" />
    <preference name="StatusBarOverlaysWebView" value="true" />
    <plugin name="cordova-plugin-fullscreen" spec="1.2.0" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <engine name="android" spec="^7.1.4" />
</widget>

因此，当我将immersiveMode() 与插件一起应用时，我有了这个：

沉浸式模式

而这与其他代码，用户界面不会消失，当我打开通知菜单并隐藏它时，它又回到了第一个图像。

通知菜单

我想要的是这样，但没有显示 UI。

谢谢你。

标签： javascriptandroidcordova

解决方案

我让它工作了。所以我只需要添加带有以下内容的styles.xml：

<resources>
    <style name="Full">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

所以我创建了 styles.xml 并将其添加到我的 www 文件夹中，然后将其添加到我的平台 android 部分的 config.xml 中：

<platform name="android">
    <resource-file src="www/styles.xml" target="app/src/main/res/values-v28/styles.xml" />
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:resizeableActivity="false"/>
    </edit-config>
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
        <activity android:theme="@style/Full"/>
    </edit-config>
    <config-file parent="./application" target="AndroidManifest.xml">
        <meta-data android:name="android.max_aspect" android:value="5.0" />
    </config-file>
</platform>

资源文件，将文件夹 values-v28 中的 styles.xml 添加到正确的路径中，v28 用于 28 sdk，因此 Android 9。

然后我使用了两次edit-config，第一次修改应用程序以添加 android:resizeableActivity="false" 以使元数据 android.max_aspect 工作，而 android.max_aspect 强制 android 使用所有方面-画面比例。

我在活动中添加自定义样式的另一个编辑配置，如果我把它放在我的应用程序中它将不起作用，所以我把它放在这里。

然后使用插件函数immersiveMode() 一切正常。

Android Notch 全屏沉浸式

我在这里找到了解决方案： https ://proandroiddev.com/making-notch-friendly-apps-for-android-75776272be5c

推荐阅读