高仿微信气泡聊天

下面想看看效果图

第一张效果图是打开就出现的效果，第二张效果图是发送之后的效果图。

源代码下载：点击下载

下面对实现细节说明一下，附带代码

在Activity的布局文件中，包括3个部分，标题的布局，中间的ListView，下面的发送部分。下面是布局文件main.xml的代码：

<?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="幻影刺客" />

    </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="发送"
            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>

这个布局文件没什么难的，难的是接下来的ListView的布局文件，分别定义两个ListView的布局文件，分别表示在左边聊天的人和在右边聊天的人。左边的布局layout_left.xml如下：

<?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>

右边的布局文件layout_right.xml如下：

<?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>

在这里有一点很重要，聊天内容的背景图片的格式一定要是9.png，对于这种格式的图片有个特点，就是聊天的内容多的话不会拉伸而不会失真。

 

接着就是聊天内容的数据定义，是一个封装类，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;
	}
	

}

 

 

接下来是自定义BaseAdapter的MyAdapter.java文件：

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;
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return al.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return (ChatInfo)al.get(position);
	}

	@Override
	public long getItemId(int position) {
		
		return position;
	}

	@Override
	public 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;
			}
			
			
			
			
		
		
	}

}

接下来是主要的代码，在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.BaseAdapter;
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("2012-11-7 17:35:12","hf","dota吗？");
        al.add(ci);
        
        ci=new ChatInfo("2012-11-7 17:35:40","pa","dao起");
        al.add(ci);
        
        ci=new ChatInfo("2012-11-7 17:36:10","hf","哪个房间？");
        al.add(ci);
        
        ci=new ChatInfo("2012-11-7 17:36:10","pa","盛大dota联赛1房");
        al.add(ci);
        
        ci=new ChatInfo("2012-11-7 17:36:30","hf","好");
        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);
        
        
        
        
    }
	@Override
	public 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());
		
	}
	
}

 

每次数据改变了，使用lv.setSelection(lv.getCount()-1);将ListView显示最后的一项数据。

 

在真正的聊天过程中，数据都是联网获取的。