移除 Android 应用程序周围的绿色边框

Posted 2023-05-06

【中文标题】移除 Android 应用程序周围的绿色边框

【英文标题】：Remove green border around Android application

【发布时间】：2018-08-21 16:54:37

【问题描述】：

我目前遇到一个问题：使用 Cordova 构建的 android 应用程序在应用程序主体周围有一个绿色框：

这似乎是由于 Web 容器处于焦点位置，因为当显示警报时绿色轮廓消失了。

此绿色边框不会出现在 ios 版本的应用程序中，也不会出现在浏览器中或使用 chrome://inspect 检查模拟器框架时。

我尝试了多个 CSS 修复来尝试删除此边框，例如：

* 
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 0px solid #000;

以及禁用设备上的所有辅助功能设置，但无济于事。

其他细节：

Android SDK 版本：27 测试的设备：Nexus 5、Nexus 6、Pixel XL Cordova 版本：3.6.4（由于当前使用 MobileFirst 的框架要求，无法更改）

有人知道如何解决这个问题吗？

【参考方案1】：

在你的

Android/App/src/main/res/values/styles.xml

添加此项，样式标签内

<item name="android:defaultFocusHighlightEnabled">false</item>

【参考方案2】：

我能够通过将以下行添加到CordovaLib/src/org/apache/cordova/ 下的CordovaWebView Java 类的init 方法来解决此问题：

this.setDefaultFocusHighlightEnabled(false);

【讨论】：

这对我有用，但我想知道是否有更好/更合适的解决方案？

此页面显示此设置与 Android Oreo/8.0 相关。如果您认为保留布局 xml 中的视觉更改是可行的方法，而不是您所做的方式，则可以在布局 xml 文件中更改它developer.android.com/about/versions/oreo/…

使用 Cordova Android 8.0.0 我必须将此行添加到 CordovaWebViewImpl.java 的 init 方法中：engine.getView().setDefaultFocusHighlightEnabled(false);

【参考方案3】：

这是因为 isInTouchMode 在 Cordova 网络视图中是 true（特定于 Oreo）。

解决方案

转到CordovaLib/src/org/apache/cordova/CordovaActivity.java

查找appView.getView().requestFocusFromTouch();

将上面的行替换为以下内容：

if (Build.VERSION.SDK_INT < 26) 
    appView.getView().requestFocusFromTouch();

【参考方案4】：

移除安卓平台

添加此项目

<item name="android:defaultFocusHighlightEnabled">false</item>

在下面这两个文件中

\node_modules\cordova-android\spec\fixtures\android_studio_project\app\src\main\res\values\styles.xml

和

\node_modules\cordova-android\test\app\src\main\res\values\styles.xml

添加安卓平台