【安卓筆記】氣泡式ListView
來源：程序員人生 發布時間：2014-12-16 08:34:59 閱讀次數：3347次
實現效果：
要想實現這個效果，我們需要找到氣泡背景的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
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
