首页 > 移动开发 > Android仿微信气泡聊天界面设计

Android仿微信气泡聊天界面设计

微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下:

气泡聊天最终要的是素材,要用到9.png文件的素材,这样气泡会随着聊天内容的多少而改变气泡的大小且不失真。为了方便,我就直接在微信里面提取出来啦。

 

聊天的内容是用ListView来显示的,将聊天的内容封装成一个ChatMsgEntity类的对象里面,然后交给自定义的ListView适配器将聊天内容显示出来。

ChatMsgEntity.java比较简单,只是聊天的内容存储、设置和获取。

 

[java][/java] view plaincopy

  1. package com.example.school;
  2. public class ChatMsgEntity {
  3.     private static final String TAG = ChatMsgEntity.class.getSimpleName();
  4.     //名字
  5.     private String name;
  6.     //日期
  7.     private String date;
  8.     //聊天内容
  9.     private String text;
  10.     //是否为对方发来的信息
  11.     private boolean isComMeg = true;
  12.     public String getName() {
  13.         return name;
  14.     }
  15.     public void setName(String name) {
  16.         this.name = name;
  17.     }
  18.     public String getDate() {
  19.         return date;
  20.     }
  21.     public void setDate(String date) {
  22.         this.date = date;
  23.     }
  24.     public String getText() {
  25.         return text;
  26.     }
  27.     public void setText(String text) {
  28.         this.text = text;
  29.     }
  30.     public boolean getMsgType() {
  31.         return isComMeg;
  32.     }
  33.     public void setMsgType(boolean isComMsg) {
  34.         isComMeg = isComMsg;
  35.     }
  36.     public ChatMsgEntity() {
  37.     }
  38.     public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {
  39.         this.name = name;
  40.         this.date = date;
  41.         this.text = text;
  42.         this.isComMeg = isComMsg;
  43.     }
  44. }

显示ListView的适配器ChatMsgViewAdpater.java:

 

 

[java][/java] view plaincopy

  1. package com.example.school;
  2. import android.R.integer;
  3. import android.content.Context;
  4. import android.database.DataSetObserver;
  5. import android.util.Log;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.view.View.OnLongClickListener;
  10. import android.view.ViewGroup;
  11. import android.widget.BaseAdapter;
  12. import android.widget.CheckBox;
  13. import android.widget.LinearLayout;
  14. import android.widget.TextView;
  15. import java.util.ArrayList;
  16. import java.util.List;
  17. public class ChatMsgViewAdapter extends BaseAdapter {
  18.     //ListView视图的内容由IMsgViewType决定
  19.     public static interface IMsgViewType
  20.     {
  21.         //对方发来的信息
  22.         int IMVT_COM_MSG = 0;
  23.         //自己发出的信息
  24.         int IMVT_TO_MSG = 1;
  25.     }
  26.     private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();
  27.     private List<ChatMsgEntity> data;
  28.     private Context context;
  29.     private LayoutInflater mInflater;
  30.     public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> data) {
  31.         this.context = context;
  32.         this.data = data;
  33.         mInflater = LayoutInflater.from(context);
  34.     }
  35.     //获取ListView的项个数
  36.     public int getCount() {
  37.         return data.size();
  38.     }
  39.     //获取项
  40.     public Object getItem(int position) {
  41.         return data.get(position);
  42.     }
  43.     //获取项的ID
  44.     public long getItemId(int position) {
  45.         return position;
  46.     }
  47.     //获取项的类型
  48.     public int getItemViewType(int position) {
  49.         // TODO Auto-generated method stub
  50.         ChatMsgEntity entity = data.get(position);
  51.         if (entity.getMsgType())
  52.         {
  53.             return IMsgViewType.IMVT_COM_MSG;
  54.         }else{
  55.             return IMsgViewType.IMVT_TO_MSG;
  56.         }
  57.     }
  58.     //获取项的类型数
  59.     public int getViewTypeCount() {
  60.         // TODO Auto-generated method stub
  61.         return 2;
  62.     }
  63.     //获取View
  64.     public View getView(int position, View convertView, ViewGroup parent) {
  65.         ChatMsgEntity entity = data.get(position);
  66.         boolean isComMsg = entity.getMsgType();
  67.         ViewHolder viewHolder = null;
  68.         if (convertView == null)
  69.         {
  70.               if (isComMsg)
  71.               {
  72.                   //如果是对方发来的消息,则显示的是左气泡
  73.                   convertView = mInflater.inflate(R.layout.chatting_item_msg_text_left, null);
  74.               }else{
  75.                   //如果是自己发出的消息,则显示的是右气泡
  76.                   convertView = mInflater.inflate(R.layout.chatting_item_msg_text_right, null);
  77.               }
  78.               viewHolder = new ViewHolder();
  79.               viewHolder.tvSendTime = (TextView) convertView.findViewById(R.id.tv_sendtime);
  80.               viewHolder.tvUserName = (TextView) convertView.findViewById(R.id.tv_username);
  81.               viewHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_chatcontent);
  82.               viewHolder.isComMsg = isComMsg;
  83.               convertView.setTag(viewHolder);
  84.         }else{
  85.             viewHolder = (ViewHolder) convertView.getTag();
  86.         }
  87.         viewHolder.tvSendTime.setText(entity.getDate());
  88.         viewHolder.tvUserName.setText(entity.getName());
  89.         viewHolder.tvContent.setText(entity.getText());
  90.         return convertView;
  91.     }
  92.     //通过ViewHolder显示项的内容
  93.     static class ViewHolder {
  94.         public TextView tvSendTime;
  95.         public TextView tvUserName;
  96.         public TextView tvContent;
  97.         public boolean isComMsg = true;
  98.     }
  99. }

对方发来消息的显示布局chatting_item_msg_text_left.xml

 

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="wrap_content"
  5.         android:orientation="vertical"
  6.         android:padding="6dp">
  7.         <LinearLayout
  8.             android:layout_width="fill_parent"
  9.             android:layout_height="wrap_content"
  10.             android:orientation="vertical"
  11.             android:gravity="center_horizontal">
  12.             <TextView
  13.                 android:id="@+id/tv_sendtime"
  14.                 android:layout_width="wrap_content"
  15.                 android:layout_height="wrap_content"
  16.                 style="@style/chat_text_date_style"/>
  17.         </LinearLayout>
  18.         <RelativeLayout
  19.             android:layout_width="fill_parent"
  20.             android:layout_height="wrap_content"
  21.             android:layout_marginTop="5dp" >
  22.                 <ImageView
  23.                    android:id="@+id/iv_userhead"
  24.                    android:layout_width="wrap_content"
  25.                    android:layout_height="wrap_content"
  26.                    android:focusable="false"
  27.                    android:layout_alignParentLeft="true"
  28.                    android:layout_alignParentTop="true"
  29.                    android:background="@drawable/mini_avatar_shadow"/>
  30.                 <TextView
  31.                 android:id="@+id/tv_chatcontent"
  32.                 android:layout_toRightOf="@id/iv_userhead"
  33.                 android:layout_marginLeft="10dp"
  34.                 android:layout_width="wrap_content"
  35.                 android:layout_height="wrap_content"
  36.                 android:background="@drawable/chatfrom_bg"
  37.                 style="@style/chat_content_date_style"/>
  38.                 <TextView
  39.                 android:id="@+id/tv_username"
  40.                 android:layout_width="wrap_content"
  41.                 android:layout_height="wrap_content"
  42.                 android:layout_below="@id/iv_userhead"
  43.                 android:layout_alignParentLeft="true"
  44.                 android:layout_toLeftOf="@id/tv_chatcontent"
  45.                 style="@style/chat_text_name_style"/>
  46.         </RelativeLayout>
  47. </LinearLayout>

 

 

chatting_item_msg_text_right.xml和上面差不多,只是气泡和头像的方向在右边,就不贴代码了。

主界面的布局chat.xml

 

[html][/html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     android:background="#f0f0e0" >
  7.     <RelativeLayout
  8.         android:id="@+id/rl_layout"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="wrap_content"
  11.         android:background="@drawable/title" >
  12.         <Button
  13.             android:id="@+id/btn_back"
  14.             android:gravity="center_vertical"
  15.             android:layout_marginLeft="5dp"
  16.             android:paddingLeft="18dp"
  17.             android:textSize="18.0sp"
  18.             android:textColor="#ffffff"
  19.             android:background="@drawable/selector_btn_back"
  20.             android:layout_width="70dp"
  21.             android:layout_height="wrap_content"
  22.             android:text="@string/back" />
  23.         <TextView
  24.             android:layout_width="wrap_content"
  25.             android:layout_height="wrap_content"
  26.             android:text="@string/school_title_name"
  27.             android:layout_centerInParent="true"
  28.             style="@style/my_txt"/>
  29.         <ImageView
  30.             android:layout_width="wrap_content"
  31.             android:layout_height="wrap_content"
  32.             android:background="@drawable/campus_info"
  33.             android:layout_centerVertical="true"
  34.             android:layout_alignParentRight="true"
  35.             android:layout_marginRight="15dp"/>
  36.         </RelativeLayout>
  37.     <RelativeLayout
  38.         android:id="@+id/rl_bottom"
  39.         android:layout_width="fill_parent"
  40.         android:layout_height="wrap_content"
  41.         android:layout_alignParentBottom="true"
  42.         android:background="@drawable/layout_bg1" >
  43.         <Button
  44.             android:id="@+id/btn_send"
  45.             android:layout_width="60dp"
  46.             android:layout_height="40dp"
  47.             android:layout_alignParentRight="true"
  48.             android:layout_marginRight="10dp"
  49.             android:layout_centerVertical="true"
  50.             android:text="@string/send" />
  51.         <EditText
  52.             android:id="@+id/et_sendmessage"
  53.             android:layout_width="fill_parent"
  54.             android:layout_height="40dp"
  55.             android:layout_toLeftOf="@id/btn_send"
  56.             android:layout_marginLeft="10dp"
  57.             android:layout_marginRight="10dp"
  58.             android:background="@drawable/edittext1"
  59.             android:layout_centerVertical="true"
  60.             android:singleLine="true"
  61.             android:textSize="18sp"/>
  62.     </RelativeLayout>
  63.     <ListView
  64.         android:id="@+id/listview"
  65.         android:layout_below="@id/rl_layout"
  66.         android:layout_above="@id/rl_bottom"
  67.         android:layout_width="fill_parent"
  68.         android:layout_height="fill_parent"
  69.         android:layout_marginLeft="10.0dip"
  70.         android:layout_marginTop="10.0dip"
  71.         android:layout_marginRight="10.0dip"
  72.         android:divider="@null"
  73.         android:dividerHeight="5dp"
  74.         android:scrollbars="none"
  75.         android:cacheColorHint="#00000000"/>
  76. </RelativeLayout>

ChatActivity.java

 

 

[java][/java] view plaincopy

  1. package com.example.chat;
  2. import java.util.ArrayList;
  3. import java.util.Calendar;
  4. import java.util.List;
  5. import com.example.school.R;
  6. import android.os.Bundle;
  7. import android.app.Activity;
  8. import android.content.Intent;
  9. import android.view.KeyEvent;
  10. import android.view.Menu;
  11. import android.view.View;
  12. import android.view.Window;
  13. import android.view.View.OnClickListener;
  14. import android.widget.AdapterView;
  15. import android.widget.AdapterView.OnItemClickListener;
  16. import android.widget.Button;
  17. import android.widget.EditText;
  18. import android.widget.ListView;
  19. import android.widget.TextView;
  20. public class ChatActivity extends Activity implements OnClickListener {
  21.     private Button mBtnSend;
  22.     private Button mBtnBack;
  23.     private EditText mEditTextContent;
  24.     //聊天内容的适配器
  25.     private ChatMsgViewAdapter mAdapter;
  26.     private ListView mListView;
  27.     //聊天的内容
  28.     private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();
  29.     @Override
  30.     public void onCreate(Bundle savedInstanceState) {
  31.         super.onCreate(savedInstanceState);
  32.         requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
  33.         setContentView(R.layout.chat);
  34.         initView();
  35.         initData();
  36.     }
  37.     //初始化视图
  38.     private void initView() {
  39.         mListView = (ListView) findViewById(R.id.listview);
  40.         mBtnBack = (Button) findViewById(R.id.btn_back);
  41.         mBtnBack.setOnClickListener(this);
  42.         mBtnSend = (Button) findViewById(R.id.btn_send);
  43.         mBtnSend.setOnClickListener(this);
  44.         mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
  45.     }
  46.     private String[] msgArray = new String[]{"  孩子们,要好好学习,天天向上!要好好听课,不要翘课!不要挂科,多拿奖学金!三等奖学金的争取拿二等,二等的争取拿一等,一等的争取拿励志!",
  47.             "姚妈妈还有什么吩咐...",
  48.             "还有,明天早上记得跑操啊,不来的就扣德育分!",
  49.             "德育分是什么?扣了会怎么样?",
  50.             "德育分会影响奖学金评比,严重的话,会影响毕业",
  51.             "哇!学院那么不人道?",
  52.             "你要是你不听话,我当场让你不能毕业!",
  53.             "姚妈妈,我知错了(- -我错在哪了...)"};
  54.     private String[]dataArray = new String[]{"2012-09-01 18:00", "2012-09-01 18:10",
  55.             "2012-09-01 18:11", "2012-09-01 18:20",
  56.             "2012-09-01 18:30", "2012-09-01 18:35",
  57.             "2012-09-01 18:40", "2012-09-01 18:50"};
  58.     private final static int COUNT = 8;
  59.     //初始化要显示的数据
  60.     private void initData() {
  61.         for(int i = 0; i < COUNT; i++) {
  62.             ChatMsgEntity entity = new ChatMsgEntity();
  63.             entity.setDate(dataArray[i]);
  64.             if (i % 2 == 0)
  65.             {
  66.                 entity.setName("姚妈妈");
  67.                 entity.setMsgType(true);
  68.             }else{
  69.                 entity.setName("Shamoo");
  70.                 entity.setMsgType(false);
  71.             }
  72.             entity.setText(msgArray[i]);
  73.             mDataArrays.add(entity);
  74.         }
  75.         mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
  76.         mListView.setAdapter(mAdapter);
  77.     }
  78.     public void onClick(View view) {
  79.         // TODO Auto-generated method stub
  80.         switch(view.getId()) {
  81.         case R.id.btn_back:
  82.             back();
  83.             break;
  84.         case R.id.btn_send:
  85.             send();
  86.             break;
  87.         }
  88.     }
  89.     private void send()
  90.     {
  91.         String contString = mEditTextContent.getText().toString();
  92.         if (contString.length() > 0)
  93.         {
  94.             ChatMsgEntity entity = new ChatMsgEntity();
  95.             entity.setDate(getDate());
  96.             entity.setName("");
  97.             entity.setMsgType(false);
  98.             entity.setText(contString);
  99.             mDataArrays.add(entity);
  100.             mAdapter.notifyDataSetChanged();
  101.             mEditTextContent.setText("");
  102.             mListView.setSelection(mListView.getCount() - 1);
  103.         }
  104.     }
  105.     //获取日期
  106.     private String getDate() {
  107.         Calendar c = Calendar.getInstance();
  108.         String year = String.valueOf(c.get(Calendar.YEAR));
  109.         String month = String.valueOf(c.get(Calendar.MONTH));
  110.         String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);
  111.         String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));
  112.         String mins = String.valueOf(c.get(Calendar.MINUTE));
  113.         StringBuffer sbBuffer = new StringBuffer();
  114.         sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":" + mins);
  115.         return sbBuffer.toString();
  116.     }
  117.     public boolean onKeyDown(int keyCode, KeyEvent event) {
  118.         back();
  119.         return true;
  120.     }
  121.     private void back() {
  122.         finish();
  123.     }
  124. }

代码比较多,不过Demo的实现还是比较简单的,有需要的可以留邮箱。


本文固定链接: http://www.devba.com/index.php/archives/2054.html | 开发吧

报歉!评论已关闭.