首页 > 代码库 > 【安卓笔记】气泡式ListView

【安卓笔记】气泡式ListView

2024-08-05 01:11:46   219人阅读

实现效果：


要想实现这个效果，我们需要找到气泡背景的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 = http://www.mamicode.com/new ArrayList<>();>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






【安卓笔记】气泡式ListView


联系
我们