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

2024-06-08 12:58

本文主要是介绍仿微信聊天界面——键盘与面板的切换,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如果认真留意的话会发现,正常情况下,安卓版本的微信打开表情面板的高度总是能保持和键盘的高度一致(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 可以参考下,具体的方法还没研究过,以后有机会再看一下。

这篇关于仿微信聊天界面——键盘与面板的切换的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1042250

相关文章

JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)

《JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)》本文介绍了如何在Windows系统上配置多版本JDK(以JDK8和JDK17为例),并通过图文结合的方式给大家讲解了详细步骤,具有... 目录第一步 下载安装JDK第二步 配置环境变量第三步 切换JDK版本并验证可能遇到的问题前提:公司常

nvm如何切换与管理node版本

《nvm如何切换与管理node版本》:本文主要介绍nvm如何切换与管理node版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录nvm切换与管理node版本nvm安装nvm常用命令总结nvm切换与管理node版本nvm适用于多项目同时开发,然后项目适配no

Oracle数据库如何切换登录用户(system和sys)

《Oracle数据库如何切换登录用户(system和sys)》文章介绍了如何使用SQL*Plus工具登录Oracle数据库的system用户,包括打开登录入口、输入用户名和口令、以及切换到sys用户的... 目录打开登录入口登录system用户总结打开登录入口win+R打开运行对话框,输php入:sqlp

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始,然后逐步加入更复杂的功能。这里我们将先实现一个简单的

IDEA如何切换数据库版本mysql5或mysql8

《IDEA如何切换数据库版本mysql5或mysql8》本文介绍了如何将IntelliJIDEA从MySQL5切换到MySQL8的详细步骤,包括下载MySQL8、安装、配置、停止旧服务、启动新服务以及... 目录问题描述解决方案第一步第二步第三步第四步第五步总结问题描述最近想开发一个新应用,想使用mysq

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

Spring Boot实现多数据源连接和切换的解决方案

《SpringBoot实现多数据源连接和切换的解决方案》文章介绍了在SpringBoot中实现多数据源连接和切换的几种方案,并详细描述了一个使用AbstractRoutingDataSource的实... 目录前言一、多数据源配置与切换方案二、实现步骤总结前言在 Spring Boot 中实现多数据源连接

键盘快捷键:提高工作效率与电脑操作的利器

键盘快捷键:提高工作效率与电脑操作的利器 在数字化时代,键盘快捷键成为了提高工作效率和优化电脑操作的重要工具。无论是日常办公、图像编辑、编程开发,还是游戏娱乐,掌握键盘快捷键都能带来极大的便利。本文将详细介绍键盘快捷键的概念、重要性、以及在不同应用场景中的具体应用。 什么是键盘快捷键? 键盘快捷键,也称为热键或快捷键,是指通过按下键盘上的一组键来完成特定命令或操作的方式。这些快捷键通常涉及同