鸿蒙仿微信聊天UI效果实现教程

团队介绍

作者：徐庆

团队：坚果派公众号："大前端之旅" 润开鸿生态技术专家，华为HDE，CSDN博客专家，CSDN超级个体，CSDN特邀嘉宾，InfoQ签约作者，OpenHarmony布道师，电子发烧友专家博客，51CTO博客专家，擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作

前言:

各位同学大家好，有点时间没有给大家更新文章了具体多久。我也记不清楚了哈，最近开发中要做一个类似微信聊天的工单系统客服中心界面（安卓版）所以想着也模仿一个鸿蒙版（基于JAVA UI的,JSUI版本的后期更新哈）那么废话不多数说我们正式开始

准备工作

华为鸿蒙系统开发初体验：[https://www.jianshu.com/p/f94c847c7fdc]

效果图

具体实现

mainabiilty布局文件

ini 复制代码

<?xml version="1.0" encoding="utf-8"?>
<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 和适配器绑定到一起

scss 复制代码

    private void initview() {
        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=new MyProvider(data,getAbility());
        listContainer.setItemProvider(myProvider);
        myProvider.notifyDataChanged();//有新消息时，刷新ListView中的显示
    }

初始默认假数据

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

ini 复制代码

     private void initMsg() {
        Msg msg1 = new Msg("你好",Msg.RECEIVED);
        data.add(msg1);
        Msg msg2 = new Msg("你好呀",Msg.SENT);
        data.add(msg2);
        Msg msg3 = new Msg("很高兴认识你",Msg.RECEIVED);
        data.add(msg3);
    }

用户输入逻辑

ini 复制代码

 @Override
    public void onClick(Component component) {
        content=textField.getText().toString();
        switch (component.getId()){
            case ResourceTable.Id_main_my_btn:
                if(!flag){
                    Msg msg = new Msg(content, Msg.SENT);
                    data.add(msg);
                    flag=true;
                }else {
                    Msg msg = new Msg(content, Msg.RECEIVED);
                    data.add(msg);
                    flag=false;
                }
                myProvider.notifyDataChanged();//有新消息时，刷新ListView中的显示
                textField.setText("");//清空输入框的内容
                break;

            default:
                break;

        }

    }

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

发送消息

ini 复制代码

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

接收消息

ini 复制代码

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

bena类

arduino 复制代码

package com.example.imdemo.bean;

public class Msg{

   public static final int RECEIVED = 0;//收到一条消息

   public static final int SENT = 1;//发出一条消息

   private String  content;//消息的内容

   private int type;//消息的类型

   public  Msg(String content,int type){
       this.content = content;
       this.type = type;
   }

   public String getContent(){
       return content;
   }

   public int getType(){
       return type;
   }
}

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

适配器

适配器item.xml布局

ini 复制代码

<?xml version="1.0" encoding="utf-8"?>
<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 布局预览效果

适配器逻辑代码

ini 复制代码

package com.example.imdemo.provider;
import com.example.imdemo.ResourceTable;
import com.example.imdemo.bean.Msg;
import ohos.aafwk.ability.Ability;
import ohos.agp.components.*;

import java.util.List;

public class MyProvider extends BaseItemProvider {

    private List<Msg> list;
    private Ability  ability;


    public MyProvider(List<Msg> list, Ability ability) {
        this.list = list;
        this.ability = ability;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int i) {
        return list.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {

        ViewHodler hodler=null;
        Msg msg = list.get(i);
        if (component== null) {
            component = LayoutScatter.getInstance(ability).parse(ResourceTable.Layout_item,null,false);
            hodler=new ViewHodler();
            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());
        }else if(msg.getType()==Msg.SENT){
            System.out.println("右边消息");
            //如果是发出去的消息，显示右边布局的消息布局，将左边的消息布局隐藏
            hodler.rightLayout.setVisibility(0);
            hodler.leftLayout.setVisibility(1);
            hodler.rightMsg.setText(msg.getContent());
        }
        return  component;
    }

    class ViewHodler{
        DirectionalLayout leftLayout;
        DirectionalLayout rightLayout;
        Text leftMsg;
        Text rightMsg;

    }
}

我们通过在 getComponent 方法中通过小标i来遍历集合然后拿到里面每一个对应里面的 type属性来判断是显示左边布局还是右边布局也就是对应的发送消息和接收消息的UI 我们通过简单布局显示影藏来实现消息的左右2边显示效果到此整个仿微信聊天的布局UI效果就讲完了。

最后总结

鸿蒙的仿微信聊天UI效果实现起来相对比较简单其实还有一种办法那就是 ListContainer的多布局也是通过bean来里面的标识来显示左右不同的布局来实现聊天界面的效果因为篇幅有限这里就不展开讲了有兴趣的同学可以私下研究最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里谢过啦

项目地址：

码云 gitee.com/qiuyu123/hm...

鸿蒙 仿微信聊天UI效果实现教程

团队介绍

作者：徐庆

前言:

准备工作

效果图

具体实现

布局预览效果

逻辑代码

初始默认假数据

用户输入逻辑

发送消息

接收消息

bena类

适配器

适配器item.xml布局

item 布局预览效果

适配器逻辑代码

最后总结

项目地址：

鸿蒙仿微信聊天UI效果实现教程