在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙版微信聊天UI效果實現!

OpenHarmony技術社區 ? 來源:鴻蒙技術社區 ? 作者:鴻蒙技術社區 ? 2021-11-15 09:35 ? 次閱讀

最近開發中要做一個類似微信聊天的工單系統客服中心界面(安卓版)所以想著也模仿一個鴻蒙版(基于 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 布局預覽效果:

19f2e066-458d-11ec-b939-dac502259ad0.png適配器邏輯代碼:
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;

}
}
我們通過在 getComponent 方法中通過小標 i 來遍歷集合然后拿到里面每一個對應里面的 type 屬性來判斷是顯示左邊布局還是右邊布局。 也就是對應的發送消息和接收消息的 UI,我們通過簡單布局顯示影藏來實現消息的左右兩邊顯示效果,到此整個仿微信聊天的布局 UI 效果就講完了 。

總結

鴻蒙的仿微信聊天 UI 效果實現起來相對比較簡單,其實還有一種辦法那就是 ListContainer 的多布局也是通過 bean 里面的標識來顯示左右不同的布局實現聊天界面的效果。

因為篇幅有限這里就不展開講了有興趣的同學可以私下研究。最后希望我的文章能幫助到各位解決問題,以后我還會貢獻更多有用的代碼分享給大家。

項目地址:

https://gitee.com/qiuyu123/hms_im_demo
編輯:jq

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • JAVA
    +關注

    關注

    20

    文章

    2984

    瀏覽量

    106880
  • JS
    JS
    +關注

    關注

    0

    文章

    78

    瀏覽量

    18397
  • ui
    ui
    +關注

    關注

    0

    文章

    206

    瀏覽量

    21682
  • 鴻蒙
    +關注

    關注

    59

    文章

    2525

    瀏覽量

    43777

原文標題:鴻蒙版微信聊天UI效果實現!

文章出處:【微信號:gh_834c4b3d87fe,微信公眾號:OpenHarmony技術社區】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦
    熱點推薦

    Kuikly鴻蒙版正式開源 —— 揭秘卓越性能適配之旅

    的 ArkUI 來編寫的,UI組件由數據和UI描述組成,UI更新只能通過修改其綁定的數據來實現。渲染層怎樣驅動聲明式的ArkUI成為了鴻蒙
    發表于 06-04 16:46

    國科受邀出席2025開源鴻蒙開發者大會

    近日,開源鴻蒙開發者大會2025在深圳舉行,開源鴻蒙5.1 Release版本正式發布。作為開源鴻蒙生態核心建設力量,國科受邀出席開源鴻蒙
    的頭像 發表于 05-29 11:28 ?359次閱讀

    鴻蒙電腦將于5月8日正式亮相 華為將在深圳召開鴻蒙電腦技術與生態溝通會

    。 分布式互聯實現跨設備秒傳文件、鴻蒙PC可與手機、平板、智慧屏等設備無縫協同; 內置盤古大模型,支持AI輔助辦公;AI辦公一鍵生成PPT這些都不在話下; UI設計媲美macOS、 搭載自研鯤鵬芯片、 續航達12小時。 業界人士
    的頭像 發表于 05-07 16:17 ?881次閱讀

    RV1126 實現簡單的UI開發示例

    在RV1126上實現簡單的UI開發實例
    的頭像 發表于 04-09 16:08 ?284次閱讀
    RV1126 <b class='flag-5'>實現</b>簡單的<b class='flag-5'>UI</b>開發示例

    第二篇 RA8889 實現酷炫車載液晶儀表系列視頻: UI類界面介紹

    本系列文章介紹 RA8889 實現液晶儀表HMI UI界面,分為兩大部分來介紹,本期介紹如何制作UI類界面,其中包括使用PS軟件制作靜態類UI界面,Ae軟件制作動態類的
    的頭像 發表于 02-25 15:27 ?370次閱讀
    第二篇 RA8889 <b class='flag-5'>實現</b>酷炫車載液晶儀表系列視頻: <b class='flag-5'>UI</b>類界面介紹

    HarmonyOS NEXT 原生應用開發:社交聊天對話過程實現

    一、實現思路 本DEMO旨在展示如何在HarmonyOS NEXT平臺上,利用ArkTS開發語言構建一個簡易的社交聊天對話界面。用戶可以在此界面上查看聊天記錄,并發送新的消息。此示例中,聊天
    發表于 01-07 10:55

    鴻蒙更新:修復用戶備注可見隱私漏洞

    近日,部分使用鴻蒙NEXT版本1.0.2.33的用戶在社交媒體上反饋了一個涉及個人隱私的問題。據用戶描述,當他們在手機端引用對方的消息時,如果對方在同一會話中切換到電腦端查看,竟能看到用戶為該
    的頭像 發表于 12-05 11:25 ?939次閱讀

    自動化創建UI并解析數據

    Labview實現動態增加控件效果 - *附件:32960_auto.rar 備注:Main.vi是ui自動化2.1.vi,配置文件為32960.B.ini。 目前可以實現根據配置文件
    發表于 11-29 11:26

    鴻蒙系統專用版信內測即將啟動

    近日,有知情人士稱鴻蒙系統專用版的開發工作現已基本完成。這一消息標志著在適配鴻蒙系統方面
    的頭像 發表于 11-07 10:58 ?1307次閱讀

    Linux4.0.0版發布,功能再升級

    近日,備受矚目的Linux4.0.0版本終于迎來了正式發布。此次版本更新不僅帶來了多項實用功能,還實現了與Windows、macOS公測版本的功能一致和更新同步,為用戶帶來了更加便捷
    的頭像 發表于 11-06 10:59 ?692次閱讀

    名單公布!【書籍評測活動NO.47】HarmonyOS NEXT啟程:零基礎構建純血鴻蒙應用

    本期評測名單如下 趙龍、華為開發者論壇 、鄧文權、iwpgk、夜孤影 請以上幾位大佬聯系工作人員(:elecfans123)領取書籍進行評測,如在5個工作日內未聯系,視為放棄本次試用評測資格
    發表于 10-14 14:36

    基于鴻蒙Next模擬掃圖識物的一個過程

    一、功能介紹(基礎) 基于鴻蒙Next模擬掃圖識物的一個過程,掃描到圖片,提示出相關的圖片內容,是一個什么東西。 二、使用場景(大類) 支付、社交、信息獲取、在線調查、教育學習等等。 三、實現步驟
    發表于 08-21 15:04

    VA段碼COG液晶屏可個性化靈活設計UI實現創意UI的高對比高亮多色彩炫酷顯示。

    VA段碼COG液晶屏可個性化靈活設計UI實現創意UI的高對比高亮多色彩炫酷顯示。
    的頭像 發表于 07-11 10:50 ?1023次閱讀
    VA段碼COG液晶屏可個性化靈活設計<b class='flag-5'>UI</b>,<b class='flag-5'>實現</b>創意<b class='flag-5'>UI</b>的高對比高亮多色彩炫酷顯示。

    國科旗艦芯片獲頒鴻蒙生態產品兼容性證書

    ? 7月9日,國科宣布旗下超高清視頻解碼及商顯芯片通過OpenHarmony4.0版本兼容性測評,獲頒鴻蒙生態產品兼容性證書。其中,國科GK6323V100C是業界首款通過鴻蒙4.
    的頭像 發表于 07-10 16:37 ?1698次閱讀

    深耕鴻蒙生態,國科旗艦芯片獲“鴻蒙4.0”首款認證

    7月9日,國科宣布旗下超高清視頻解碼及商顯芯片通過OpenHarmony4.0版本兼容性測評,獲頒鴻蒙生態產品兼容性證書。其中,國科GK6323V100C是業界首款通過鴻蒙4.0兼
    的頭像 發表于 07-10 13:10 ?741次閱讀
    深耕<b class='flag-5'>鴻蒙</b>生態,國科<b class='flag-5'>微</b>旗艦芯片獲“<b class='flag-5'>鴻蒙</b>4.0”首款認證
    主站蜘蛛池模板: 一级特黄特黄的大片免费 | 日韩精品系列产品 | 天天爱天天做天天干 | 特黄特黄 | 精品久久香蕉国产线看观看亚洲 | 欧美深夜福利 | 国产爱搞 | 亚洲第成色999久久网站 | 天天艹天天操 | 国产看午夜精品理论片 | 在线最新版www资源网 | ts 人妖 另类 在线 | 22222se男人的天堂 | 天天操天天干天天射 | 手机看片日本 | 网全大全黄 | 天天爱天天做色综合 | 色婷婷六月 | 久久国产精品免费网站 | 天天爱综合 | 国产色婷婷精品免费视频 | 手机看片久久青草福利盒子 | 国产色婷婷精品免费视频 | 日本三级免费网站 | 欧美成人精品福利网站 | 看片在线 | 国产精品久久久久久免费播放 | japanese日本护士xx亚洲 | 在线免费观看91 | 直接看的黄色网址 | 天天拍夜夜添久久精品免费 | 狠狠色 综合色区 | 国产高清片 | 天堂成人在线观看 | 国产三级中文字幕 | 免费看性 | 被啪漫画羞羞漫画 | 一级毛毛片毛片毛片毛片在线看 | 色香影院| 日韩一级片免费观看 | 男女互插小说 |