前言:
最近在做Vue+Cordova做WebApp的專案
在全屏時會有輸入鍵盤擋住輸入框的問題
查詢並且測試了許久似乎是android1.x 到現在android版本
都仍然存在的bug
參考文章:
不過網路上找到的資料很少針對cordova去做修改
以下是我測試了許久才解決的問題
特此紀錄此坑
解法:
在src-cordova/platforms/android/CordovaLib/src/org/apache/cordova下
新增檔案AndroidBug5497Workaround.java
內容如下
package org.apache.cordova;
import android.graphics.Rect;
import android.app.Activity;
import android.view.ViewTreeObserver;
import android.view.View;
import android.widget.FrameLayout;
public class AndroidBug5497Workaround {
// For more information, see https://code.google.com/p/android/issues/detail?id=5497
// To use this class, simply invoke assistActivity() on an Activity that already has its content view set.
public static void assistActivity (Activity activity) {
new AndroidBug5497Workaround(activity);
}
private View mChildOfContent;
private int usableHeightPrevious;
private FrameLayout.LayoutParams frameLayoutParams;
private AndroidBug5497Workaround(Activity activity) {
FrameLayout content = (FrameLayout) activity.findViewById(android.R.id.content);
mChildOfContent = content.getChildAt(0);
mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
possiblyResizeChildOfContent();
}
});
frameLayoutParams = (FrameLayout.LayoutParams) mChildOfContent.getLayoutParams();
}
private void possiblyResizeChildOfContent() {
int usableHeightNow = computeUsableHeight();
if (usableHeightNow != usableHeightPrevious) {
int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight();
int heightDifference = usableHeightSansKeyboard - usableHeightNow;
if (heightDifference > (usableHeightSansKeyboard/4)) {
// keyboard probably just became visible
frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
} else {
// keyboard probably just became hidden
frameLayoutParams.height = usableHeightSansKeyboard;
}
mChildOfContent.requestLayout();
usableHeightPrevious = usableHeightNow;
}
}
private int computeUsableHeight() {
Rect r = new Rect();
mChildOfContent.getWindowVisibleDisplayFrame(r);
return (r.bottom - r.top);// 全屏模式下： return r.bottom
}
}
接著在CordovaActivity.java中搜尋
setContentView(appView.getView());
並在下一行貼上
AndroidBug5497Workaround.assistActivity(this);
並且確保src-cordova/plarforms/android/app/src/main/AndroidManifest.xml
<activity> 的 android:windowSoftInputMode="adjustResize"
是adjustResize屬性
預設值就是adjustResize
接著App.Vue的mounted中貼上
document.body.style.height = document.body.clientHeight + 'px';
以上這些步驟就能解決
VueCLI3 搭配cordova 開啟強制全屏時
彈出鍵盤擋住輸入框的問題
創作內容
解決 VueCLI3 + Cordova 全屏時輸入鍵盤擋住輸入框的坑
Cocos2d-x (8)