回复
HarmonyOS鸿蒙表情面板和软键盘任意切换(java) 原创 精华
Oisnull
发布于 2021-9-1 16:19
浏览
2收藏
首先来看效果图,源代码:emoji-panel
实现理论,其实只需要搞明白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 38次下载
已于2021-9-6 16:32:14修改
赞
5
收藏 2
回复
相关推荐