High imitation WeChat bubble chat

Next I want to see

The first one is the effect of opening, and the second one is after sending.

Source code download: Click to download

The implementation details are described below, with the code

The activity layout file contains three parts: the title layout, the listview in the middle, and the sending part below. The code for layout file main. XML is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: Background = "@ color/White" Android: orientation = "vertical"> <relativelayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: Background = "@ color/blacktitle"> <button Android: id = "@ + ID/btnback" Android: textcolor = "# ffffff" Android: layout_alignparentleft = "true" Android: layout_centervertical = "true" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: Background = "@ drawable/btn_back" Android: text = ""/> <textview Android: Id = "@ + ID/textview1" Android: textcolor = "# ffffff" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_centervertical = "true" Android: layout_centerhorizontal = "true" Android: textsize = "18sp" Android: text = "Phantom Assassin"/> </relativelayout> <listview Android: Id = "@ + ID/listview1" Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1" Android: cachecolorhint = "#00000000" Android: divider = "@ null" Android: scrollbars = "NONE"> </listview> <relativelayout Android: layout_width = "match_parent" Android: layout_height = "wrap_content" Android: background = "@ color/xiamian"> <button Android: Id = "@ + ID/btnfasong" Android: text = "send" Android: layout_centervertical = "true" Android: layout_margintop = "1dip" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_alignparentright = "true"/> <edittext Android: id = "@ + ID/ET" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_margintop = "1dip" Android: layout_toleftof = "@ ID/btnfasong" Android: layout_centervertical = "true" Android: layout_alignparentleft = "true"/> </relativelayout> </linearlayout>

This layout file is not difficult. What is difficult is the layout file of the next listview, which defines two layout files for listview respectively, indicating the chat on the left and the chat on the right. Layout_left.xml on the left is as follows:

<?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="@color/white"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="vertical" >        <TextView            android:id="@+id/tvdateandtime"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="TextView"            android:textColor="@color/textcolor" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="vertical" >            <ImageView                android:id="@+id/ivicon"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/haofang" />            <TextView                android:id="@+id/tvname"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="TextView"                android:textColor="@color/textcolor" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:id="@+id/tvcontent"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/imageleft"                android:text="TextView"                android:textColor="@color/textcolor" />        </LinearLayout>    </LinearLayout></LinearLayout>

The layout file layout_right.xml on the right is as follows:

<?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="@color/white"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="vertical" >        <TextView            android:id="@+id/tvdateandtime"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="TextView"            android:textColor="@color/textcolor" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="right"            android:orientation="vertical" >            <TextView                android:id="@+id/tvcontent"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/imageright"                android:text="TextView"                android:textColor="@color/textcolor" />        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="vertical" >            <ImageView                android:id="@+id/ivicon"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/pa" />            <TextView                android:id="@+id/tvname"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="TextView"                android:textColor="@color/textcolor" />        </LinearLayout>    </LinearLayout></LinearLayout>

Here, there is a lot of attention. The format of the internal background image must be 9.png. For images in this format, there is a feature that the chat content is not stretched and not distorted.

 

The next step is the data definition of chat content, which is an encapsulation class, chatinfo. Java

package com.zhycheng.popchat;public class ChatInfo {String time;String name;String content;public ChatInfo(String time, String name, String content) {super();this.time = time;this.name = name;this.content = content;}public String getTime() {return time;}public void setTime(String time) {this.time = time;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}}

 

 

The following is the myadapter. Java file of the custom baseadapter:

package com.zhycheng.popchat;import java.util.ArrayList;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;public class MyAdapter extends BaseAdapter{ArrayList al;Context c;public MyAdapter(Context c,ArrayList al){this.al=al;this.c=c;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn al.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn (ChatInfo)al.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View v=null;LayoutInflater li=LayoutInflater.from(c);if(((ChatInfo)al.get(position)).getName().equals("pa")){v=li.inflate(R.layout.layout_right, null);((TextView)v.findViewById(R.id.tvdateandtime)).setText(((ChatInfo)al.get(position)).getTime());((TextView)v.findViewById(R.id.tvname)).setText(((ChatInfo)al.get(position)).getName());((TextView)v.findViewById(R.id.tvcontent)).setText(((ChatInfo)al.get(position)).getContent());return v;}else{v=li.inflate(R.layout.layout_left, null);((TextView)v.findViewById(R.id.tvdateandtime)).setText(((ChatInfo)al.get(position)).getTime());((TextView)v.findViewById(R.id.tvname)).setText(((ChatInfo)al.get(position)).getName());((TextView)v.findViewById(R.id.tvcontent)).setText(((ChatInfo)al.get(position)).getContent());return v;}}}

Next is the main code. In the activity,

 

Package COM. zhycheng. popchat; import Java. text. simpledateformat; import Java. util. arraylist; import Java. util. date; import android. app. activity; import android. content. context; import android. OS. bundle; import android. view. layoutinflater; import android. view. view; import android. view. view. onclicklistener; import android. view. viewgroup; import android. view. inputmethod. inputmethodmanager; import android. widget. B Aseadapter; import android. widget. button; import android. widget. edittext; import android. widget. listview; import android. widget. textview; public class popchatactivity extends activity implements onclicklistener {listview lv; baseadapter BA; arraylist al; edittext et; button B, btnback; Public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); Al = new Arraylist (); btnback = (button) findviewbyid (R. Id. btnback); chatinfo CI = new chatinfo ("17:35:12", "HF", "Dota? "); Al. add (CI); CI = new chatinfo ("17:35:40", "Pa", "Dao"); Al. add (CI); CI = new chatinfo ("17:36:10", "HF", "Which room? "); Al. add (CI); CI = new chatinfo ("17:36:10", "Pa", "Grand Dota League Room 1"); Al. add (CI); CI = new chatinfo ("17:36:30", "HF", "good"); Al. add (CI); ET = (edittext) findviewbyid (R. id. et); B = (button) findviewbyid (R. id. btnfasong); B. setonclicklistener (this); btnback. setonclicklistener (this); Lv = (listview) findviewbyid (R. id. listview1); BA = new myadapter (this, Al); LV. setadapter (BA); LV. setselection (LV. getcount ()-1) ;}@ overridepublic void onclick (view v) {If (v. GETID () = R. id. btnfasong) {inputmethodmanager Imm = (inputmethodmanager) This. getsystemservice (context. input_method_service); Imm. hidesoftinputfromwindow (ET. getwindowtoken (), 0); string STR = et. geteditabletext (). tostring (); chatinfo CII = new chatinfo (getcurrenttime (), "Pa", STR); Al. add (CII); system. out. println ("----------------------- >>>>" + Str); BA. notifydatasetchanged (); et. settext (""); LV. setselection (LV. getcount ()-1);} If (v. GETID () = R. id. btnback) {This. finish () ;}} string getcurrenttime () {simpledateformat format = new simpledateformat ("yyyy-mm-dd hh: mm: SS"); Return format. format (new date ());}}

 

Each time the data changes, use LV. setselection (LV. getcount ()-1); display the last data item in listview.

 

In the real chat process, data is obtained online.