鴻蒙版微信聊天UI效果實(shí)現(xiàn)！

最近開發(fā)中要做一個(gè)類似微信聊天的工單系統(tǒng)客服中心界面（安卓版）所以想著也模仿一個(gè)鴻蒙版（基于 Java UI 的，JS UI 版本的后期更新哈） 那么廢話不多數(shù)說我們正式開始。

具體實(shí)現(xiàn)

<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="發(fā)送"
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="請(qǐng)輸入你的消息"
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>

邏輯代碼

我們初始化對(duì)應(yīng)控件并且 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();//有新消息時(shí)，刷新ListView中的顯示
}

我們方便展示就寫了 3 條假數(shù)據(jù)僅供展示：

privatevoidinitMsg(){
Msgmsg1=newMsg("你好",Msg.RECEIVED);
data.add(msg1);
Msgmsg2=newMsg("你好呀",Msg.SENT);
data.add(msg2);
Msgmsg3=newMsg("很高興認(rèn)識(shí)你",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();//有新消息時(shí)，刷新ListView中的顯示
textField.setText("");//清空輸入框的內(nèi)容
break;

default:
break;

}

}

發(fā)送消息：

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;//發(fā)出一條消息

privateStringcontent;//消息的內(nèi)容

privateinttype;//消息的類型

publicMsg(Stringcontent,inttype){
this.content=content;
this.type=type;
}

publicStringgetContent(){
returncontent;
}

publicintgetType(){
returntype;
}
}

適配器

適配器 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="哈哈哈測(cè)試"
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="哈哈哈測(cè)試"
ohos:text_color="#fff"
ohos:text_size="20vp"
ohos:margin="10vp"
>
Text>
DirectionalLayout>
DirectionalLayout>

item 布局預(yù)覽效果：

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("右邊消息");
//如果是發(fā)出去的消息，顯示右邊布局的消息布局，將左邊的消息布局隱藏
hodler.rightLayout.setVisibility(0);
hodler.leftLayout.setVisibility(1);
hodler.rightMsg.setText(msg.getContent());
}
returncomponent;
}

classViewHodler{
DirectionalLayoutleftLayout;
DirectionalLayoutrightLayout;
TextleftMsg;
TextrightMsg;

}
}

總結(jié)

項(xiàng)目地址：

https://gitee.com/qiuyu123/hms_im_demo