键盘淡出时的Android白色背景

时间:2016-02-04 12:46:30

标签: android angularjs ionic-framework

来自不同用户的问题的视频,但其相同

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"
  ]

在我的网页视图中,我使用了离子视图和离子内容

<ion-view>
    <ion-content class="has-header has-tabs">

8 个答案:

答案 0 :(得分:10)

在AndroidManifest.xml文件中尝试将[HttpPost] public ActionResult ImportarItensInventario(Guid inventarioId) { if (Request.Files["UploadInventarioItems"] == null || Request.Files["UploadInventarioItems"].ContentLength == 0) { return RedirectToAction(nameof(Details), new { id = inventarioId }); } string path = $"{Server.MapPath("~/Uploads")}/{Request.Files["UploadInventarioItems"].FileName}"; if (System.IO.File.Exists(path)) { System.IO.File.Delete(path); } Request.Files["UploadInventarioItems"].SaveAs(path); var model = new InventarioViewModel {InventarioId = inventarioId}; var result = _arquivoAppService.ImportarArquivo(InventarioViewModel.ToModel(model), Request.Files["UploadInventarioItems"].FileName); return RedirectToAction(nameof(Details), new { id = inventarioId}); } 属性设置为adjustNothing

windowSoftInputMode

它适用于我的Ionic项目,当软键盘打开时,无法调整Cordova webview的大小。

答案 1 :(得分:1)

这是你的windowBackground偷看。您可能正在使用该青色背景绘制主题的白色背景。修改主题以包含更好的背景颜色,并尽可能从布局中删除背景以提高绘图性能。

<style name="MyAppTheme" parent="Theme.DeviceDefault.NoActionBar">
  ...
  <item name="android:windowBackground">#ff000000</item>
  ...
</style>

答案 2 :(得分:1)

把:

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

在styles.xml中 source

答案 3 :(得分:0)

嘿,这个

有一个简单的解决方法

你需要添加overflow-scroll =&#34; false&#34;对你的离子含量这应该解决它

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

相关主题Ionicforum

答案 4 :(得分:0)

它的发生是因为窗口大小本身为软输入区域腾出空间

在AndroidManifest.xml中使用android:windowSoftInputMode="adjustNothing"

<activity android:windowSoftInputMode="adjustNothing"
..
...
</activity>

答案 5 :(得分:0)

打开您的平台->应用-> src-> AndroidManifest.xml

修改

android:windowSoftInputMode="adjustResize"

收件人

android:windowSoftInputMode="adjustNothing"

答案 6 :(得分:0)

这样做为我解决了:

我试图使用选择器“app-login”将背景应用到我应用的登录页面。

我在页面内添加了一个 div 并将其背景设置为我想要的图像。但是每当我打开键盘时,我都会看到键盘上方的部分屏幕变成白色,关闭键盘后还剩下空白。

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

这样做: 无需为 ion-content 或 div 添加背景,只需进入您的全局 CSS 文件并添加:

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

将 CSS 选择器更改为您页面的选择器,并相应地将 url 更改为您自己的图片。

答案 7 :(得分:-1)

在“App.js”中添加以下代码。添加

$window.addEventListener('native.keyboardhide', function (event) {
    $rootScope.$broadcast('native.keyboardhide', event);
});

当app.run()方法调用$ window和$ rootScope依赖项时。另外,添加

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

在$ ionicPlatform.ready()。

请确保通过检查您的应用来更新您的代码。如果它没有更新,请尝试删除并添加平台并重建您的应用程序。