2022-09-06 Android输入法顶起输入框，遮挡RecyclerView

Posted 2023-04-02 颈椎以上瘫痪

背景

IM项目中的会话界面，一般就是顶部一个标题，底部是输入区域，中间显示消息列表。

微信的会话界面中，进入会话界面，有以下几点：

• 隐藏输入法
• 当消息数量能占满屏幕时，底部显示最后一条，依次往上排列
• 当消息数量不能占满屏幕时，列表部分从上往下排列，列表下部分空白
• 点击输入框，弹起输入法，把输入区域和消息列表整体都顶起来，当输入区域顶起来触不到消息列表的最后一条，那仍然在列表显示比较少的消息列表

隐藏输入法

进入Activity时，如果界面中有输入框控件，系统默认获取输入框的焦点并弹起输入法

但是我们通常不需要它这样做，在androidManifest.xml文件中声明Activity时加上android:windowSoftInputMode="stateHidden"属性，在进入界面时会隐藏输入法

<activity
    android:name=".ui.activity.chat.ChatActivity"
    android:launchMode="singleTask"
    android:configChanges="keyboardHidden|screenSize|orientation"
    android:screenOrientation="userPortrait"/>

未标题-1.png

输入法顶起消息列表

在会话界面中消息列表默认从上往下排列，当消息数量占满屏幕时，最后一条自然就显示在列表底部，挨着输入法，当我们点击输入框弹起输入法，将输入区域顶起来时，列表区域没有动，输入法区域会将列表下面的区域遮挡。

未标题-2.png

解决方案1

在onCreate()函数中setContentView()之前添加getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
    setContentView(R.layout.activity_chat_user);
    ButterKnife.bind(this);
    init();

这种方式确实可以让输入法将输入区域和列表区域整体都顶上去，但是也会将顶部的标题区域也顶上去，看样子像是将整个Activity的布局都顶上去了，体验很差，尤其是当你的会话界面中只有一条消息时，弹起输入法时，那一条消息也被顶上去了，界面上看着怪别扭的。并且加上这个属性，当进入进入时输入法还是会弹起，在清单文件中声明隐藏输入法也失效了。

未标题-3.png

解决方案2

在RecyclerView设置布局管理器时，让布局管理器设置一个属性setStackFromEnd(true);让RecyclerView的内容始终按照顺序排列，并让最后添加的item显示数来。

private void initView() 
    screenHeight = DisplayUtil.getScreenHeight(this);
    LinearLayoutManager mManager =new LinearLayoutManager(this);
    mManager.setStackFromEnd(true);
    mListMessage.setLayoutManager(mManager);
    //mListMessage.setLayoutManager(new LinearLayoutManager(this));
    changeSendType();

添加这个属性后效果还可以，当列表中的消息数量能够占满屏幕时，用起来基本很好。但是当列表中的数量不能够占满屏幕时，我们应该是让消息内容从上往下排列，第一条在列表的上面，而此时却是从下往上排列，不能占满屏幕的item从列表的底部往上排列。

未标题-4.png

解决方案3

我们可以监听列表布局的改变事件，recyclerview.addOnLayoutChangeListener();当列表控件的布局发生变化，说明是键盘弹起了，此时我们可以指定列表显示的位置。

mListMessage.addOnLayoutChangeListener(new View.OnLayoutChangeListener() 
    @Override
    public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) 
        mListMessage.scrollToPosition(mChatMessageListAdapter.getItemCount() - 1);
    
);

这个状态应该目前就是理想的状态，不需要结合其他的配置，上文中添加的那些属性是可以不要的，单独使用这个事件就可以。

未标题-5.png

button按钮被输入法顶起来，遮盖了input输入框

 　　在做手机端的表单提交的时候，在chrome浏览器调试的时候，忘记输入法会引起布局的问题。在webApp里input输入框，会自动调起输入法，但是输入法会改变浏览器的可视区域的大小。就是会把浏览器可视区域的内容变小，因为输入法要占地方。一开始不知道怎么解决了，查了写资料，网上说是监控resize，当页面发生变化的时候，会触发该事件；哈哈,这就好办了...

　　开始按钮的显示是这样的, 在填写银行账号的时候，还会影响文本框的输入...

　　

　　因为我使用的是vue2.x,那么就在mounted钩子函数里监听该事件：

　　

 

　　btnShow 实在data里声明的变量，默认是true（其实也可以动态改变 :style 来隐藏或显示，也可以设置z-index=-1来改变按钮的显示状态）；当监控的resize发生变化的时候，实时的获取浏览器的高度（newHigh）；在和这个页面的实际高度（oldHigh）对比，如果 newHigh 小于 oldHigh 说明浏览器的高度被输入法遮挡了一部分；这个时候，可以让button隐藏；反之显示；

 　　实现的效果如下：

　　

　　基本实现了自己的需求...

　　

以上是关于2022-09-06 Android输入法顶起输入框，遮挡RecyclerView的主要内容，如果未能解决你的问题，请参考以下文章

Android 底部按钮被软键盘顶起问题解决

移动端底部被输入法顶起的解决办法

button按钮被输入法顶起来，遮盖了input输入框

ios中输入法把 内容顶起后 内容下不来问题

（vue）移动端点击输入框，弹出键盘，底部被顶起问题

移动端键盘顶起遮挡输入框