【安卓笔记】气泡式ListView
栏目：综合技术时间：2014-12-16 08:34:59
实现效果：
要想实现这个效果，我们需要找到气泡背景的9.png图片，大家可以从qq微信等apk包中提取。
实现步骤:
1.编写布局文件。
每一个条目的布局
activity_chat_singlemessage.xml
<?xml version="1.0" encoding="utf⑻"?>
<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⑻"?>
<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
------分隔线----------------------------
------分隔线----------------------------