改善用户体验的实现：Android键盘弹出布局自动上移

在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上均有效。