Similar to ChattingUi of WeChat, similar to ChattingUi

Similar ChattingUi, similar to ChattingUi

First look at the homepage Layout

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 = "send"/> <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_abve = "@ id/rl_bottom" android: layout_marginLeft = "10.0dip" android: layout_marginRight = "10.0dip" android: Signature = "10.0dip" android: cacheColorHint = "#00000000" android: divider = "@ null" android: dividerHeight = "5dp" android: scrollbars = "none"/> </RelativeLayout>

Look at 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;/*** imitation homepage */public class WeixinChatDemoActivity extend S Activity implements OnClickListener {private Button mBtnSend; // send btnprivate EditText mEditTextContent; private ListView mListView; private ChatMsgViewAdapter mAdapter; // Adapterprivate List <ChatMsgEntity> mDataArrays = new ArrayList <ChatMsgEntity> (); // message object array private final static int COUNT = 1; // initialize the total number of arrays @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceS Tate); 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 (); // initialize data mBtnSend. setOnClickListener (this); mListView. setSelection (mAdapter. getCount ()-1);}/*** simulate loading message history. The actual development can read */public v from the database. Oid initData () {for (int I = 0; I <COUNT; I ++) {ChatMsgEntity entity = new ChatMsgEntity (); entity. setDate ("18:00:02"); if (I % 2 = 0) {entity. setName ("Others"); entity. setMsgType (true); // received message} else {entity. setName ("Myself"); entity. setMsgType (false); // self-sent message} entity. setMessage ("Are you going to the internet cafe night package tonight? "); MDataArrays. add (entity);} mAdapter = new ChatMsgViewAdapter (this, mDataArrays); mListView. setAdapter (mAdapter) ;}@ Overridepublic void onClick (View v) {switch (v. getId () {case R. id. btn_send: // click the send button to send (); break ;}/ *** send message */private void send () {String contString = mEditTextContent. getText (). toString (); if (contString. length ()> 0) {ChatMsgEntity entity = new ChatMsgEntity (); entity. setName ("Myself"); entity. setDate (getDate (); entity. setMessage (contString); entity. setMsgType (false); mDataArrays. add (entity); mAdapter. notifyDataSetChanged (); // notifies ListView that the data has changed mEditTextContent. setText (""); // clear the data in the edit box mListView. setSelection (mListView. getCount ()-1); // when a message is sent, the ListView displays the last message}/*** when the message is sent, obtain the current event ** @ return current time */private String getDate () {SimpleDateFormat format = new SimpleDateFormat ("yyyy-MM-dd hh: mm: ss"); return format. format (new Date ());}}

View the adapter again

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;/*** message ListView Adapter */public class ChatMsgViewAdapter extends BaseAdapter {private List <ChatMsgEntity> coll; // message object array private LayoutInflater mInflater; public ChatMsgViewAdapter (Context context, List <ChatMsgEntity> coll) {this. coll = coll; mInflater = LayoutInflater. from (context );} /*************************************** * ************* // obtain the Item type, is the message sent by the other party or the public int getItemViewType (int position) {return coll sent by the other party. get (position ). getMsgType ()? 1:0;} // total number of Item types 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 classes

ChatMsgEntity

Package com. example. weixindemo;/*** a message's JavaBean */public class ChatMsgEntity {private String name; // The message comes from private String date; // The message date private String message; // message content private boolean isComMeg = true; // whether it is the received message 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 ;}}

In addition, there are layout files for the chat interface and others.

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>