转-Android仿微信气泡聊天界面设计
微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下:
气泡聊天最终要的是素材,要用到9.png文件的素材,这样气泡会随着聊天内容的多少而改变气泡的大小且不失真。为了方便,我就直接在微信里面提取出来啦。
聊天的内容是用ListView来显示的,将聊天的内容封装成一个ChatMsgEntity类的对象里面,然后交给自定义的ListView适配器将聊天内容显示出来。
ChatMsgEntity.java比较简单,只是聊天的内容存储、设置和获取。
package com.example.school; public class ChatMsgEntity {
private static final String TAG = ChatMsgEntity.class.getSimpleName();
//名字
private String name;
//日期
private String date;
//聊天内容
private String text;
//是否为对方发来的信息
private boolean isComMeg = true; public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} public String getDate() {
return date;
} public void setDate(String date) {
this.date = date;
} public String getText() {
return text;
} public void setText(String text) {
this.text = text;
} public boolean getMsgType() {
return isComMeg;
} public void setMsgType(boolean isComMsg) {
isComMeg = isComMsg;
} public ChatMsgEntity() {
} public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {
this.name = name;
this.date = date;
this.text = text;
this.isComMeg = isComMsg;
}
}
显示ListView的适配器ChatMsgViewAdpater.java:
package com.example.school; import android.R.integer;
import android.content.Context;
import android.database.DataSetObserver; import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.view.ViewGroup; import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.TextView; import java.util.ArrayList;
import java.util.List; public class ChatMsgViewAdapter extends BaseAdapter { //ListView视图的内容由IMsgViewType决定
public static interface IMsgViewType
{
//对方发来的信息
int IMVT_COM_MSG = 0;
//自己发出的信息
int IMVT_TO_MSG = 1;
} private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();
private List<ChatMsgEntity> data;
private Context context;
private LayoutInflater mInflater; public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> data) {
this.context = context;
this.data = data;
mInflater = LayoutInflater.from(context);
} //获取ListView的项个数
public int getCount() {
return data.size();
} //获取项
public Object getItem(int position) {
return data.get(position);
} //获取项的ID
public long getItemId(int position) {
return position;
} //获取项的类型
public int getItemViewType(int position) {
// TODO Auto-generated method stub
ChatMsgEntity entity = data.get(position); if (entity.getMsgType())
{
return IMsgViewType.IMVT_COM_MSG;
}else{
return IMsgViewType.IMVT_TO_MSG;
} } //获取项的类型数
public int getViewTypeCount() {
// TODO Auto-generated method stub
return 2;
} //获取View
public View getView(int position, View convertView, ViewGroup parent) { ChatMsgEntity entity = data.get(position);
boolean isComMsg = entity.getMsgType(); ViewHolder viewHolder = null;
if (convertView == null)
{
if (isComMsg)
{
//如果是对方发来的消息,则显示的是左气泡
convertView = mInflater.inflate(R.layout.chatting_item_msg_text_left, null);
}else{
//如果是自己发出的消息,则显示的是右气泡
convertView = mInflater.inflate(R.layout.chatting_item_msg_text_right, null);
} viewHolder = new ViewHolder();
viewHolder.tvSendTime = (TextView) convertView.findViewById(R.id.tv_sendtime);
viewHolder.tvUserName = (TextView) convertView.findViewById(R.id.tv_username);
viewHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_chatcontent);
viewHolder.isComMsg = isComMsg; convertView.setTag(viewHolder);
}else{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.tvSendTime.setText(entity.getDate());
viewHolder.tvUserName.setText(entity.getName());
viewHolder.tvContent.setText(entity.getText()); return convertView;
} //通过ViewHolder显示项的内容
static class ViewHolder {
public TextView tvSendTime;
public TextView tvUserName;
public TextView tvContent;
public boolean isComMsg = true;
} }
对方发来消息的显示布局chatting_item_msg_text_left.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="6dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="@+id/tv_sendtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/chat_text_date_style"/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp" >
<ImageView
android:id="@+id/iv_userhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/mini_avatar_shadow"/>
<TextView
android:id="@+id/tv_chatcontent"
android:layout_toRightOf="@id/iv_userhead"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/chatfrom_bg"
style="@style/chat_content_date_style"/>
<TextView
android:id="@+id/tv_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_userhead"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@id/tv_chatcontent"
style="@style/chat_text_name_style"/>
</RelativeLayout>
</LinearLayout>
chatting_item_msg_text_right.xml和上面差不多,只是气泡和头像的方向在右边,就不贴代码了。
主界面的布局chat.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f0f0e0" >
<RelativeLayout
android:id="@+id/rl_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/title" >
<Button
android:id="@+id/btn_back"
android:gravity="center_vertical"
android:layout_marginLeft="5dp"
android:paddingLeft="18dp"
android:textSize="18.0sp"
android:textColor="#ffffff"
android:background="@drawable/selector_btn_back"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:text="@string/back" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/school_title_name"
android:layout_centerInParent="true"
style="@style/my_txt"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/campus_info"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/layout_bg1" >
<Button
android:id="@+id/btn_send"
android:layout_width="60dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_centerVertical="true"
android:text="@string/send" />
<EditText
android:id="@+id/et_sendmessage"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_toLeftOf="@id/btn_send"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext1"
android:layout_centerVertical="true"
android:singleLine="true"
android:textSize="18sp"/>
</RelativeLayout>
<ListView
android:id="@+id/listview"
android:layout_below="@id/rl_layout"
android:layout_above="@id/rl_bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10.0dip"
android:layout_marginTop="10.0dip"
android:layout_marginRight="10.0dip"
android:divider="@null"
android:dividerHeight="5dp"
android:scrollbars="none"
android:cacheColorHint="#00000000"/>
</RelativeLayout>
ChatActivity.java
package com.example.chat; import java.util.ArrayList;
import java.util.Calendar;
import java.util.List; import com.example.school.R; import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView; public class ChatActivity extends Activity implements OnClickListener {
private Button mBtnSend;
private Button mBtnBack;
private EditText mEditTextContent;
//聊天内容的适配器
private ChatMsgViewAdapter mAdapter;
private ListView mListView;
//聊天的内容
private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>(); @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
setContentView(R.layout.chat);
initView();
initData();
} //初始化视图
private void initView() {
mListView = (ListView) findViewById(R.id.listview);
mBtnBack = (Button) findViewById(R.id.btn_back);
mBtnBack.setOnClickListener(this);
mBtnSend = (Button) findViewById(R.id.btn_send);
mBtnSend.setOnClickListener(this);
mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
} private String[] msgArray = new String[]{" 孩子们,要好好学习,天天向上!要好好听课,不要翘课!不要挂科,多拿奖学金!三等奖学金的争取拿二等,二等的争取拿一等,一等的争取拿励志!",
"姚妈妈还有什么吩咐...",
"还有,明天早上记得跑操啊,不来的就扣德育分!",
"德育分是什么?扣了会怎么样?",
"德育分会影响奖学金评比,严重的话,会影响毕业",
"哇!学院那么不人道?",
"你要是你不听话,我当场让你不能毕业!",
"姚妈妈,我知错了(- -我错在哪了...)"}; private String[]dataArray = new String[]{"2012-09-01 18:00", "2012-09-01 18:10",
"2012-09-01 18:11", "2012-09-01 18:20",
"2012-09-01 18:30", "2012-09-01 18:35",
"2012-09-01 18:40", "2012-09-01 18:50"};
private final static int COUNT = 8; //初始化要显示的数据
private void initData() {
for(int i = 0; i < COUNT; i++) {
ChatMsgEntity entity = new ChatMsgEntity();
entity.setDate(dataArray[i]);
if (i % 2 == 0)
{
entity.setName("姚妈妈");
entity.setMsgType(true);
}else{
entity.setName("Shamoo");
entity.setMsgType(false);
} entity.setText(msgArray[i]);
mDataArrays.add(entity);
}
mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
mListView.setAdapter(mAdapter);
} public void onClick(View view) {
// TODO Auto-generated method stub
switch(view.getId()) {
case R.id.btn_back:
back();
break;
case R.id.btn_send:
send();
break;
}
} private void send()
{
String contString = mEditTextContent.getText().toString();
if (contString.length() > 0)
{
ChatMsgEntity entity = new ChatMsgEntity();
entity.setDate(getDate());
entity.setName("");
entity.setMsgType(false);
entity.setText(contString);
mDataArrays.add(entity);
mAdapter.notifyDataSetChanged();
mEditTextContent.setText("");
mListView.setSelection(mListView.getCount() - 1);
}
} //获取日期
private String getDate() {
Calendar c = Calendar.getInstance();
String year = String.valueOf(c.get(Calendar.YEAR));
String month = String.valueOf(c.get(Calendar.MONTH));
String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);
String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));
String mins = String.valueOf(c.get(Calendar.MINUTE));
StringBuffer sbBuffer = new StringBuffer();
sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":" + mins);
return sbBuffer.toString();
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
back();
return true;
} private void back() {
finish();
}
}
谢谢大家的支持!链接:点击打开链接
需要一分资源分,大家评论一下那一分就还回来了,哈哈~~
转自http://blog.csdn.net/pocoyoshamoo/article/details/9674385
转-Android仿微信气泡聊天界面设计的更多相关文章
- Android仿微信气泡聊天界面设计
微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下: 气泡聊天最终要的是素材,要用到9.png文件的素材,这样气 ...
- android 仿QQ气泡聊天界面
1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...
- Android仿微信SlideView聊天列表滑动删除效果
package com.ryg.slideview; import com.ryg.slideview.MainActivity.MessageItem; //Download by http://w ...
- 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践
基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...
- uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat. tauri-chat 运用最新tauri+vue3+vite3+element-plus+v3layer等 ...
- Android 仿微信小视频录制
Android 仿微信小视频录制 WechatShortVideo和WechatShortVideo文章
- android 仿微信聊天界面,以及语音录制功能
extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 ...
随机推荐
- iOS,视图控制器相关(UIViewController)
1.视图控制器各个方法调用时机 2.选项卡(Tab Bar)和导航栏(Navigation Bar) 3.有无控制器的页面跳转 4.页面跳转隐藏底部选项卡 5.获取导航栏和状态栏高度,隐藏导航栏返回按 ...
- 数据库的Instance/Crash Recovery
crash recovery是指单实例数据库发生了failure.或者rac数据库中的所有实例都发生了failure后进行的recovery.rac数据库crash后,rac中第一个重启启动的inst ...
- 湖大OJ-实验C----NFA转换为DFA
实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...
- angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...
- Leetcode: Number of Segments in a String
Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...
- 重新安装了mysql,以前的数据库如何导入到新的数据库
重新安装了mysql,以前的数据库如何导入到新的数据库,导入到新的数据库不能用真么办? 将之前的mysql中的data目录中的数据库文件夹,(需要哪个数据库复制哪个,不要都复制) D:/wamp/bi ...
- js处理异常try{}catch(e){}
MXS&Vincene ─╄OvЁ &0000021─╄OvЁ MXS&Vincene MXS&Vincene ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...
- 161220、使用Spring AOP实现MySQL数据库读写分离案例分析
一.前言 分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量. 在进行数据库读写分离的时候,我们首先要进行数据库 ...
- UBUNTU下Y86模拟器的安装和使用
UBUNTU下Y86模拟器的安装和使用 由于上周在虚拟机中安装Y86模拟器中出现了一些问题并且没得到解决,所以上周实验是在实验楼上做的,这几天练习了UBUNTU下Y86模拟器的安装和使用. 参考博客: ...
- 整理课堂笔记 pl/sql orcale异常
1>>>>>异常错误处理 1 >预定义的异常处理 预定义说明的部分 ORACLE 异常错误对这种异常情况的处理,只需在PL/SQL块的异常处理部分,直接引用相应 ...