#星光计划1.0# 鸿蒙仿微信聊天UI效果实现教程原创精华

xq9527

发布于 2021-11-9 17:54

浏览

4收藏

【本文正在参与51CTO HarmonyOS技术社区创作者激励-星光计划1.0】

前言:

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

准备工作

华为鸿蒙系统开发初体验：[https://harmonyos.51cto.com/posts/9190]

效果图

#星光计划1.0# 鸿蒙仿微信聊天UI效果实现教程-鸿蒙开发者社区

具体实现

mainabiilty布局文件

<?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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

布局预览效果
#星光计划1.0# 鸿蒙仿微信聊天UI效果实现教程-鸿蒙开发者社区
我们观察布局文件我们可以看到我们写了一个列表控件ListContainer 来装载我们发送出去的消息和接收到的消息然后底部我们写了一个 TextField 控件来处理用户的输入和一个button来触发发送的动作

逻辑代码

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

    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中的显示
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.

初始默认假数据

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

     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);
    }

1.
2.
3.
4.
5.
6.
7.
8.
9.

用户输入逻辑

 @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;

        }

    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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

发送消息

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

接收消息

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

bena类

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;
   }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

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

适配器

适配器item.xml布局

<?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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

item 布局预览效果
适配器逻辑代码

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;

    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

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

最后总结

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

项目地址：

码云 https://gitee.com/qiuyu123/hms_im_demo

分类

HarmonyOS

标签

鸿蒙

已于2021-12-2 16:41:17修改

2条回复

按时间正序

按时间倒序

Whyalone

样式稍微修饰一哈就完美鸟

2021-11-10 19:14:19

甜甜爱开发

不错，学习一下。一开始还以为是分布式数据库的应用呢

2021-11-11 16:51:25

51CTO

51CTO博客

51CTO学堂

#星光计划1.0# 鸿蒙仿微信聊天UI效果实现教程原创精华

前言:

准备工作

效果图

具体实现

逻辑代码

初始默认假数据

用户输入逻辑

发送消息

接收消息

bena类

适配器

适配器item.xml布局

item 布局预览效果

适配器逻辑代码

最后总结

项目地址：

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#星光计划1.0# 鸿蒙 仿微信聊天UI效果实现教程 原创 精华

前言:

准备工作

效果图

具体实现

逻辑代码

初始默认假数据

用户输入逻辑

发送消息

接收消息

bena类

适配器

适配器item.xml布局

item 布局预览效果

适配器逻辑代码

最后总结

项目地址：

目录

订阅鸿蒙技术特刊，精选内容抢先看

#星光计划1.0# 鸿蒙仿微信聊天UI效果实现教程原创精华