【安卓笔记】气泡式ListView

实现效果：

要想实现这个效果，我们需要找到气泡背景的9.png图片，大家可以从qq微信等apk包中提取。

实现步骤:

1.编写布局文件。

每个条目的布局

activity_chat_singlemessage.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="wrap_content" >
    <LinearLayout
        android:id="@+id/singleMessageContainer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/singleMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dip"
            android:background="@drawable/bubble_b"
            android:paddingLeft="10dip"
            android:textSize="18sp"
            android:text="Hello bubbles!"
            android:textColor="@android:color/primary_text_light" />
    </LinearLayout>
</LinearLayout>

界面布局：

activity_main.xml

<?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:orientation="vertical" >
    <ListView
        android:id="@+id/listView1"
        android:divider="@null"
        android:listSelector="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="80dp" >
    </ListView>
    <RelativeLayout
        android:id="@+id/form"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:orientation="vertical" >
        <EditText
            android:id="@+id/chatText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_toLeftOf="@+id/buttonSend"
            android:ems="10"
            android:inputType="textMultiLine" />
        <Button
            android:id="@+id/buttonSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/chatText"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:text="Send" />
    </RelativeLayout>
</RelativeLayout>

2.编写业务数据类：

package com.example.chatbubble;
public class ChatMessage {//代表每条消息
	public boolean left;//是否在左边
	public String message;

	public ChatMessage(boolean left, String message)
	{
		super();
		this.left = left;
		this.message = message;
	}
}

3.编写适配器类

package com.example.chatbubble;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;
public class ChatArrayAdapter extends ArrayAdapter<ChatMessage>
{
	private TextView chatText;
	private LinearLayout container;
	private List<ChatMessage> chatData = new ArrayList<>();

	@Override
	public void add(ChatMessage object)
	{
		chatData.add(object);
		super.add(object);
	}

	@Override
	public int getCount()
	{
		return chatData.size();
	}

	@Override
	public ChatMessage getItem(int position)
	{
		return chatData.get(position);
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent)
	{
		if(convertView == null)
		{
			LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			convertView = inflater.inflate(R.layout.activity_chat_singlemessage,parent, false);
		}
		chatText = (TextView) convertView.findViewById(R.id.singleMessage);
		container = (LinearLayout) convertView.findViewById(R.id.singleMessageContainer);

		ChatMessage  msg = getItem(position);
		chatText.setText(msg.message);

		/*根据msg的内部left标识来判定应该选择什么背景,和位置(左/右)*/
		chatText.setBackgroundResource(msg.left ? R.drawable.bubble_b : R.drawable.bubble_a);
		container.setGravity(msg.left ? Gravity.LEFT : Gravity.RIGHT);

		return convertView;
	}

	public ChatArrayAdapter(Context context, int resource)
	{
		super(context, resource);
	}
}

4.编写主界面的代码：

package com.example.chatbubble;
import android.app.Activity;
import android.database.DataSetObserver;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AbsListView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
public class MainActivity extends Activity
{
	private ListView lv;
	private Button but;
	private EditText et;
	private ChatArrayAdapter adapter;
	private boolean side = false;
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		lv = (ListView) findViewById(R.id.listView1);
		but = (Button) findViewById(R.id.buttonSend);
		et = (EditText) findViewById(R.id.chatText);
		adapter = new ChatArrayAdapter(this,
				R.layout.activity_chat_singlemessage);
		lv.setAdapter(adapter);
		but.setOnClickListener(new OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				sendChatMessage();//发送消息
			}
		});

		lv.setTranscriptMode(AbsListView.TRANSCRIPT_MODE_ALWAYS_SCROLL);
		//注册观察者，数据改变时滑到底部
		adapter.registerDataSetObserver(new DataSetObserver()
		{
			@Override
			public void onChanged()
			{
				super.onChanged();
				lv.setSelection(adapter.getCount() - 1);
			}
		});
	}
	private boolean sendChatMessage()
	{
		/*add方法内部会调用notifyDataSetChanged方法，故我们不需要手动调用!*/
		adapter.add(new ChatMessage(side, et.getText().toString()));
		/*清空数据*/
		et.setText("");
		side = !side;
		return true;
	}
}

效果完成！

源码地址：https://github.com/Rowandjj/BubbleStyleListViewDemo