Android-simple imitation QQ chat interface, android chat

Android-simple imitation QQ chat interface, android chat

Recently, I made a similar interface like QQ chat. I first looked at the composition of the interface (the picture is not so beautiful to join in ,,,,):

The chat background can be either LinearLayout or RelativeLayout, which stores ListView (set the split line of ListView to transparent: android: divider = "#0000" otherwise the chat interface will display a split line. Think about it all ,,,)

So I want to go to the xml layout file on the main interface:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "# c2c2c2" android: orientation = "vertical" android: padding = "16dp"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_marginTop = "@ dimen/activity_horizontal_margin" android: layout_weight = "1" android: background = "@ drawable/app_lvjian_rbtn_normal_background" android: orientation = "vertical" android: padding = "8dp"> <ListView android: id = "@ + id/lv_chat_dialog" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: divider = "#0000" android: dividerHeight = "8dp" android: scrollbars = "none"> </ListView> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "32dp" android: layout_marginTop = "8dp" android: orientation = "horizontal"> <EditText android: id = "@ + id/et_chat_message" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1" android: textSize = "14sp" android: background = "@ drawable/app_lvjian_rbtn_normal_background" android: gravity = "center | left" android: padding = "8dp"/> <Button android: id = "@ + id/btn_chat_message_send"> when it is finished, the following error occurs:
So it is time to set entries for ListView, which is the message we chat!
From the figure, we can see that we need to set two item files for the ListView (the position and direction of the Avatar and the bubble are different). The bubble must be. 9png, otherwise it will be distorted.
Item on the left:
<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "horizontal"> <ImageView android: id = "@ + id/ivicon" android: layout_width = "24dp" android: layout_height = "24dp" android: layout_gravity = "top" android: src = "@ drawable/app_lvjian_message_background"/> <TextView android: id = "@ + id/tvname" androi D: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_marginLeft = "8dp" android: layout_marginTop = "8dp" android: padding = "8dp" android: background = "@ drawable/app_lvjian_other_chat_background" android: text = "!!! "/> </LinearLayout>
Item on the right
<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "horizontal"> <TextView android: id = "@ + id/TV _chat_me_message" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_marginRight = "8dp" android: layout_marginTop = "8dp" android: layout_toLeftOf = "@ + id/iv_chat_imagr_right" android: background = "@ drawable/app_lvjian_chat_right" android: padding = "8dp" android: text = "Mark drug traffickers in the blacklist room, shot fifty times, go to "/> <ImageView android: id =" @ + id/iv_chat_imagr_right "android: layout_width =" 24dp "android: layout_height =" 24dp "android: layout_alignParentRight = "true" android: layout_gravity = "top" android: src = "@ drawable/app_lvjian_message_background"/> </RelativeLayout>
Next, set the Adapter for LiseView, including the name and chat content when sending the message. I encapsulated these elements into an entity class and pasted them first (which the Adapter will use ):
Package com. example. mychattext; public class PersonChat {/*** id */private int id;/*** name */private String name;/*** chat content */private String chatMessage; /***** @ return whether to send */private boolean isMeSend; public int getId () {return id;} public void setId (int id) {this. id = id;} public String getName () {return name;} public void setName (String name) {this. name = name;} public String getChatMessage () {return chatMessage;} public void setChatMessage (String chatMessage) {this. chatMessage = chatMessage;} public boolean isMeSend () {return isMeSend;} public void setMeSend (boolean isMeSend) {this. isMeSend = isMeSend;} public PersonChat (int id, String name, String chatMessage, boolean isMeSend) {super (); this. id = id; this. name = name; this. chatMessage = chatMessage; this. isMeSend = isMeSend;} public PersonChat () {super ();}}
When a custom Adapter loads a layout file, you need to determine which party sends the message to decide which item to use to layout the file. See Adapter:
Package com. example. mychattext; import java. util. list; import android. content. context; import android. view. view; import android. view. viewGroup; import android. widget. baseAdapter; import android. widget. textView; public class ChatAdapter extends BaseAdapter {private Context context; private List <PersonChat> lists; public ChatAdapter (Context context, List <PersonChat> lists) {super (); this. context = context; this. lists = lists;}/*** whether the message is sent by yourself ** @ author cyf **/public static interface IMsgViewType {int IMVT_COM_MSG = 0; // receive the recipient's message int IMVT_TO_MSG = 1; // The sent message} @ Overridepublic int getCount () {// TODO Auto-generated method stubreturn lists. size () ;}@ Overridepublic Object getItem (int arg0) {// TODO Auto-generated method stubreturn lists. get (arg0) ;}@ Overridepublic long getItemId (int arg0) {// TODO Auto-generated method stubreturn arg0;}/*** get the Item type, is the message sent by the other party or */public int getItemViewType (int position) {PersonChat entity = lists. get (position); if (entity. isMeSend () {// return IMsgViewType of the message received. IMVT_COM_MSG;} else {// return IMsgViewType. IMVT_TO_MSG ;}@ Overridepublic View getView (int arg0, View arg1, ViewGroup arg2) {// TODO Auto-generated method stubHolderView holderView = null; PersonChat entity = lists. get (arg0); boolean isMeSend = entity. isMeSend (); if (holderView = null) {holderView = new HolderView (); if (isMeSend) {arg1 = View. inflate (context, R. layout. chat_dialog_right_item, null); holderView. TV _chat_me_message = (TextView) arg1.findViewById (R. id. TV _chat_me_message); holderView. TV _chat_me_message.setText (entity. getChatMessage ();} else {arg1 = View. inflate (context, R. layout. chat_dialog_left_item, null);} arg1.setTag (holderView);} else {holderView = (HolderView) arg1.getTag ();} return arg1;} class HolderView {TextView TV _chat_me_message ;} @ Overridepublic boolean isEnabled (int position) {return false ;}}
The focus of distinguishing message senders is in the IMsgViewType, getItemViewType, and getView methods. The comments are very detailed and can be understood by everyone.
The last part is to comment out the detailed MAinActivity:
Package com. example. mychattext; import java. util. arrayList; import java. util. list; import android. app. activity; import android. OS. bundle; import android. OS. handler; import android. text. textUtils; import android. view. view; import android. view. view. onClickListener; import android. view. window; import android. widget. button; import android. widget. editText; import android. widget. listView; import android. widget. toast; public class MainActivity extends Activity {private ChatAdapter chatAdapter;/*** declare ListView */private ListView lv_chat_dialog; /*** Set */private List <PersonChat> personChats = new ArrayList <PersonChat> (); private Handler handler = new Handler () {public void handleMessage (android. OS. message msg) {int what = msg. what; switch (what) {case 1:/*** the ListView entry is controlled in the last row */lv_chat_dialog.setSelection (personChats. size (); break; default: break ;};};@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main);/*** Virtualize four senders */for (int I = 0; I <= 3; I ++) {PersonChat personChat = new PersonChat (); personChat. setMeSend (false); personChats. add (personChat);} lv_chat_dialog = (ListView) findViewById (R. id. lv_chat_dialog); Button btn_chat_message_send = (Button) findViewById (R. id. btn_chat_message_send); final EditText et_chat_message = (EditText) findViewById (R. id. et_chat_message);/*** setAdapter */chatAdapter = new ChatAdapter (this, personChats); lv_chat_dialog.setAdapter (chatAdapter ); /*** send button click event */btn_chat_message_send.setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View arg0) {// TODO Auto-generated method stubif (TextUtils. isEmpty (et_chat_message.getText (). toString () {Toast. makeText (MainActivity. this, "The sent content cannot be blank", 0 ). show (); return;} PersonChat personChat = new PersonChat (); // send personChat on your own. setMeSend (true); // get the message personChat. setChatMessage (et_chat_message.getText (). toString (); // Add the set personChats. add (personChat); // clear the input box et_chat_message.setText (""); // refresh the ListViewchatAdapter. notifyDataSetChanged (); handler. sendEmptyMessage (1 );}});}}
Source code connection: https://yunpan.cn/cS4CAwunXBfYt access password 82eb