HarmonyOS鸿蒙表情面板和软键盘任意切换（java）原创精华

Oisnull

发布于 2021-9-1 16:19

1.5w浏览

2收藏

首先来看效果图，源代码：emoji-panel

实现理论，其实只需要搞明白Component.LayoutRefreshedListener 这个接口的用法就行。

public interface LayoutRefreshedListener {
    void onRefreshed(Component var1);
}
1.
2.
3.

它的意思是，当屏幕上的布局发生变化时，这个接口就会被调用。
比如点击一个TextField，打开软键盘后，屏幕的可视区域变小了，这时也会触发布局变化的事件
所以我们可以用它来监听软键盘的状态，是打开还是关闭。

用第一个聊天界面来说明，具体理论实现可分为4个步骤：
1，监听键盘的状态，如果打开，则获取软键盘的高度
2，获取聊天界面的根布局的高度 - 键盘的高度 = 内容的高度
3，将内容的高度重新设置到相关的Component上
4，如果软键盘关闭后，则将相关的Component上的高度释放掉（设置为初始状态）

具体代码实现：
1，建基础类BasePanelLayout，实现Component.LayoutRefreshedListener接口中的如下函数（所有不同样式的EmojiPanel都继承它），用监听软键盘是否打开

@Override
public void onRefreshed(Component component) {
	Rect r = new Rect();
	getWindowVisibleRect(r);
	if (screenHeight <= 0) {
		// 记录初始屏幕可视区的高度
		screenHeight = r.bottom;
	}
	
	// 键盘弹出后，可视区会变小，这时就可以计算出（键盘的高度=初始屏幕的高度-屏幕变小后的可视区）
	currentKeyboradHeight = screenHeight - r.bottom;
	if (currentKeyboradHeight > 0) {
		//用局域变量记录键盘的状态，如果是打开的，就不需要再次调用
		if (isKeyboardOpen) return;

		setRootPanelHeight(currentKeyboradHeight);
		
		// 键盘弹出时调用
		stateListener.onBoardOpen(currentKeyboradHeight);
		isKeyboardOpen = true;
	} else {
		//根据键盘的状态去判断，如果是打开的，就去关闭，如果没有打开则忽略
		if (isKeyboardOpen) {
			isKeyboardOpen = false;
			// 键盘关闭时调用
			stateListener.onBoardClose();
		}
	}
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

2，计算ListContainer的高度，先看聊天界面的布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:dl_root"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:txt_title"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="$color:default_color"
        ohos:padding="10vp"
        ohos:text="Chat user messages"
        ohos:text_alignment="center"
        ohos:text_size="16fp"/>

    <ListContainer
        ohos:id="$+id:ic_messages"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"/>

    <com.hwl.emojipanel.panel.EmojiFullPanel
        ohos:id="$+id:ep_panel"
        ohos:height="match_content"
        ohos:width="match_parent"/>
</DirectionalLayout>
当EmojiFullPanel打开时，ListContainer高度应该为： int listContainerHeight = dl_root.getHeight() - txt_title.getHeight() - panelHeight;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

3，软键盘打开后，将计算出的高度设置到ListContainer布局上.

 DirectionalLayout.LayoutConfig config = (DirectionalLayout.LayoutConfig) listContainer.getLayoutConfig();
 config.height = listContainerHeight;
 config.weight = 0;
 listContainer.setLayoutConfig(config);
 listContainer.scrollTo(itemProvider.getCount());
1.
2.
3.
4.
5.

4，键盘关闭后，设置为初始时的配置

DirectionalLayout.LayoutConfig config = (DirectionalLayout.LayoutConfig) listContainer.getLayoutConfig();
config.height = 0;
config.weight = 1;
listContainer.setLayoutConfig(config);
listContainer.scrollTo(itemProvider.getCount());
1.
2.
3.
4.
5.