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

Oisnull
发布于 2021-9-1 16:19
浏览
2收藏

首先来看效果图,源代码:emoji-panel
HarmonyOS鸿蒙表情面板和软键盘任意切换(java)-鸿蒙开发者社区

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

public interface LayoutRefreshedListener {
    void onRefreshed(Component var1);
}

它的意思是,当屏幕上的布局发生变化时,这个接口就会被调用。
比如点击一个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();
		}
	}
}

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;

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

 DirectionalLayout.LayoutConfig config = (DirectionalLayout.LayoutConfig) listContainer.getLayoutConfig();
 config.height = listContainerHeight;
 config.weight = 0;
 listContainer.setLayoutConfig(config);
 listContainer.scrollTo(itemProvider.getCount());

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

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

以上代码是结合聊天的界面进行说明的,需要先清楚界面的布局,然后去根据实际情况去做调整.

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
emoji-panel.zip 352.13K 34次下载
已于2021-9-6 16:32:14修改
5
收藏 2
回复
举报
回复
    相关推荐