鸿蒙版微信聊天UI效果实现！-电子发烧友网

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

具体实现

mainabiilty 布局文件：


<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">

<DependentLayout
ohos:id="$+id:company_page_dl"
ohos:height="50vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true"
>

<Button
ohos: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>
<TextField
ohos: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>

<ListContainer
ohos: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);
}

②用户输入逻辑：

@Override
publicvoidonClick(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 布局：


<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos: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"
>

<Text
ohos: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>



<DirectionalLayout
ohos: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"
>
<Text
ohos: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;
}

@Override
publicintgetCount(){
returnlist.size();
}

@Override
publicObjectgetItem(inti){
returnlist.get(i);
}

@Override
publiclonggetItemId(inti){
returni;
}

@Override
publicComponentgetComponent(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;

}
}