logo标签列表

当键盘消失时，Android显示白色背景

androidangularjsionic-framework
24

这是一个不同用户的视频，但问题相同：

http://imgur.com/ca2cNZv

我设置了一张背景图片如下：

  .pane {
  background-image:  url("../img/inner-banner-bg.jpg");
  background-repeat: repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

而在我的config.xml文件中

<preference name="Fullscreen" value="false"/>

我目前遇到的问题是，当我点击“完成/搜索”后，键盘消失后会在过渡期间留下一个白色背景，持续约0.5秒钟，因为键盘所覆盖的空间正在进行调整，这看起来有点不好。

当键盘关闭时，它会恢复原大小但留下白色间隙。我如何让键盘不缩小背景视图？

当设置以下内容时：

<preference name="Fullscreen" value="true"/>

没发生。我也在使用Ionic插件键盘。

无论如何，我能否使键盘渐变的过渡不显示白色背景？

编辑：这是我的Android设置。

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

我的配置设置

  <access launch-external="yes" origin="geo:*"/>
  <allow-intent href="geo:*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="4000"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="KeyboardShrinksView" value="false"/>

而在Package.json中

  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^2.0.4",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-geolocation",
    "cordova-plugin-network-information",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]

在我的 Web 视图中，我使用了 ion-view 和 ion-content。

<ion-view>
    <ion-content class="has-header has-tabs">
4
在原生的安卓代码中，有一个标志"windowSoftInputMode=adjustPan"，如果是安卓应用程序，这个标志可以帮助解决问题。因此，如果您可以深入挖掘并查看源代码中安卓对这个标志的处理方式，就可以将这个逻辑转换为您自己的代码。 - MKJParekh
可能是GPU渲染。 - Taylor Courtney
我尝试了从'adjustResize'改为adjustPan，这确实解决了问题，但是你会失去内容不会很好地调整大小以适应输入视图等功能的优点，所以我认为这个问题与adjustResize有关。 - StevieB
你可以分享一下问题的截图和出现问题的布局文件吗？ - Nick Cardoso
我在网上找到了一个有同样问题的人发布的内容，链接为http://imgur.com/ca2cNZv。 - StevieB
显示剩余12条评论
8个回答
11
在AndroidManifest.xml文件中，尝试将windowSoftInputMode属性设置为adjustNothing。
android:windowSoftInputMode="adjustNothing"

对于我的 Ionic 项目而言，当软键盘打开时，防止 Cordova WebView 调整大小是起作用的。

1
好的，这确实解决了问题，并且是迄今为止最接近解决方案的一个，唯一的缺点是没有调整大小，有时很难看到输入框，但我想那就是这个选择的限制。 - StevieB
2
真是太好了，不用看到白色背景和闪烁了。但由于无法调整大小，有时我无法看到弹出窗口上的按钮，这并不是一个很好的用户体验。 - StevieB
很不幸，我认为键盘关闭时的白色背景是 Cordova webview 的一个问题，它在调整大小方面太慢了。 - beaver
我也尝试了使用Crosswalk webview，但没有明显的改善。 - beaver
1
这会导致键盘阻止某些内容，并且无法滚动。 - Chisko
1
那是你的windowBackground透过来了。你可能正在使用那个蓝绿色背景覆盖你主题的白色背景。修改你的主题以包含更好的背景颜色，并尽可能从你的布局中移除背景，以提高绘图性能。
<style name="MyAppTheme" parent="Theme.DeviceDefault.NoActionBar">
  ...
  <item name="android:windowBackground">#ff000000</item>
  ...
</style>
这个在Ionic的哪里放？ - StevieB
我从未在 Cordova（或 Ionic）项目中看到过 styles.xml。我在 Cordova 的 Xwalk 插件中有一个 styles.xml，但那是另一回事... - beaver
1

放置：

<style name="AppTheme" parent="AppBaseTheme">
     <item name="android:windowBackground">@drawable/gradient</item>
</style>

在 styles.xml 中，source。
我在 Ionic 项目中没有看到任何样式 XML。 - StevieB
1
因为窗口自动调整大小以为软输入区域腾出空间，所以会发生这种情况。
在AndroidManifest.xml中使用android:windowSoftInputMode="adjustNothing"。
<activity android:windowSoftInputMode="adjustNothing"
..
...
</activity>
哇，它像魔法一样工作，谢谢。 - MidWinterNight
0

嘿，这个问题有一个简单的解决方法

你需要在ion-content中添加overflow-scroll="false"，这应该可以解决它

<ion-content class="padding has-header has-footer" overflow-scroll="false">

相关话题 Ionic论坛

嗯，这很奇怪，你看过论坛帖子了吗？有些人说使用ion-scroll而不是ion-content对他们有效，但由于我遇到了同样的问题，overflow-scroll对我起作用。 - stackg91
尝试了ion-scroll，但没有什么区别。每次键盘关闭时，都会出现白色背景闪烁的问题。 - StevieB
你的项目中使用默认的Webview还是Crosswalk？你的安卓版本是多少？ - stackg91
从未听说过Crosswalk，那是Ionic的一部分吗？ - StevieB
嘿，SevieB，Ionic修复了这个bug，我刚刚安装了Ionic的1.2.4版本，现在似乎没有白色背景了，我甚至可以在任何地方删除我的解决方法，它仍然可以正常工作。 - stackg91
显示剩余2条评论
0

打开你的平台 -> 应用程序 -> src -> AndroidManifest.xml

编辑

android:windowSoftInputMode="adjustResize"

改为

android:windowSoftInputMode="adjustNothing"

0

做这个对我有用：

我想在我的应用程序登录页面上使用选择器“app-login”应用背景。

我在页面内添加了一个 div 并将其背景设置为所需的图像。但是每当我打开键盘时，屏幕的某些部分就会变成白色，位于键盘上方，关闭键盘后留下了一些空白。

添加 height: 100% 或 height: 100vh 没有解决问题。它在某些设备上解决了问题，但在其他设备上没有解决。

做这个： 不要将背景添加到 ion-content 或 div 中，只需进入全局 CSS 文件并添加：

app-login{
  background-image: url("./assets/bg@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
}

将CSS选择器更改为您页面的选择器，并相应地更改URL以使用您自己的图像。

-1
将以下代码添加到您的 'App.js' 中。add
$window.addEventListener('native.keyboardhide', function (event) {
    $rootScope.$broadcast('native.keyboardhide', event);
});

当使用 $window 和 $rootScope 依赖项调用 app.run() 方法时，还需添加

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }

在 $ionicPlatform.ready() 中。

请确保您的代码已通过检查应用程序进行更新。如果未更新，请尝试删除和添加平台并重新构建您的应用程序。

当键盘消失时，没有效果仍然是白色背景。 - StevieB
这会导致键盘遮挡底部区域，元素在其下面不可见，也无法滚动到。 - Chisko
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接