【安卓筆記】氣泡式ListView

標籤：android   style   blog   http   io   ar   color   os   sp   

實現效果：

要想實現這個效果，我們需要找到氣泡背景的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<>();@Overridepublic void add(ChatMessage object){chatData.add(object);super.add(object);}@Overridepublic int getCount(){return chatData.size();}@Overridepublic ChatMessage getItem(int position){return chatData.get(position);}@Overridepublic 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;@Overrideprotected 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(){@Overridepublic void onClick(View v){sendChatMessage();//發送訊息}});lv.setTranscriptMode(AbsListView.TRANSCRIPT_MODE_ALWAYS_SCROLL);//註冊觀察者，資料改變時滑到底部adapter.registerDataSetObserver(new DataSetObserver(){@Overridepublic 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