Micro-Letter Chat window information effect similar to the SMS effect on the iphone, in the form of bubbles, on Android, to achieve this effect is mainly used ListView and Baseadapter, with the layout and related materials, you can make this effect, The material can be the next micro-letter apk, and then the suffix name into a zip, direct decompression, you can get the micro-letter inside all the material. First look at the results I have achieved:
The following is the structure of the engineering directory：
The next step is how to implement the code for this effect:
Main.xml, this is the main layout file, showing the ListView and the upper and lower parts of the content.
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:background= "#f0f0e0" >
<relativelayout
Android:id= "@+id/rl_top"
Android:layout_width= "Fill_parent"
Android:layout_alignparenttop= "true"
android:layout_height= "Wrap_content" >
<textview
Android:layout_width= "Fill_parent"
android:layout_height= "44DP"
android:gravity= "Center"
Android:textsize= "18SP"
Android:background= "#486a9a"
Android:textcolor= "@android: Color/white"
android:text= "Chat"/>
</RelativeLayout>
<relativelayout
Android:id= "@+id/rl_bottom"
Android:layout_alignparentbottom= "true"
Android:layout_width= "Fill_parent"
Android:background= "#486a9a"
android:paddingtop= "5DP"
android:layout_height= "Wrap_content" >
<button
Android:id= "@+id/btn_send"
Android:layout_width= "70DP"
android:layout_height= "50DP"
Android:layout_alignparentright= "true"
Android:layout_centervertical= "true"
android:layout_marginright= "10DP"
android:text= "Send"/>
<edittext
Android:id= "@+id/et_content"
Android:layout_width= "Fill_parent"
android:layout_height= "50DP"
Android:layout_centervertical= "true"
android:layout_marginleft= "10DP"
android:layout_marginright= "10DP"
android:layout_toleftof= "@id/btn_send"
Android:textsize= "16sp"/>
</RelativeLayout>
<listview
Android:id= "@+id/listview"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
Android:layout_above= "@id/rl_bottom"
android:layout_below= "@id/rl_top"
android:layout_marginleft= "10DP"
android:layout_marginright= "10DP"
android:layout_margintop= "10DP"
Android:cachecolorhint= "#00000000"
Android:divider= "@null"
Android:listselector= "#00000000"
android:dividerheight= "3DP"
android:scrollbars= "None"/>
</RelativeLayout>
Then there are two types of item layout files in ListView, which is the item effect of receiving information and the item effect of sending information.
Chat_from_item.xml is the item layout for receiving information：
Copy Code code 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:orientation= "Vertical"
Android:paddingbottom= "5DP"
android:layout_height= "Wrap_content" >
<textview
Android:id= "@+id/tv_time"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:layout_gravity= "Center_horizontal"
Android:background= "#bfbfbf"
android:paddingtop= "2DP"
Android:paddingbottom= "2DP"
android:paddingleft= "4DP"
android:paddingright= "4DP"
Android:textcolor= "#ffffff"
Android:textsize= "12SP"/>
<relativelayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_margintop= "5DP" >
<imageview
Android:id= "@+id/iv_user_image"
Android:layout_width= "50DP"
android:layout_height= "50DP"
Android:layout_alignparentleft= "true"
Android:layout_alignparenttop= "true"
android:background= "@drawable/mypic"
Android:focusable= "false"/>
<textview
Android:id= "@+id/tv_content"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:layout_marginleft= "5DP"
android:layout_torightof= "@+id/iv_user_image"
android:background= "@drawable/CHATFROM_BG"
Android:gravity= "Left|center"
Android:clickable= "true"
Android:focusable= "true"
Android:linespacingextra= "2DP"
android:minheight= "50DP"
Android:textcolor= "#ff000000"
Android:textsize= "14sp"/>
</RelativeLayout>
</LinearLayout>
Chat_to_item.xml is the layout of the Send information item：
Copy Code code 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:orientation= "Vertical"
Android:paddingbottom= "5DP"
android:layout_height= "Wrap_content" >
<textview
Android:id= "@+id/tv_time"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
Android:background= "#bfbfbf"
Android:layout_gravity= "Center_horizontal"
android:paddingtop= "2DP"
Android:paddingbottom= "2DP"
android:paddingleft= "4DP"
android:paddingright= "4DP"
Android:textcolor= "#ffffff"
Android:textsize= "12SP"/>
<relativelayout
Android:layout_width= "Fill_parent"
android:layout_height= "Wrap_content"
android:layout_margintop= "5DP" >
<imageview
Android:id= "@+id/iv_user_image"
Android:layout_width= "50DP"
android:layout_height= "50DP"
Android:layout_alignparentright= "true"
Android:layout_alignparenttop= "true"
android:background= "@drawable/mypic"
Android:focusable= "false"/>
<textview
Android:id= "@+id/tv_content"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:layout_marginright= "5DP"
android:layout_toleftof= "@+id/iv_user_image"
android:background= "@drawable/CHATTO_BG"
Android:gravity= "Left|center"
Android:clickable= "true"
Android:focusable= "true"
Android:linespacingextra= "2DP"
Android:textcolor= "#ff000000"
Android:textsize= "14sp"/>
</RelativeLayout>
</LinearLayout>
Create a new entity class after layout is complete Chatentity.java：
Copy Code code as follows:
public class Chatentity {
private int userimage;
Private String content;
Private String Chattime;
Private Boolean iscomemsg;
public int getuserimage () {
return userimage;
}
public void setuserimage (int userimage) {
This.userimage = Userimage;
}
Public String getcontent () {
return content;
}
public void SetContent (String content) {
this.content = content;
}
Public String Getchattime () {
return chattime;
}
public void Setchattime (String chattime) {
This.chattime = Chattime;
}
public Boolean iscomemsg () {
return iscomemsg;
}
public void Setcomemsg (Boolean iscomemsg) {
This.iscomemsg = iscomemsg;
}
}
The last is the main activity, which includes the baseadapter of his own writing .：
Copy Code code as follows:
public class Chatdemoactivity extends activity {
Private Button Sendbutton = null;
Private EditText contentedittext = null;
Private ListView Chatlistview = null;
Private list<chatentity> chatlist = null;
Private Chatadapter chatadapter = null;
@Override
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Requestwindowfeature (Window.feature_no_title);
Setcontentview (R.layout.main);
Contentedittext = (edittext) This.findviewbyid (r.id.et_content);
Sendbutton = (Button) This.findviewbyid (r.id.btn_send);
Chatlistview = (ListView) This.findviewbyid (R.id.listview);
Chatlist = new arraylist<chatentity> ();
Chatentity chatentity = null;
for (int i = 0; i < 2; i++) {
chatentity = new Chatentity ();
if (i% 2 = 0) {
Chatentity.setcomemsg (FALSE);
Chatentity.setcontent ("Hello");
Chatentity.setchattime ("2012-09-20 15:12:32");
}else {
Chatentity.setcomemsg (TRUE);
Chatentity.setcontent ("Hello,nice to meet you!");
Chatentity.setchattime ("2012-09-20 15:13:32");
}
Chatlist.add (chatentity);
}
Chatadapter = new Chatadapter (this,chatlist);
Chatlistview.setadapter (Chatadapter);
Sendbutton.setonclicklistener (New Onclicklistener () {
@Override
public void OnClick (View v) {
if (!contentedittext.gettext (). toString (). Equals ("")) {
Send a message
Send ();
}else {
Toast.maketext (Chatdemoactivity.this, "Content is Empty", Toast.length_short). Show ();
}
}
});
}
private void Send () {
Chatentity chatentity = new chatentity ();
Chatentity.setchattime ("2012-09-20 15:16:34");
Chatentity.setcontent (Contentedittext.gettext (). toString ());
Chatentity.setcomemsg (FALSE);
Chatlist.add (chatentity);
Chatadapter.notifydatasetchanged ();
Chatlistview.setselection (Chatlist.size ()-1);
Contentedittext.settext ("");
}
Private class Chatadapter extends baseadapter{
private context = NULL;
Private list<chatentity> chatlist = null;
Private Layoutinflater inflater = null;
private int come_msg = 0;
private int to_msg = 1;
Public Chatadapter (Context context,list<chatentity> chatlist) {
This.context = context;
This.chatlist = chatlist;
Inflater = Layoutinflater.from (This.context);
}
@Override
public int GetCount () {
return Chatlist.size ();
}
@Override
Public Object getitem (int position) {
return Chatlist.get (position);
}
@Override
public long getitemid (int position) {
return position;
}
@Override
public int Getitemviewtype (int position) {
Distinguish between two types of view, labeled two different variables to represent each type
chatentity entity = chatlist.get (position);
if (Entity.iscomemsg ())
{
return come_msg;
}else{
return to_msg;
}
}
@Override
public int Getviewtypecount () {
This method returns 1 by default, if you want ListView's item to be the same, return 1, we have two styles here, return 2
return 2;
}
@Override
Public View GetView (int position, View Convertview, ViewGroup parent) {
Chatholder chatholder = null;
if (Convertview = = null) {
Chatholder = new Chatholder ();
if (Chatlist.get (position). Iscomemsg ()) {
Convertview = inflater.inflate (R.layout.chat_from_item, NULL);
}else {
Convertview = inflater.inflate (R.layout.chat_to_item, NULL);
}
Chatholder.timetextview = (TextView) Convertview.findviewbyid (r.id.tv_time);
Chatholder.contenttextview = (TextView) Convertview.findviewbyid (r.id.tv_content);
Chatholder.userimageview = (ImageView) Convertview.findviewbyid (r.id.iv_user_image);
Convertview.settag (Chatholder);
}else {
Chatholder = (Chatholder) convertview.gettag ();
}
ChatHolder.timeTextView.setText (Chatlist.get (position). Getchattime ());
ChatHolder.contentTextView.setText (Chatlist.get (position). GetContent ());
ChatHolder.userImageView.setImageResource (Chatlist.get (position). Getuserimage ());
return convertview;
}
Private Class chatholder{
Private TextView Timetextview;
Private ImageView Userimageview;
Private TextView Contenttextview;
}
}
}
Friends interested in Android&ios can join our discussion QQ Group, where we only discuss dry goods:
iOS Group: 220223507
Android Group: 282552849
Game Development Forum: http://jiushun8.com/forum.php?mod=viewthread&tid=4371&extra=page%3D1
