Similar to WeChat and QQ chat interfaces, private message dialog effects and private message Interfaces

Source: Internet
Author: User

Effect of private message dialog on the imitation and QQ chat interfaces and private messages on the interfaces

We may all have seen the effects of chat pages when we use the social Android software. Some people say that the bubble effect is similar, right? How can we achieve that effect ??

Click here to enter her sister-in-law

Click here to download the source code

This is the effect: There are portraits, chat time, chat content, send information and so on; in fact, her idea is very simple, I also spent a few hours! Well, let's have a detailed chat! First look at the source code: Project entry MainActivity. java:

Public class MainActivity extends Activity {private comment list <PeopleStudentBean> sList = null; private comment list <PeopleTeacherBean> tList = null; private comment list <Bean> beans = null; /** chat message format */private ListView listView;/** information editing box */private EditText edt;/** message sending Button */private Button btnEnter; private CustomAdapter adapter; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. oncres Ate (savedInstanceState); sList = new consumer list <lelestudentbean> (); tList = new consumer list <leleteacherbean> (); beans = new consumer list <Bean> (); string [] msg = new String [] {"Hello! "," Are you also working in Jinxiang? "," I swept the street in Tiananmen Square. It's quite comfortable! "," You also refined this job. I am still recruiting people here. Are you coming? Come on, let me say a word! "," Haha, hello! "," Yes, where are you? "," Hey, what's so cheap ?!, Why didn't I meet it. "," Well, good. Wait for me... "}; // 0 indicates the instructor; 1 indicates the student for (int I = 0; I <4; I ++) {sList. add (new PeopleStudentBean (msg [I], R. drawable. you, "", 1); tList. add (new PeopleTeacherBean (msg [I + 4], R. drawable. me, "", 0);} // put it in the same class set Bean for (int j = 0; j <sList. size (); j ++) {beans. add (sList. get (j); beans. add (tList. get (j);} setContentView (R. layout. activity_main); initViewsMethod (); onHandleMethod ();}/** process the listView item method */private void I NitViewsMethod () {listView = (ListView) findViewById (R. id. lvMessages); edt = (EditText) findViewById (R. id. edt); btnEnter = (Button) findViewById (R. id. enter); listView. setOnCreateContextMenuListener (new OnCreateContextMenuListener () {@ Overridepublic void onCreateContextMenu (ContextMenu menu, View v, ContextMenuInfo menuInfo) {// TODO Auto-generated method stubmenu. setHeaderTitle ("prompt:"); menu. setHeaderIco N (android. r. drawable. stat_policy_error); menu. add (0, 0, 1, "delete"); menu. add (1, 1, 0, "cancel") ;}}) ;}/ ** method for processing sent information */public void onHandleMethod () {adapter = new CustomAdapter (this, beans); listView. setAdapter (adapter); btnEnter. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubString txt = edt. getText (). toString (); if (null = txt) Toast. makeText (g EtApplicationContext (), "The sent content cannot be blank! ", Toast. LENGTH_SHORT ). show (); adapter. additempolicichange (new Bean (txt, R. drawable. me, new Date () + "", 0); edt. setText (""); listView. setSelection (beans. size ()-1) ;}}) ;}@ Overridepublic boolean onContextItemSelected (MenuItem item) {// TODO Auto-generated method stubswitch (item. getItemId () {case 0: Toast. makeText (getApplicationContext (), "deleted successfully", Toast. LENGTH_SHORT ). show (); AdapterContextMenuInfo = (AdapterContextMenuInfo) item. getMenuInfo (); Bean bean Bean = (Bean) adapter. getItem (info. position); beans. remove (bean); adapter. yydatasetchanged (); break;} return super. onContextItemSelected (item );}
CustomAdapter. java:
Public class CustomAdapter extends BaseAdapter {private comment list <Bean> beans = null; private LayoutInflater li; private final int ITEM_TYPES = 2, TYPE_0 = 0, TYPE_1 = 1; public CustomAdapter (Context context, required list <Bean> beans) {// TODO Auto-generated constructor stubthis. beans = beans; li = LayoutInflater. from (context) ;}@ Overridepublic int getCount () {// TODO Auto-generated method stubreturn beans. size () ;}@ Overridepublic Object getItem (int position) {// TODO Auto-generated method stubreturn beans. get (position) ;}@ Overridepublic long getItemId (int position) {// TODO Auto-generated method stubreturn position ;}@ Overridepublic int getViewTypeCount () {// TODO Auto-generated method stubreturn ITEM_TYPES;} @ Overridepublic int getItemViewType (int position) {// TODO Auto-generated method stubint tp = beans. get (position ). getId (); if (TYPE_0 = tp) return TYPE_0; else if (TYPE_1 = tp) return TYPE_1; return TYPE_0 ;}@ Overridepublic View getView (int position, View convertView, viewGroup parent) {// TODO Auto-generated method stubPeopleView s = null; Bean bean = beans. get (position); int type = getItemViewType (position); if (null = convertView) {s = new PeopleView (); switch (type) {case TYPE_0: convertView = li. inflate (R. layout. listview_item_teacher, null); break; case TYPE_1: convertView = li. inflate (R. layout. listview_item_student, null); break;} s. time = (TextView) convertView. findViewById (R. id. time); s. message = (TextView) convertView. findViewById (R. id. msg); s. portrait = (ImageView) convertView. findViewById (R. id. img); convertView. setTag (s);} elses = (PeopleView) convertView. getTag (); s. time. setText (DateFomats. getCurrentTime (new Date (). getTime (); s. message. setText (bean. gettMessage (); s. portrait. setImageResource (R. drawable. you); return convertView;} class PeopleView {TextView time; TextView message; ImageView portrait;}/** add private message content, update list */public void additempolicichange (Bean bean) {beans. add (bean); notifyDataSetChanged ();}}

I think you can see the clues from the code. Her implementation idea is to use ListView to make changes to its item layout display in ListView. That is to say, two la s are used for items in the Listview, and the user Id is used to determine that different IDs correspond to different chat la S. Then, the page is displayed in chronological order (of course, this is provided by the background, you do not need to do anything, but add the layout here). To achieve high efficiency, when creating the item layout, the two types of layout IDs of the control use the same set. This is the key point. In this way, the ListView can be optimized during Layout initialization. Also note that you need to rewrite the method in the adapter:
getViewTypeCount()
And rewrite method:
 getItemViewType(int position)
The number of returned values in the first method table above indicates the number of item layout types corresponding to the ListView. That is, each time the dialog information is loaded, getView (int position, view convertView, ViewGroup parent); Method times. If it is filled with the original normal ListView adapter, there are now two item la s to show the effect of the conversation every two getView () the method is equivalent to a normal ListView adaptation method, so that we can display the effects of different layout items we want. The second method uses the position parameter to process and determine the user id, and returns the value of the type corresponding to the custom Layout type or user id (this is set by ourselves ), then, in the getView () method, obtain the value we set corresponding to different layout types to judge. At this time, we should display the itme layout and initialize the layout;

In addition, the items corresponding to ListView; if you want to delete long-pressed, you need to implement its listening

listView.setOnCreateContextMenuListener(new OnCreateContextMenuListener() 
And the method that must be implemented by the listener; and rewrite the callback method to process the clicked item.
  @Overridepublic boolean onContextItemSelected(MenuItem item)
By the way:
Menu. add (0, 0, 1, "delete ");

The first int type group ID parameter represents the group concept. You can group several menu items to better manage your menu buttons in a group. The item ID parameter of the second int type represents the project number. This parameter is very important. An item ID corresponds to an option in a menu. This item ID is used to determine which option you are using when using the menu later. The third 'order id' parameter of 'int' type represents the order in which menu items are displayed. The default value is 0, indicating that the display order of the menu is displayed according to the display order of add. The fourth String type title parameter, indicating the text displayed in the option.





The new QQ chat window is a style. How can I retrieve the original interface?

"Open System settings" -- select "session window" -- deselect "chat with colorful bubbles"




Q: Can I use two people to chat about content, conversations, and videos on Weibo? Can anyone see them?

No. In addition to intercommunication, text messages can also be sent. It's similar to chatting with QQ. No one else can see the content,

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.