首页 / 行业

鸿蒙版微信聊天UI效果实现！

2021-11-15 09:35:00

最近开发中要做一个类似微信聊天的工单系统客服中心界面（安卓版）所以想着也模仿一个鸿蒙版（基于 Java UI 的，JS UI 版本的后期更新哈）那么废话不多数说我们正式开始。

具体实现

mainabiilty 布局文件：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><DependentLayoutohos:id="$+id:company_page_dl"ohos:height="50vp"ohos:width="match_parent"ohos:orientation="horizontal"ohos:align_parent_bottom="true"><Buttonohos:id="$+id:main_my_btn"ohos:width="match_content"ohos:height="match_content"ohos:text="发送"ohos:text_size="35vp"ohos:align_parent_right="true"ohos:background_element="$graphic:background_btn">Button><TextFieldohos:id="$+id:main_textfiled"ohos:width="match_parent"ohos:height="match_parent"ohos:hint="请输入你的消息"ohos:vertical_center="true"ohos:text_size="50"ohos:left_of="$id:main_my_btn"ohos:layout_alignment="left">TextField>DependentLayout><ListContainerohos:above="$id:company_page_dl"ohos:id="$+id:main_list"ohos:height="match_parent"ohos:width="match_parent">ListContainer>DependentLayout>

观察布局文件，我们可以看到写了一个列表控件 ListContainer 来装载发送出去的消息和接收到的消息。

然后底部写了一个 TextField 控件来处理用户的输入和一个 button 来触发发送的动作。

逻辑代码

我们初始化对应控件并且 listContainer 和适配器绑定到一起：

privatevoidinitview(){listContainer=(ListContainer)findComponentById(ResourceTable.Id_main_list);textField=(TextField)findComponentById(ResourceTable.Id_main_textfiled);mainbtn=(Button)findComponentById(ResourceTable.Id_main_my_btn);mainbtn.setClickedListener(this);myProvider=newMyProvider(data,getAbility());listContainer.setItemProvider(myProvider);myProvider.notifyDataChanged();//有新消息时，刷新ListView中的显示}

①初始默认假数据

我们方便展示就写了 3 条假数据仅供展示：

privatevoidinitMsg(){Msgmsg1=newMsg("你好",Msg.RECEIVED);data.add(msg1);Msgmsg2=newMsg("你好呀",Msg.SENT);data.add(msg2);Msgmsg3=newMsg("很高兴认识你",Msg.RECEIVED);data.add(msg3);}

②用户输入逻辑：

@OverridepublicvoidonClick(Componentcomponent){content=textField.getText().toString();switch(component.getId()){caseResourceTable.Id_main_my_btn:if(!flag){Msgmsg=newMsg(content,Msg.SENT);data.add(msg);flag=true;}else{Msgmsg=newMsg(content,Msg.RECEIVED);data.add(msg);flag=false;}myProvider.notifyDataChanged();//有新消息时，刷新ListView中的显示textField.setText("");//清空输入框的内容break;default:break;}}

我们通过一个布尔值 flag 来做一个开关处理用户输入的，动作轮流来处理是接收到消息还是发送出消息。

发送消息：

Msgmsg=newMsg(content,Msg.SENT);data.add(msg);

接收消息：

Msgmsg=newMsg(content,Msg.RECEIVED);data.add(msg);

bena 类

packagecom.example.imdemo.bean;publicclassMsg{publicstaticfinalintRECEIVED=0;//收到一条消息publicstaticfinalintSENT=1;//发出一条消息privateStringcontent;//消息的内容privateinttype;//消息的类型publicMsg(Stringcontent,inttype){this.content=content;this.type=type;}publicStringgetContent(){returncontent;}publicintgetType(){returntype;}}

我们分别定义了 2 个常量和 2 个变量来处理我们的消息逻辑。

适配器

适配器 item.xml 布局：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_parent"ohos:orientation="vertical"><DirectionalLayoutohos:id="$+id:left_layout"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="left"ohos:background_element="$graphic:background_blue"ohos:left_margin="5vp"ohos:visibility="visible"ohos:top_margin="10vp"><Textohos:id="$+id:left_msg"ohos:height="match_content"ohos:width="match_content"ohos:text="哈哈哈测试"ohos:text_color="#fff"ohos:text_size="20vp"ohos:margin="10vp">Text>DirectionalLayout><DirectionalLayoutohos:id="$+id:right_Layout"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="right"ohos:background_element="$graphic:background_red"ohos:right_margin="5vp"ohos:visibility="visible"><Textohos:id="$+id:right_msg"ohos:height="match_content"ohos:width="match_content"ohos:text="哈哈哈测试"ohos:text_color="#fff"ohos:text_size="20vp"ohos:margin="10vp">Text>DirectionalLayout>DirectionalLayout>

item 布局预览效果：

适配器逻辑代码：

packagecom.example.imdemo.provider;importcom.example.imdemo.ResourceTable;importcom.example.imdemo.bean.Msg;importohos.aafwk.ability.Ability;importohos.agp.components.*;importjava.util.List;publicclassMyProviderextendsBaseItemProvider{privateListlist;privateAbilityability;publicMyProvider(Listlist,Abilityability){this.list=list;this.ability=ability;}@OverridepublicintgetCount(){returnlist.size();}@OverridepublicObjectgetItem(inti){returnlist.get(i);}@OverridepubliclonggetItemId(inti){returni;}@OverridepublicComponentgetComponent(inti,Componentcomponent,ComponentContainercomponentContainer){ViewHodlerhodler=null;Msgmsg=list.get(i);if(component==null){component=LayoutScatter.getInstance(ability).parse(ResourceTable.Layout_item,null,false);hodler=newViewHodler();hodler.leftLayout=(DirectionalLayout)component.findComponentById(ResourceTable.Id_left_layout);hodler.rightLayout=(DirectionalLayout)component.findComponentById(ResourceTable.Id_right_Layout);hodler.leftMsg=(Text)component.findComponentById(ResourceTable.Id_left_msg);hodler.rightMsg=(Text)component.findComponentById(ResourceTable.Id_right_msg);component.setTag(hodler);}else{hodler=(ViewHodler)component.getTag();}System.out.println("type--->"+msg.getType());if(msg.getType()==Msg.RECEIVED){System.out.println("左边消息");//如果是收到的消息，则显示左边消息布局，将右边消息布局隐藏hodler.leftLayout.setVisibility(0);hodler.rightLayout.setVisibility(1);hodler.leftMsg.setText(msg.getContent());}elseif(msg.getType()==Msg.SENT){System.out.println("右边消息");//如果是发出去的消息，显示右边布局的消息布局，将左边的消息布局隐藏hodler.rightLayout.setVisibility(0);hodler.leftLayout.setVisibility(1);hodler.rightMsg.setText(msg.getContent());}returncomponent;}classViewHodler{DirectionalLayoutleftLayout;DirectionalLayoutrightLayout;TextleftMsg;TextrightMsg;}}