防苹果微信聊天页面，聊天中的布局不是，主要是键盘部分，键盘部分在做的过程中遇到了几个坑，记录一下，看看大家有没有越到过
分析ios微信聊天页面
UI组成看起来比较简单，但是包含的内容可真不少，首先语音、输入框、表情、更多四个简单元素，元素间存在互斥的一些状态操作，比如语音时，显示按住说话，键盘关闭，表情面板时面板关闭，面板关闭则联动表情和EditText图标的切换。
各状态分析
- 语音状态
语音状态时，语音与edit图标切换，EditText 与按住说话UI切换，此时如果键盘处于编辑状态，则收回键盘，此时键盘处于表情面板或者更多面板需要收回面板，若表情面板时，表情与edit图位置恢复表情icon。
- 键盘状态
点击语音与edit图标 位置时，icon 为语音标，键盘弹出，当前再表情面板时，点击表情与edit图标， 键盘弹出，icon 变换
- 表情状态
注意语音与edit图标 位置恢复即可
- 更多面板
注意语音与edit图标，表情与edit图标位置恢复
对于这四种状态直接使用LiveData, 然后与点击事件做出绑定，事件发生时处理对应状态即可
键盘UI组成
所以可以将结构设置为：
<LinearLayout
android:id="@+id/cl_voiceRoom_inputRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:visibility="visible">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/imEditBgCL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/im_chat_bottom_bg"
android:minHeight="60dp">
// 键盘顶部，表情输入框等
</androidx.constraintlayout.widget.ConstraintLayout>
// 指定面板占位
<androidx.fragment.app.FragmentContainerView
android:id="@+id/imMiddlewareVP"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#F0EFEF"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="@id/imEditBgCL"
tools:visibility="visible"
/>
</LinearLayout>
复制代码然后对应上述的状态进行UI和键盘的操作
键盘逻辑处理
- EditText 自动换行输入并将action设置为send 按钮
这一步很简单，但是有一个坑，按照正常逻辑，再xml中的EditText 设置以下属性，即可完成这个需求
android:imeOptions="actionSend"
android:inputType="textMultiLine"
复制代码按照属性的原义，这样将显示正常的发送按钮以及可自动多行输入，但是就是不显示发送，查资料发现imeOptions 需要使inputType 为text 时才显示，但是又实现不了我们的需求，最后处理方式
android:imeOptions="actionSend"
android:inputType="text"
//然后在代码中进行如下设置：
binding.imMiddlewareET.run {
imeOptions = EditorInfo.IME_ACTION_SEND
setHorizontallyScrolling(false)
maxLines = Int.MAX_VALUE
}
复制代码- 按照上面的状态互斥，我们需要动态监听软键盘的打开和关闭
系统没有提供对应的实现，所以我们才采取的办法是，监听软键盘的高度变化
View rootView = getWindow().getDecorView().getRootView();
rootView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
Rect rect = new Rect();
rootView.getWindowVisibleDisplayFrame(rect);
int heightDiff = rootView.getHeight() - rect.bottom;
boolean isSoftKeyboardOpened = heightDiff > 0;
// 处理软键盘打开或关闭的逻辑
}
});
复制代码通过判断高度来推算键盘的打开或者关闭
解决切换键盘问题
切换键盘时，比如表情和Edit 切换
-
当面板是键盘时，点击图标区域
- 取消Edit焦点
- 关闭键盘
- 打开emoji面板
-
当面板是emoji时
- 隐藏面板
- 设置获取焦点
- 打开键盘 其他场景下切换没什么问题，但是当键盘和自定义面板切换时有可能出现这样的问题：
因为键盘的关闭和View的显示，或者View的隐藏和键盘的显示那个先执行完毕逻辑不能串行，导致会出现这种闪烁的画面
解决方案：
分析上述问题后会发现，导致的出现这种情况的原因就是逻辑不能串行，那我们保证二者的逻辑串行就不会出现这问题了，怎么保证呢？
首先要知道的是肯定不能让View先行，View先行一样会出现这个问题，所以要保证让键盘先行，我们看一下，键盘的打开和关闭：
// 显示键盘
private fun showSoftKeyBoard(view: View) {
val imm = mContext.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager?
imm?.showSoftInput(view, InputMethodManager.SHOW_FORCED)
}
// 隐藏键盘
private fun hideSoftKeyBoard(view: View) {
val imm = mContext.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager?
if (imm != null && imm.isActive) {
imm.hideSoftInputFromWindow(view.windowToken, 0)
}
}
复制代码这个代码对于键盘的显示隐藏是没有任何问题的，但是我们怎么判断它执行这个动作完毕了呢？
方法一：
上面我们有这样的操作，监听了键盘高度的监听，我们可以在执行切换操作时启动一个线程的死循环，然后再循环中判断高度，满足高度时执行上述逻辑。
方法二：
看下InputMethodManager 的源码，发现：
/**
* Synonym for {@link #hideSoftInputFromWindow(IBinder, int, **ResultReceiver**)}
* without a result: request to hide the soft input window from the
* context of the window that is currently accepting input.
*
* @param windowToken The token of the window that is making the request,
* as returned by {@link View#getWindowToken() View.getWindowToken()}.
* @param flags Provides additional operating flags. Currently may be
* 0 or have the {@link #HIDE_IMPLICIT_ONLY} bit set.
*/
public boolean hideSoftInputFromWindow(IBinder windowToken, int flags) {
return hideSoftInputFromWindow(windowToken, flags, null);
}
复制代码是不是很神奇，这个隐藏方法有一个ResultReceiver 的回调，卧槽，是不是看这个名字就感觉有戏，具体看一下：
public boolean hideSoftInputFromWindow(IBinder windowToken, int flags,
ResultReceiver resultReceiver) {
return hideSoftInputFromWindow(windowToken, flags, resultReceiver,
SoftInputShowHideReason.HIDE_SOFT_INPUT);
}
复制代码ResultReceiver 是一个用于在异步操作完成时接收结果的类，它可以让你在不同的线程之间进行通信。在 hideSoftInputFromWindow() 方法中，ResultReceiver 作为一个可选参数，用于指定当软键盘隐藏完成时的回调。该回调会在后台线程上执行，因此不会阻塞主线程，从而提高应用程序的响应性能。
ResultReceiver 类有一个 onReceiveResult(int resultCode, Bundle resultData) 方法，当异步操作完成时，该方法会被调用。通过实现该方法，你可以自定义处理异步操作完成后的行为。例如，在软键盘隐藏完成后，你可能需要执行一些操作，例如更新 UI 或者执行其他任务。
在 hideSoftInputFromWindow()方法中，你可以通过传递一个 ResultReceiver 对象来指定异步操作完成后的回调。当软键盘隐藏完成时，系统会调用ResultReceiver对象的send()方法，并将结果代码和数据包装在 Bundle对象中传递给 ResultReceiver对象。然后，ResultReceiver 对象的 onReceiveResult() 方法会在后台线程上执行，以便你可以在该方法中处理结果。
然后看了showSoftInput 也同样有这个参数
public boolean showSoftInput(View view, int flags, ResultReceiver resultReceiver) {
return showSoftInput(view, flags, resultReceiver, SoftInputShowHideReason.SHOW_SOFT_INPUT);
}
复制代码那我们可以这样解决：
隐藏为例： 当我执行切换时，首先调用hideSoftInputFromWindow， 并创建ResultReceiver监听，当返回结果后，执行View的操作，保证他们的串行，以此解决切换键盘闪烁问题。
private fun hideSoftKeyBoard(view: View, callback: () -> Unit) {
val imm = mActivity.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager?
if (imm != null && imm.isActive) {
val resultReceiver = object : ResultReceiver(Handler(Looper.getMainLooper())) {
override fun onReceiveResult(resultCode: Int, resultData: Bundle?) {
super.onReceiveResult(resultCode, resultData)
// 在这里处理软键盘隐藏完成后的逻辑
callback.invoke()
//...
}
}
imm.hideSoftInputFromWindow(view.windowToken, 0, resultReceiver)
}
}
复制代码Emoji 显示
在 Android 中，Emoji 表情可以通过以下方式在字符串中表示：
- Unicode 编码：Emoji 表情的 Unicode 编码可以直接嵌入到字符串中，例如
"\u2764\ufe0f"表示一个红色的心形 Emoji。其中，\u是 Unicode 转义字符，后面跟着 4 个十六进制数表示该字符的 Unicode 编码。 - Unicode 代码点：Unicode 代码点是 Unicode 编码的十进制表示，可以使用
&#后跟代码点数字和分号;来表示 Emoji，例如😀表示一个笑脸 Emoji。在 XML 中，可以使用&#x后跟代码点的十六进制表示来表示 Emoji，例如😀表示一个笑脸 Emoji。 - Emoji 表情符号：在 Android 4.4 及以上版本中，可以直接使用 Emoji 表情符号来表示 Emoji，例如
😊表示一个微笑的 Emoji。在 Android 4.3 及以下版本中，需要使用第一种或第二种方式来表示 Emoji。
我在此demo中使用第一种实现的，具体使用步骤：
- UI布局
- 数据
- unicode.org/Public/emoj… 下载表情内容
- 解析表情数据， 多个十六进制的我没写，
flow {
val pattern = Regex("^(\S+)\s+;\s+fully-qualified\s+#\s+((?:\S+\s+)+)(.+)$")
val filterNotNull = readAssetsFile("emoji.txt", IMApplication.context)
.trim()
.lines()
.map { line ->
val matchResult = pattern.find(line)
if (matchResult != null) {
val (emoji, codePointHex, comment) = matchResult.destructured
val codePoint = emoji.drop(2).toInt(16)
EmojiEntry(emoji, codePoint, "E${emoji.take(2)}", comment,codePointHex)
} else {
null
}
}.filterNotNull()
emit(filterNotNull)
}
复制代码使用
- 使用google 提供的emoji库
implementation 'androidx.emoji:emoji:1.1.0'
复制代码- 在Application中初始化
val fontRequest = FontRequest(
"com.google.android.gms.fonts",
"com.google.android.gms",
"Montserrat Subrayada",
R.array.com_google_android_gms_fonts_certs
)
val config = FontRequestEmojiCompatConfig(this, fontRequest)
EmojiCompat.init(config)
复制代码对于FontRequest 是使用的Goolge 提供的可下载字体配置进行初始化的，当然可以不用，但是系统的字体对于表情不是高亮的，看起来是灰色的（也可以给TextView 设置字体解决）
通过 Android Studio 和 Google Play 服务使用可下载字体
- 在 Layout Editor 中，选择一个 TextView，然后在 Properties 下，选择 fontFamily > More Fonts。
- 在 Source 下拉列表中，选择 Google Fonts。
- 在 Fonts 框中，选择一种字体。
- 选择 Create downloadable font，然后点击 OK
然后会在项目的res 下生成文字
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
app:fontProviderAuthority="com.google.android.gms.fonts"
app:fontProviderPackage="com.google.android.gms"
app:fontProviderQuery="Montserrat Subrayada"
app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
</font-family>
复制代码Emoji 面板中的删除操作
再IOS微信中，点击Emoji面板后输入框是没有焦点的，然后点击删除时Emoji会有一个问题，因为它的大小是2个byte,所以常规删除是不行的，
expressionDeleteFL.setOnClickListener {
val inputConnection =
editText.onCreateInputConnection(
EditorInfo()
)
// 找到要删除的字符的边界
val text = editText.text.toString()
val index = editText.selectionStart
var deleteLength = 1
if (index > 0 && index <= text.length) {
val codePoint = text.codePointBefore(index)
deleteLength = if (Character.isSupplementaryCodePoint(codePoint)) 2 else 1
}
inputConnection.deleteSurroundingText(deleteLength, 0)
}
复制代码- 首先，通过 editText.onCreateInputConnection(EditorInfo()) 方法获取输入连接器（InputConnection），它可以用于向 EditText 发送文本和控制命令。在这里，我们使用它来删除文本。
- 接着，获取 EditText 中当前的文本，并找到要删除的字符的边界。通过 editText.selectionStart方法获取当前文本的光标位置，然后使用 text.codePointBefore(index)方法获取光标位置前面一个字符的 Unicode 编码点。如果该字符是一个 Unicode 表情符号，它可能由多个 Unicode 编码点组成，因此需要使用 Character.isSupplementaryCodePoint(codePoint) 方法来判断该字符是否需要删除多个编码点。
- 最后，使用 inputConnection.deleteSurroundingText(deleteLength, 0)方法删除要删除的字符。其中，deleteLength 是要删除的字符数，0 表示没有要插入的新文本。
主要的技术点在于“text.codePointBefore(index)方法获取光标位置前面一个字符的 Unicode 编码点，然后向前探测，找到字符边界” 以此完成删除操作
打开面板时 RV布局的处理
这个就比较简单了
- 首先，通过 root.viewTreeObserver.addOnGlobalLayoutListener 方法添加一个全局布局监听器，该监听器可以监听整个布局树的变化，包括软键盘的弹出和隐藏。
- 在监听器的回调函数中，通过 root.getWindowVisibleDisplayFrame(r) 方法获取当前窗口的可见区域（不包括软键盘），并通过 root.rootView.height 方法获取整个布局树的高度，从而计算出软键盘的高度 keypadHeight。
- 接着，通过计算屏幕高度的 15% 来判断软键盘是否弹出。如果软键盘高度超过了屏幕高度的 15%，则认为软键盘已经弹出。
- 如果软键盘已经弹出，则通过 imMiddlewareRV.scrollToPosition(mAdapter.getItemCount() - 1) 方法将 RecyclerView滚动到最后一条消息的位置，以确保用户始终能看到最新的消息
root.viewTreeObserver.addOnGlobalLayoutListener {
val r = Rect()
root.getWindowVisibleDisplayFrame(r)
val screenHeight = root.rootView.height
val keypadHeight = screenHeight - r.bottom
//键盘是否弹出
val diff = screenHeight * 0.15
if (keypadHeight > diff) { // 15% of the screen height
imMiddlewareRV.scrollToPosition(mAdapter.getItemCount() - 1);
}
}
复制代码总结
仿照微信聊天键盘的方法，实现了一个包含表情等功能的键盘区域，并解决了一些常见的问题。通过实践和调查，解决了切换键盘的问题，并实现了Emoji的Unicode显示和自定义删除时向前探索字符边界完成表情删除等操作。在过程中，以为很简单的一个东西花了大量的时间调查原因，发现键盘这一块水很深，当我看到ResultReceiver时，看到了AIDL通信，所以再Android这个体系中，Binder的机制需要了然于胸的，刚好我最近在学习Binder得各种知识，不久后会发布对应的博客，关注我，哈哈。
此系列属于我的一个 《Android IM即时通信多进程中间件设计与实现》 系列的一部分，可以看看这个系列
作者：麦客奥德彪
链接：https://juejin.cn/post/7215416975605628987
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
扫一扫
3279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
