前言:

各位同學(xué)大家好，有點(diǎn)時(shí)間沒(méi)有給大家更新文章了具體多久痘昌。我也記不清楚了哈， 最近開(kāi)發(fā)中要做一個(gè)類似微信聊天的工單系統(tǒng)客服中心界面（安卓版）所以想著也模仿一個(gè)鴻蒙版（基于JAVA UI的,JSUI版本的后期更新哈） 那么廢話不多數(shù)說(shuō)我們正式開(kāi)始

準(zhǔn)備工作

華為鴻蒙系統(tǒng)開(kāi)發(fā)初體驗(yàn) ：[http://www.reibang.com/p/f94c847c7fdc]

效果圖

image.png

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

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="發(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>

布局預(yù)覽效果

image.png

我們觀察布局文件 我們可以看到我們寫了一個(gè)列表控件ListContainer 來(lái)裝載我們發(fā)送出去的消息和接收到的消息 然后底部我們寫了一個(gè) TextField 控件來(lái)處理用戶的輸入 和一個(gè)button來(lái)觸發(fā)發(fā)送的動(dòng)作

邏輯代碼

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

• 初始默認(rèn)假數(shù)據(jù)

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

     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("很高興認(rèn)識(shí)你",Msg.RECEIVED);
        data.add(msg3);
    }

• 用戶輸入邏輯

 @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();//有新消息時(shí)棚饵，刷新ListView中的顯示
                textField.setText("");//清空輸入框的內(nèi)容
                break;

            default:
                break;

        }

    }

我們通過(guò)一個(gè)布爾值flag來(lái)做一個(gè)開(kāi)關(guān)處理用戶輸入的 動(dòng)作輪流來(lái)處理是接收到消息還是發(fā)送出消息

• 發(fā)送消息

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

• 接收消息

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

bena類

package com.example.imdemo.bean;

public class Msg{

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

   public static final int SENT = 1;//發(fā)出一條消息

   private String  content;//消息的內(nèi)容

   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個(gè)常量和2個(gè)變量 來(lái)處理我們的消息邏輯

適配器

• 適配器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="哈哈哈測(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ù)覽效果

image.png

• 適配器邏輯代碼

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("右邊消息");
            //如果是發(fā)出去的消息噪漾，顯示右邊布局的消息布局，將左邊的消息布局隱藏
            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;

    }
}

我們通過(guò)在 getComponent 方法中通過(guò)小標(biāo)i來(lái)遍歷集合然后拿到里面每一個(gè)對(duì)應(yīng)里面的 type屬性來(lái)判斷是顯示左邊布局還是右邊布局 也就是對(duì)應(yīng)的發(fā)送消息和接收消息的UI 我們通過(guò)簡(jiǎn)單布局顯示影藏來(lái)實(shí)現(xiàn)消息的左右2邊顯示效果 到此整個(gè)仿微信聊天的布局UI效果就講完了 且蓬。

最后總結(jié)

鴻蒙的仿微信聊天UI效果 實(shí)現(xiàn)起來(lái)相對(duì)比較簡(jiǎn)單 其實(shí)還有一種辦法那就是 ListContainer的多布局也是通過(guò)bean來(lái)里面的標(biāo)識(shí)來(lái)顯示左右不同的布局來(lái)實(shí)現(xiàn)聊天界面的效果 因?yàn)槠邢捱@里就不展開(kāi)講了有興趣的同學(xué)可以私下研究 最后希望我的文章能幫助到各位解決問(wèn)題 欣硼，以后我還會(huì)貢獻(xiàn)更多有用的代碼分享給大家。各位同學(xué)如果覺(jué)得文章還不錯(cuò) 恶阴，麻煩給關(guān)注和star诈胜，小弟在這里謝過(guò)啦

項(xiàng)目地址：

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