Android实现类似微信的聊天UI
jopen
9年前
先看主页面布局
activity_imitate_weixin_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#f0f0e0" > <RelativeLayout android:id="@+id/rl_bottom" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@drawable/weixin_layout_bg1" > <Button android:id="@+id/btn_send" android:layout_width="60dp" android:layout_height="40dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:text="发送" /> <EditText android:id="@+id/et_sendmessage" android:layout_width="fill_parent" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_toLeftOf="@id/btn_send" android:background="@drawable/weixin_edittext1" android:singleLine="true" android:textSize="18sp" /> </RelativeLayout> <ListView android:id="@+id/listview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@id/rl_bottom" android:layout_marginLeft="10.0dip" android:layout_marginRight="10.0dip" android:layout_marginTop="10.0dip" android:cacheColorHint="#00000000" android:divider="@null" android:dividerHeight="5dp" android:scrollbars="none" /> </RelativeLayout>
再看入口WeixinChatDemoActivity
package com.example.weixindemo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; /** * 仿微信主页面 */ public class WeixinChatDemoActivity extends Activity implements OnClickListener { private Button mBtnSend;// 发送btn private EditText mEditTextContent; private ListView mListView; private ChatMsgViewAdapter mAdapter;// 消息视图的Adapter private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();// 消息对象数组 private final static int COUNT = 1;// 初始化数组总数 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_imitate_weixin_main); initView(); } public void initView() { mListView = (ListView) findViewById(R.id.listview); mBtnSend = (Button) findViewById(R.id.btn_send); mEditTextContent = (EditText) findViewById(R.id.et_sendmessage); initData();// 初始化数据 mBtnSend.setOnClickListener(this); mListView.setSelection(mAdapter.getCount() - 1); } /** * 模拟加载消息历史，实际开发可以从数据库中读出 */ public void initData() { for (int i = 0; i < COUNT; i++) { ChatMsgEntity entity = new ChatMsgEntity(); entity.setDate("2012-09-22 18:00:02"); if (i % 2 == 0) { entity.setName("他人"); entity.setMsgType(true);// 收到的消息 } else { entity.setName("本人"); entity.setMsgType(false);// 自己发送的消息 } entity.setMessage("今晚去网吧包夜吧？"); mDataArrays.add(entity); } mAdapter = new ChatMsgViewAdapter(this, mDataArrays); mListView.setAdapter(mAdapter); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.btn_send:// 发送按钮点击事件 send(); break; } } /** * 发送消息 */ private void send() { String contString = mEditTextContent.getText().toString(); if (contString.length() > 0) { ChatMsgEntity entity = new ChatMsgEntity(); entity.setName("本人"); entity.setDate(getDate()); entity.setMessage(contString); entity.setMsgType(false); mDataArrays.add(entity); mAdapter.notifyDataSetChanged();// 通知ListView，数据已发生改变 mEditTextContent.setText("");// 清空编辑框数据 mListView.setSelection(mListView.getCount() - 1);// 发送一条消息时，ListView显示选择最后一项 } } /** * 发送消息时，获取当前事件 * * @return 当前时间 */ private String getDate() { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); return format.format(new Date()); } }再看适配器
ChatMsgViewAdapter
package com.example.weixindemo; import java.util.List; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; /** * 消息ListView的Adapter */ public class ChatMsgViewAdapter extends BaseAdapter { private List<ChatMsgEntity> coll;// 消息对象数组 private LayoutInflater mInflater; public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) { this.coll = coll; mInflater = LayoutInflater.from(context); } /*****************************************************/ //得到Item的类型，是对方发过来的消息，还是自己发送出去的 public int getItemViewType(int position) { return coll.get(position).getMsgType()?1:0; } //Item类型的总数 public int getViewTypeCount() { return 2; } /******************************************************/ public int getCount() { return coll.size(); } public Object getItem(int position) { return coll.get(position); } public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ChatMsgEntity entity = coll.get(position); boolean isComMsg = entity.getMsgType(); ViewHolder viewHolder = null; if (convertView == null) { if (isComMsg) { convertView = mInflater.inflate( R.layout.activity_imitate_weixin_chatting_item_msg_text_left, null); } else { convertView = mInflater.inflate( R.layout.activity_imitate_weixin_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.getMessage()); return convertView; } static class ViewHolder { public TextView tvSendTime; public TextView tvUserName; public TextView tvContent; public boolean isComMsg = true; } }另外还辅助的bean类
ChatMsgEntity
package com.example.weixindemo; /** * 一个消息的JavaBean */ public class ChatMsgEntity { private String name;//消息来自 private String date;//消息日期 private String message;//消息内容 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 getMessage() { return message; } public void setMessage(String message) { this.message = message; } public boolean getMsgType() { return isComMeg; } public void setMsgType(boolean isComMsg) { isComMeg = isComMsg; } public ChatMsgEntity() { } public ChatMsgEntity(String name, String date, String text, boolean isComMsg) { super(); this.name = name; this.date = date; this.message = text; this.isComMeg = isComMsg; } }另外还有聊天界面本人、他人的布局文件
activity_imitate_weixin_chatting_item_msg_text_left.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv_sendtime" style="@style/chat_text_date_style" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </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:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/weixin_mini_avatar_shadow" android:focusable="false" /> <TextView android:id="@+id/tv_chatcontent" style="@style/chat_content_date_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_toRightOf="@id/iv_userhead" android:background="@drawable/weixin_chatfrom_bg_normal" /> <TextView android:id="@+id/tv_username" style="@style/chat_text_name_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@id/iv_userhead" android:layout_toLeftOf="@id/tv_chatcontent" /> </RelativeLayout> </LinearLayout>
activity_imitate_weixin_chatting_item_msg_text_right.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv_sendtime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#bfbfbf" android:padding="2dp" android:textColor="#ffffff" android:textSize="12sp" /> </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:layout_alignParentRight="true" android:layout_alignParentTop="true" android:background="@drawable/weixin_mini_avatar_shadow" android:focusable="false" /> <TextView android:id="@+id/tv_chatcontent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:layout_toLeftOf="@id/iv_userhead" android:background="@drawable/weixin_chatto_bg_normal" android:clickable="true" android:focusable="true" android:gravity="left|center" android:lineSpacingExtra="2dp" android:minHeight="50dp" android:textColor="#ff000000" android:textSize="15sp" /> <TextView android:id="@+id/tv_username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_below="@id/iv_userhead" android:layout_toRightOf="@id/tv_chatcontent" android:gravity="center" android:textColor="#818181" android:textSize="15sp" /> </RelativeLayout> </LinearLayout>来自：http://blog.csdn.net/u013210620/article/details/46430003