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