在Android開發中,鍵盤彈出時會遮擋住EditText等輸入框,給用戶的使用帶來不便。為了改善用戶體驗,我們可以通過布局自動上移的方式,讓用戶在輸入時不會被鍵盤遮擋,本文將介紹幾種實現方式。
一、使用WindowSoftInputMode屬性
WindowSoftInputMode屬性可以設置當前Activity的輸入法模式。我們可以在對應Activity的AndroidManifest.xml文件中添加如下代碼:
android:windowSoftInputMode="adjustResize"
這個屬性能夠自動調整布局大小以適應輸入法,但只有當指定的布局內容有足夠的空間時才有效。
在這個方法中,如果布局內容不夠,布局可能會被壓縮而且部分內容遮擋。因此,我們可以使用ScrollView來保證布局可以完全展開。這樣,當鍵盤彈出時,布局會自動上移。
二、使用AndroidBug5497Workaround
如果WindowSoftInputMode屬性方法不起作用,我們可以考慮使用AndroidBug5497Workaround類。這個類可以從GitHub上找到:
public class AndroidBug5497Workaround {
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)) {
frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
} else {
frameLayoutParams.height = usableHeightSansKeyboard;
}
mChildOfContent.requestLayout();
usableHeightPrevious = usableHeightNow;
}
}
private int computeUsableHeight() {
Rect r = new Rect();
mChildOfContent.getWindowVisibleDisplayFrame(r);
return (r.bottom - r.top);
}
}
這個類通過監聽布局的視圖樹變化,來實現鍵盤彈出時的布局自適應,對於任何布局都有效。
三、使用react-native-keyboard-spacer插件
如果我們是在React Native開發中,可以使用react-native-keyboard-spacer插件。這個插件可以讓我們在鍵盤彈出時,自動增加屏幕的底部視圖高度。
首先,在終端中運行以下命令來安裝插件:
npm install react-native-keyboard-spacer --save
在使用前,我們需要先引入KeyboardSpacer:
import KeyboardSpacer from 'react-native-keyboard-spacer';
然後,將KeyboardSpacer放置在需要自適應的布局下方:
render() {
return (
<View style={{flex: 1}}>
<ScrollView style={{flex: 1}}>
<Text>這是頂部內容</Text>
<View style={{flex: 1}}>
<TextInput placeholder='請輸入'/>
</View>
<KeyboardSpacer/>
</ScrollView>
</View>
);
}
這個插件可以在iOS和Android上均有效。
總結
通過上述幾種方式,我們可以實現Android鍵盤彈出時,布局自動上移,以保證用戶輸入體驗的順暢。其中,第一種方法只對有空間的布局有效,第二種方法可以適用於任何布局,而第三種方法適用於React Native開發。開發者可以根據實際情況選擇適合自己的方法。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/238045.html