Android——(仿微信聊天界面布局实例)

            今天看郭霖《第一行代码》书上写了一个聊天窗体的小例子,自己就练习学了一下。加上一些自己的理解整理了一下。

        1.第一步首先是制作9.patch图片,这个在android  sdk 目录下tools文件,找到draw9patch.bat文件双击打开。这是一个专门用来处理安卓里面图像的小工具,你可以对图片指定拉伸的效果,具体教程可以百度,很简单的。

          2.编写主界面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#d8e0e8" android:orientation="vertical"><ListView android:id="@+id/msg_list_view"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:divider="#0000"></ListView><LinearLayout android:layout_width="match_parent"android:layout_height="wrap_content"><EditText android:id="@+id/input_text"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:hint="Typ something in here"android:maxLines="2"/><Button android:id="@+id/send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="send"/></LinearLayout>
</LinearLayout>
主界面里我们可以看到有一个ListView用于加载信息,线性布局进行嵌套,里层里有一个编辑框和一个按钮。下图就是布局初步效果图:

3.编写ListView子项布局,新建一个布局文件

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" android:padding="10dp"><LinearLayout android:id="@+id/left_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:background="@drawable/message_left"><TextView android:id="@+id/left_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:layout_margin="10dp"android:textColor="#fff"/></LinearLayout><LinearLayout android:id="@+id/right_Layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:background="@drawable/message_right"><TextView android:id="@+id/right_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"/> </LinearLayout>
</LinearLayout></span>
       这里最外层是线性布局,里边嵌套两个线性布局。这两个布局分别是给消息发送界面和消息接收界面。后面可以通过设置布局的显示和隐藏属性来显示我们需要的消息。这和我之前学贪吃蛇的布局挺像的,就像把一开始的游戏前出现界面和游戏的场景界面设置在一个布局文件很相似。这也是最近学习布局收获的一点,光学课本上的单个布局的特点没有应用到实际的应用里边,很难自己想象原来布局可以这样灵活。

效果图如下:

3.完成MainActivity.java,写好布局文件以后开始写代码,这里需要大概写的几点是:

1.定义消息类的实体类Msg

public class Msg{  }

里面需要设置消息的类型:发送,接收,内容。

2.ListView适配器的建立

首先它需要继承ArrayAdapter,将泛型指定为Msg类。

这里运用到了很多书上说的ListView的优化,通过if_else判断,如果convertView为空就重新初始化加载布局,这时就需要加载很多东西,如果convertView不为空时,说明它之前有缓存,可以重用,那我们直接调用它,就大大提高了运行的效率。

还有通过创建ViewHolder这个内部类,可以对控件的实例进行缓存。当convertView为空时。将控件的实例存在ViewHolder里,调用setTag()方法,将ViewHolder对象存储在View里。当ViewHolder不为空时,调用View的setTag()方法,重新取出ViewHolder。这样就不用每次调用findViewById()方法获取控件。

3.收发消息布局的隐藏和显示

通过判断消息的类型,进行设置显示和隐藏消息。

if(msg.getType()==Msg.RECEIVED){
                //如果是收到的消息,则显示左边消息布局,将右边消息布局隐藏
                viewHolder.leftLayout.setVisibility(View.VISIBLE);
                viewHolder.rightLayout.setVisibility(View.GONE);
                viewHolder.leftMsg.setText(msg.getContent());
            }else if(msg.getType()==Msg.SENT){
                //如果是发出去的消息,显示右边布局的消息布局,将左边的消息布局隐藏
                viewHolder.rightLayout.setVisibility(View.VISIBLE);
                viewHolder.leftLayout.setVisibility(View.GONE);
                viewHolder.rightMsg.setText(msg.getContent());
            }

4.初始化消息initMsg()

写几条消息测试一下首发消息是否正确。

5.给按钮send设置监听器事件

这里用到的是send.setOnClickListener(new OnClickListener(){   },这一看就是匿名内部类的方式。


这里只是大体说了一下编写的大概内容,具体的可以看下面源代码:

package com.example.chat_layout;import java.util.ArrayList;
import java.util.List;import android.R.string;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Adapter;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;public class MainActivity extends Activity {private ListView msgListView;private EditText inputText;private Button send;private MsgAdapter adapter;private List<Msg> msgList = new ArrayList<Msg>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);//设置窗口没有标题栏setContentView(R.layout.activity_main);initMsg();adapter = new MsgAdapter(MainActivity.this, R.layout.msg_item, msgList);inputText = (EditText) findViewById(R.id.input_text);send = (Button) findViewById(R.id.send);msgListView = (ListView) findViewById(R.id.msg_list_view);msgListView.setAdapter(adapter);send.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v) {String content = inputText.getText().toString();if(!"".equals(content)){Msg msg = new Msg(content, Msg.SENT);msgList.add(msg);adapter.notifyDataSetChanged();//有新消息时,刷新ListView中的显示msgListView.setSelection(msgList.size());//将ListView定位到最后一行inputText.setText("");//清空输入框的内容}}});}private void initMsg() {Msg msg1 = new Msg("I miss you!",Msg.RECEIVED);msgList.add(msg1);Msg msg2 = new Msg("I miss you,too!",Msg.SENT);msgList.add(msg2);Msg msg3 = new Msg("I will come back soon!",Msg.RECEIVED);msgList.add(msg3);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}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;}}public class MsgAdapter extends ArrayAdapter<Msg>{private int resourceId;public MsgAdapter(Context context, int textViewresourceId, List<Msg> objects) {super(context, textViewresourceId, objects);resourceId = textViewresourceId;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {Msg msg = getItem(position);View view;ViewHolder viewHolder;if(convertView == null){view = LayoutInflater.from(getContext()).inflate(resourceId, null);viewHolder = new ViewHolder();viewHolder.leftLayout = (LinearLayout)view.findViewById(R.id.left_layout);viewHolder.rightLayout = (LinearLayout)view.findViewById(R.id.right_Layout);viewHolder.leftMsg = (TextView)view.findViewById(R.id.left_msg);viewHolder.rightMsg = (TextView)view.findViewById(R.id.right_msg);view.setTag(viewHolder);}else{view = convertView;viewHolder = (ViewHolder) view.getTag();}if(msg.getType()==Msg.RECEIVED){//如果是收到的消息,则显示左边消息布局,将右边消息布局隐藏viewHolder.leftLayout.setVisibility(View.VISIBLE);viewHolder.rightLayout.setVisibility(View.GONE);viewHolder.leftMsg.setText(msg.getContent());}else if(msg.getType()==Msg.SENT){//如果是发出去的消息,显示右边布局的消息布局,将左边的消息布局隐藏viewHolder.rightLayout.setVisibility(View.VISIBLE);viewHolder.leftLayout.setVisibility(View.GONE);viewHolder.rightMsg.setText(msg.getContent());}return view;}class ViewHolder{LinearLayout leftLayout;LinearLayout rightLayout;TextView leftMsg;TextView rightMsg;}}}
            最后效果图:可以看到除了程序中初始化的3条消息,ok这是通过底下编辑器输入的,看一看到实现了聊天对话框的基本内容和要求。




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/59546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android MPAndroidChart超漂亮图表框架

Android MPAndroidChart超漂亮图表框架 简介配置示例总结 Blog如有不对&#xff0c;敬请斧正 喜欢Android的可以关注我&#xff0c;日常更新Android干货简介 MPAndroidChart是GitHub中大名鼎鼎的一个开源框架&#xff0c;可以快速制作开发中需要的图表&#xff0c;如:折线图、…

【安卓基础】03 实现简单聊天界面

编写一个简单的聊天界面&#xff0c;例子来自《第一行代码》。 1. 编写主界面 聊天界面使用 RecyclerView&#xff0c;简单来说是谷歌新增的控件&#xff0c;与 ListView 类似&#xff0c;但是功能更加强大。比如 ListView 只能纵向华东&#xff0c;但是 RecyclerView 可以设…

安卓 类微信界面实现

目录 1.引言 2.实现 1.写出顶部和底部的layout 2.主页面 3.写四个fragment用于显示不同的内容 4.写MainActivity中的代码 3.总结 1.引言 这是我第一次接触安卓的开发&#xff0c;因为之前学过c#和java&#xff0c;感觉使用AS开发就像使用java在写winform&#xff0c;同样…

安卓开发之设计微信界面

一、功能需求 完成一个类似微信页面的布局&#xff0c;要求&#xff1a; 页面最上方是标题居中页面中间界面显示内容&#xff0c;内容随下方栏的选择而切换页面最下方有四个按钮点击按钮后&#xff0c;按钮图标会变换颜色&#xff0c;且显示框变换内容 项目大致框架如下&…

干货!几招教你降低论文重复率!!

相信大家已经开始为毕业论文奋战了&#xff0c;甚至有的学校已经答辩结束了。今天&#xff0c;小编就说说史上最奇葩智能系统——知网论文检测系统&#xff0c;并且告诉大家躲避查重的几个大招。 各个学校对所谓论文原创度的标准要求不同&#xff0c;碰到要求重复率在30%或20%以…

最简单的 6 种防止数据重复提交的方法!(干货)

有位朋友&#xff0c;某天突然问磊哥&#xff1a;在 Java 中&#xff0c;防止重复提交最简单的方案是什么&#xff1f; 这句话中包含了两个关键信息&#xff0c;第一&#xff1a;防止重复提交&#xff1b;第二&#xff1a;最简单。 于是磊哥问他&#xff0c;是单机环境还是分布…

如何降重计算机SCI论文的重复率? - 易智编译EaseEditing

介绍几种降重方法&#xff1a; 1“中英中”互换法 用翻译软件先翻译成英文&#xff0c; 再翻译回中文&#xff0c;之后手工修改润色一下&#xff0c; 这样换了一种表达句式&#xff0c;但愿文意思没有改变。 值得一提的是&#xff0c;现在中英文互译软件已经非常强大了&…

对文本文件中出现的词进行次数统计

主要涉及读取文本文件、统计词出现的数目、排序、隐藏函数lambda。 随便从网页复制一篇文章保存成“train.txt”&#xff0c;采用以下代码读取txt文件&#xff1a; def load_stop_words(file "stopwords.txt"):with open(file,"r",encoding"utf-8&…

最简单的6种防止数据重复提交的方法!(干货)

有位朋友&#xff0c;某天突然问磊哥&#xff1a;在 Java 中&#xff0c;防止重复提交最简单的方案是什么&#xff1f; 这句话中包含了两个关键信息&#xff0c;第一&#xff1a;防止重复提交&#xff1b;第二&#xff1a;最简单。 于是磊哥问他&#xff0c;是单机环境还是分布…

马斯克成立人工智能公司X.AI:对抗ChatGPT 已买1万个GPU

雷递网 雷建平 4月15日 根据内华达州的一份文件&#xff0c;特斯拉CEO埃隆马斯克 (Elon Musk) 已经成立了一家名为X.AI Corp的新人工智能公司。马斯克为X.AI Corp的唯一董事&#xff0c;而贾里德伯查尔&#xff0c;马斯克家族办公室的董事则是其秘书。 X.AI已允许出售这家私人持…

十大网络安全上市公司分析,让我们重点聊聊F5

网络安全上市厂商业务广泛分布于网络安全硬件、软件&#xff0c;网络安全服务等板块&#xff0c;总体来看&#xff0c;十大网络安全上市公司的竞争可谓是如火如荼。今天让我们把目光集中在F5&#xff0c;这个能为我们所有人创造更安全的数字世界的企业&#xff0c;在应用及API交…

基于blinker的 microPython 小爱同学

官方没有基于esp8266 esp32的microPython 的SDK 翻了 c源码 照葫芦画瓢画出了 这个 100行左右 里面有个设置设备类型的链接 需要手动设置一次 然后就可以进米家绑定其他设备同步到小爱同学啦 比官方的几百K缩小了很多 不过在官方源码翻协议倒是翻了一晚上。 https://download…

集美大学及集美大学诚毅学院的课表导入小爱同学

引言 由于学校教务系统在使用上存在一定的不便&#xff0c;无法在手机上简单地查看课程表&#xff0c;往往都需要通过截图的形式在手机上保存以供上课过程中查阅。本教程将介绍一种将集美大学及集美大学诚毅学院的课程表导入到小爱同学中的方法。 选择小爱课程表的理由是觉得市…

基于微信小程序的网上订餐系统 报告+任务书+开题报告+文献综述+中期PPT+外文翻译及原文+PPT+项目源码及数据库文件

摘要 随着微信小程序的飞速发展&#xff0c;很多系统随之兴起&#xff0c;微信已经是我们生活中的一部分&#xff0c;可不单单是人们用于沟通聊天的工具。还有很多公告平台、小程序也随之发展。大部分公众平台都只起到了一个信息消息的推送或者浏览的作用&#xff0c;而小程序的…

蚌埠学院教务系统自动导入课程表到小米/Redmi手机小爱同学课程表使用说明

文章目录 蚌埠学院教务系统自动导入课程表到小米/Redmi手机小爱同学课程表详细教学视频演示一、自我介绍二、使用说明1.使用条件2.读入数据 总结and已知问题 蚌埠学院教务系统自动导入课程表到小米/Redmi手机小爱同学课程表 蚌埠学院教务系统自动导入课程表到小米/Redmi手机小…

基于Javamail的邮件收发系统(系统+论文+开题报告+任务书+外文翻译+文献综述+答辩PPT)

毕业设计&#xff08;论文&#xff09; &#xff08; 20 届&#xff09; 论文&#xff08;设计&#xff09;题目 基于Javamail的邮件收发系统 作 者 二级学院、专业 班 级 指导教师&#xff08;职称&#xff09; 论 文 字 数 论文完成时间 20年月日 基于JavaMail的邮件…

电脑打不开网页,能ping通,能上QQ,解决办法。

方法一 修改网络配置 因为网络配置不正确无法访问外网的情况。 解决办法&#xff1a; WINR —>在运行里面输入cmd 输入 ipconfig 查看网络配置是否正确 如果不正确&#xff0c;右击网络–>属性–>更改适配器设置–>右击你现在连接的外网的–>属性–>双击…

计算机微信接收excel打不开怎么回事,电脑端微信打不开怎么解决

电脑端微信大家相信大家都用过了&#xff0c;但是有时候出现打不开情况怎么解决呢。下面由学习啦小编为你整理了电脑端微信网页版打不开怎么办的相关方法&#xff0c;希望对你有帮助! 电脑端微信网页版打不开解决方法如下 打开浏览器&#xff0c;点“工具”→“管理加载项”那里…

微信粤语语音转文字 讯飞输入法更懂粤语直出文字

微信语音转文字功能在一定程度上缓解了语音消息的压力。但是&#xff0c;如果对方讲的是方言怎么办&#xff1f;日前&#xff0c;腾讯微信团队发微博称&#xff0c;广东地区用户支持粤语语音转文字功能。然而广东以外的广东人怎么办&#xff1f;网友们表示&#xff1a;用讯飞输…

仿微信语音输入页面(讯飞语音)

boss最近提出新的需求&#xff0c;说是项目中的语音输入&#xff08;讯飞语音&#xff09;界面不够友好&#xff0c;要求按照微信语音输入界面进行修改&#xff0c;于是乎有了本篇文章。 项目中用到的语音输入采用的是讯飞的SDK。集成讯飞语音输入&#xff0c;请参考官方文档。…