【安卓笔记】气泡式ListView

来源：互联网发布：适合程序员的机械键盘编辑：程序博客网时间：2024/05/18 00:51

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

实现步骤:

1.编写布局文件。

每个条目的布局

activity_chat_singlemessage.xml

[java] view plaincopy
<?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

[java] view plaincopy
<?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.编写业务数据类：

[java] view plaincopy
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.编写适配器类

[java] view plaincopy
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.编写主界面的代码：

[java] view plaincopy
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;  
    }  
}  

效果完成！

0 0