仿支付宝的登录界面

Posted 2022-11-01 xingxing_yan

1. 描述：

我们看市面上很多应用的登录界面，都是当输入法弹出时，账号输入框和密码输入框都会上移，不会遮住任何一个输入框，而且底部的背景图是不动的。而我们平时布局中，不管是将activity的windowSoftInputMode属性设置为adjustPan还是adjustResize, 要么就是输入框被遮挡，要么就是背景图会上移，体验则比较差。今天我们就以支付宝的登录界面为例，来处理一下这些问题。

老样子，先上图：

2.实现

(1) 问题分析：
a). 背景图不能随着键盘的显示隐藏而移动
b). 键盘显示时不能遮挡账号和密码任何一个输入框
c). 键盘显示时，头像隐藏，键盘隐藏时，头像显示

(2)实现
首先来看第一个问题：背景图不移动。我们知道一个Activity的根View是DecorView，而DecorView中又包含了ActionBar和id为content的FrameLayout，一般不管是压缩布局还是上移布局，其实操作的都是android.R.id.content这个布局，只要设置的背景图在这个布局内，图片要么会上移，要么会压缩，但是只要我们将背景图设置给DecorView，背景图就不会移动，所以只需一句代码即可：

    getWindow().getDecorView().setBackgroundResource(R.mipmap.ic_login_bg);

再来看第二问题：不遮挡输入框。当把activity的windowSoftInputMode属性设置为adjustPan时，系统会计算获取焦点的EditText需要上移的高度，然后调整布局上移，此时如果是账号输入框获取焦点，就只会将账号的EditText显示出来，而密码输入框则会被覆盖。所以这里我们需要设置windowSoftInputMode属性为adjustResize。这样设置后，布局会从底部留够给键盘的高度，然后将原来的布局全部上移，这个就可以看到所有的输入框了。所以，在AndroidManifest.xml中需要这个设置：

<activity
    android:name=".LoginActivity"
    android:windowSoftInputMode="stateHidden|adjustResize"
    android:theme="@style/Theme.AppCompat.NoActionBar"/>

注意：将windowSoftInputMode设置为adjustResize时，不能设置此activity全屏，否则adjustResize将不会起作用。

最后再说最后一个问题，头像的显示隐藏。因为头像的显示和隐藏时跟键盘的显示和隐藏的动作正好相反，所以我们需要监听键盘的显示和隐藏。由于系统没有提供键盘显示和隐藏的监听的API，所以网上有很多其他的方式来处理这个问题。我这里使用的是开源库KeyboardChangeListener 来监听键盘的显示和隐藏，就不过多的介绍这个库了，感兴趣的可以自己去看看，这里直接看怎么使用：

 /**
     * 添加键盘的显示隐藏监听
     */
    private void addKeyBoardListener()
        mKeyboardListener = new KeyboardChangeListener(this);
        mKeyboardListener.setKeyBoardListener(new KeyboardChangeListener.KeyBoardListener() 
            @Override
            public void onKeyboardChange(boolean isShow, int keyboardHeight) 
                if (isShow)
//                    Toast.makeText(LoginActivity.this, "show keyboard", Toast.LENGTH_SHORT).show();
                    mIvHead.setVisibility(View.GONE);
                else
//                    Toast.makeText(LoginActivity.this, "hidden keyboard", Toast.LENGTH_SHORT).show();
                    mIvHead.setVisibility(View.VISIBLE);
                
            
        );
    

KeyboardChangeListener中有一个监听回调接口，在onKeyboardChange(boolean isShow, int keyboardHeight)方法中我们可以拿到键盘显示隐藏的标志已经键盘的高度，根据isShow来决定头像是显示还是隐藏。

3. 总结

至此，登录页面的一些常见问题就差不多解决了，效果如开始的图，体验确实要好上一些。
这个demo是一个很简单的例子，所有的代码基本都贴上去了，所以这里就不提供源码了，愿这篇博客能够帮到正在踩此坑的你。