仿微信聊天界面——键盘与面板的切换

如果认真留意的话会发现，正常情况下，安卓版本的微信打开表情面板的高度总是能保持和键盘的高度一致（IOS的好像不一致），这样用户在进行键盘和面板的切换时能得到较好的用户体验。此外，微信也做了一定的处理，保证键盘和面板的切换比较流畅，不会出现跳动的现象。从这些细节可以体现出微信的用户体验还是做得很好的。首先上两张图感受一下：

第一张是把面板的高度写死，并且在面板和键盘的切换时没做特殊处理，这样面板和键盘的高度不一致而且切换时会出现跳动。第二张就是仿微信的效果。总结一下，这里需要完成的技术有两点：一是保证面板和键盘进行切换时高度保持一致，二是保证切换时不会出现跳动现象。

一. 面板的高度与键盘保持一致

一开始我不太明白这是怎么实现的，还以为有什么方法能够在程序运行时就获取到默认键盘的高度，然而查了一些资料后，发现是没有相应的API来获取的，而且经过试验后说明微信也不是提前就能够获取到键盘的高度的，而是要在进入聊天页后第一次打开键盘后才能获取到。前面说了是正常情况下能保证两者高度一致，下面说明什么情况下两者不一致。大部分人手机应该是用的第三方键盘，你可以做一下实验：
1.将键盘的高度调整到一个高到离谱的位置，再打开面板，这是会发现两者的高度不一致。这说明了当键盘的高度超过一定范围时，为了保证界面的美观，面板的高度会调整到一个默认的合适位置。
2.将键盘的高度调整到一个比较合适的位置，但跟系统键盘的高度不一致，然后在系统设置里把默认键盘设为系统键盘，再打开微信，先点开面板，再弹出键盘，这时你会发现两者的高度不一致，面板的位置仍保持在上一次的位置；打开一次键盘后再打开一次面板，这时你又会发现两者的高度又一致了，这就说明了微信也是需要在打开一次键盘后获取到其高度后再动态调整其面板的位置的，并没什么黑科技能提前获取。

那么现在的问题就变成了怎么在弹出键盘后获取其高度。其实也很简单，注意到弹出键盘后主布局是被压缩的，如果能获取到弹出前后主布局的高度，相减自然就是键盘的高度。核心代码如下：

root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
//    监听根布局的高度变化@Overridepublic void onGlobalLayout() {int currentHeight = root.getHeight();if (screenHeight == 0) {screenHeight = root.getHeight();}
//        不等于屏幕高度或者记录的键盘高度，说明键盘高度发生了变化，需要更新记录的高度if (currentHeight != screenHeight && currentHeight != (screenHeight - inputMethodHeight)) {inputMethodHeight = screenHeight - currentHeight;isInputMethodHeightDirty = true;}}
});
…
@Override
public void onPause() {super.onPause();if (isInputMethodHeightDirty) {sharedPreferences.edit().putInt(PREF_KEY_INPUT_METHOD_HEIGHT, inputMethodHeight).commit();isInputMethodHeightDirty = false;}
}
…
@Override
public void setPanelHeight(int height) {if (height > MAX_HEIGHT || height <= MIN_HEIGHT) {return;} else if (height != morePanel.getMeasuredHeight()) {ViewGroup.LayoutParams params = morePanel.getLayoutParams();params.height = height;morePanel.setLayoutParams(params);ViewGroup.LayoutParams params2 = emojiPanel.getLayoutParams();params2.height = height;emojiPanel.setLayoutParams(params2);}
}

首先就是监听根布局高度的变化，通过addOnGlobalLayoutListener方法添加监听器，当根布局的高度发生变化时会执行onGlobalLayout回调。注意布局刚加载完毕时也会执行，因此可以获取弹出前的高度。当键盘弹出后会执行此方法，判断如果根布局高度不等于屏幕高度或者屏幕高度减去记录的键盘高度，说明键盘高度发生了变化，需要更新记录的高度。
获取到键盘高度后，在弹出面板时进行判断，如果当前面板的高度不等于键盘高度就进行调整使两者一致。最后再onPause()中判断如果键盘的高度发生变化的话就写回sharedPreference文件中，以后每次启动就可以通过sharedPreference文件获取之前记录的键盘高度。这样就使得面板高度与键盘高度保持一致。

二．解决面板和键盘切换的跳动问题

首先要知道，界面跳动是由于软键盘的特性引起的。默认情况下，弹出键盘时会挤压主布局，此时如果又要进行面板的显示和隐藏，就会造成比较明显的跳动现象。要解决这个问题，就需要从键盘的行为下手。实际上，键盘的行为和Activity的windowSoftInputMode属性有关：
当属性为adjustResize时，软键盘弹出时会挤压根布局，这样可以保证输入法不会覆盖到输入框，默认的就是这种行为；
当属性为adjustNothing时，软键盘弹出时会直接覆盖到根布局上，根布局大小不变，这种情况输入法有可能会覆盖输入框。
那么在面板和键盘切换过程更改windowSoftInputMode属性，就能解决跳动问题：
1. 弹出面板时，将属性设为adjustNothing，这时如果弹出键盘，不会挤压根布局，由于两者高度一致，键盘就刚好覆盖了面板。
2. 隐藏面板时，将属性设为adjustResize，这时如果弹出键盘，会挤压根布局，这样就不会遮挡输入框。
核心代码如下:

@Override
public void showOrHideEmojiPanel(boolean showView) {if (showView) {setInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);mView.hideKeyboard();mView.showEmojiPanel();} else {mView.hideEmojiPanelDelayed();}
}
…
@Overridepublic void hideEmojiPanelDelayed() {
//        这里要delayed执行否则依然会跳动，因为隐藏面板的同时要弹出键盘，
//        弹出键盘有个延迟，如果在弹出键盘前执行的话就会造成跳动emojiPanel.postDelayed(new Runnable() {@Overridepublic void run() {hideEmojiPanel();
mPresenter.setInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);}},200);}

代码是用MVP架构写得，mView和mPresenter分别表示MVP中的V和P，其他别的逻辑我都省略了，其实核心的逻辑就是隐藏和显示面板时更改Activity的windowSoftInputMode属性。

这种方法是从自己的思路出发的，效果只用了一部华为荣耀机测试，不保证兼容，github上有位曾经在微信中工作过得大神开源了一个解决方案，地址为：https://github.com/Jacksgong/JKeyboardPanelSwitch 可以参考下，具体的方法还没研究过，以后有机会再看一下。