Android fake QQ Bubble Chat interface

1. Now QQ, such as some app chat interface is the bubble chat interface, the left is received message, the right is sent message,

This effect is actually a ListView when loading its item, using a different layout XML file.

2. (where the Chat message box is using the. 9.png image):

3. Description of the ListView in the middle chat:

The XML file for the left item has the following effect: The XML file for the right item is as follows:

　　　　　　　　

4. In the load ListView, rewrite the GetView () method to make the item load which XML file by judging the message incoming type:

The custom adapter code is as follows:

1  Public classChatmsgviewadapterextendsBaseadapter {2     3     //the contents of the ListView view are determined by Imsgviewtype4      Public Static InterfaceImsgviewtype5     {6         //information sent by the other party7         intimvt_com_msg = 0;8         //the information you send yourself9         intImvt_to_msg = 1;Ten     } One      A     Private Static FinalString TAG = Chatmsgviewadapter.class. Getsimplename (); -     PrivateList<chatmsgentity>data; -     Privatecontext Context;  the     PrivateLayoutinflater Minflater; -  -      PublicChatmsgviewadapter (context context, list<chatmsgentity>data) { -          This. Context =context; +          This. data =data; -          +Minflater =Layoutinflater.from (context); A     } at  -     //get the number of items in a ListView -      Public intGetCount () { -         returndata.size (); -     } -  in     //Get Item -      PublicObject GetItem (intposition) { to         returnData.get (position); +     } -  the     //gets the ID of the item *      Public LongGetitemid (intposition) { $         returnposition;Panax Notoginseng     } -  the     //gets the type of the item +      Public intGetitemviewtype (intposition) { A         //TODO auto-generated Method Stub thechatmsgentity entity =Data.get (position); +           -          if(Entity.getmsgtype ()) $          { $              returnimsgviewtype.imvt_com_msg; -}Else{ -              returnimsgviewtype.imvt_to_msg; the          } -          Wuyi     } the  -     //gets the number of types of items Wu      Public intGetviewtypecount () { -         //TODO auto-generated Method Stub About         return2; $     } -      -     //Get View -      PublicView GetView (intposition, View Convertview, ViewGroup parent) { A          +chatmsgentity entity =Data.get (position); the         BooleanIscommsg =Entity.getmsgtype (); -              $Viewholder Viewholder =NULL;  the         if(Convertview = =NULL) the         { the               if(iscommsg) the               { -                   //if it is a message from the other side, the left bubble is displayed . inConvertview = Minflater.inflate (R.layout.chatting_item_msg_text_left,NULL); the}Else{ the                   //if it's your own message, the right bubble is displayed. AboutConvertview = Minflater.inflate (R.layout.chatting_item_msg_text_right,NULL); the               } the  theViewholder =NewViewholder (); +Viewholder.tvsendtime =(TextView) Convertview.findviewbyid (r.id.tv_sendtime); -Viewholder.tvusername =(TextView) Convertview.findviewbyid (r.id.tv_username); theViewholder.tvcontent =(TextView) Convertview.findviewbyid (r.id.tv_chatcontent);BayiViewholder.iscommsg =iscommsg; the                the Convertview.settag (viewholder); -}Else{ -Viewholder =(Viewholder) Convertview.gettag (); the         } the ViewHolder.tvSendTime.setText (Entity.getdate ()); the ViewHolder.tvUserName.setText (Entity.getname ()); the ViewHolder.tvContent.setText (Entity.gettext ()); -          the         returnConvertview; the     } the     94     //Display the contents of an item by Viewholder the     Static classViewholder { the          PublicTextView tvsendtime; the          PublicTextView Tvusername;98          PublicTextView tvcontent; About          Public BooleanIscommsg =true; -     }101     102}

5. To add more item when sending or receiving a message, such as adding item after sending

1chatmsgentity entity =Newchatmsgentity ();2 entity.setdate (GetDate ());3Entity.setname ("");4Entity.setmsgtype (false);5 Entity.settext (contstring);6 Mdataarrays.add (entity);7 madapter.notifydatasetchanged ();8Medittextcontent.settext ("");9Mlistview.setselection (Mlistview.getcount ()-1);

Add the contents of the data set referenced by the custom adpater, and then notify the adapter that the content has changed so that it modifies the interface itself.

The core content is the above.

SOURCE Download: Download

Android faux qq Bubble Chat interface