android:ListView bbs Demo

標籤：

我們制 作的 message_left.9.png 可以作為收到訊息的背景圖，那麼毫無疑問你還需要再製作一張 message_right.9.png 作為發出訊息的背景圖。

圖片都提供好了之後就可以開始編碼了，首先還是編寫主介面，修改 activity_main.xml

中的代碼，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:android1="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#d8e0e8"    android:orientation="vertical" >    <ListView        android1:id="@+id/msg_list_view"        android1:layout_width="match_parent"        android1:layout_height="0dp"         android:layout_weight="1"        android:divider="#0000"        >    </ListView>    <LinearLayout        android1:layout_width="match_parent"        android:layout_height="wrap_content" >                <EditTextandroid:id="@+id/input_text"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:hint="Type somthing here"android:maxLines="2" />                <Buttonandroid:id="@+id/send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Send" />            </LinearLayout></LinearLayout>

　　

這裡在主介面中放置了一個 ListView 用於顯示聊天的訊息內容，又放置了一個 EditText 用於輸入訊息，還放置了一個 Button 用於發送訊息。ListView 中用到了一個 android:divider 屬性，它可以指定 ListView 分隔線的顏色，這裡#0000 表示將分隔線設為透明色。其他用到 的所有屬性都是我們之前學過的，相信你理解起來應該不費力。

然後我們來定義訊息的實體類，建立 Msg，代碼如下所示：

package com.example.uibestpractice;//defined message classpublic class Msg {        //message content    private String content;    //message type     private int type;        //defined message type value    public static final int TYPE_RECEIVE = 0;    public static final int TYPE_SEND = 1;            //defined constructor    public Msg(String content , int type){                this.content = content;        this.type = type;            }            //function use to getcontent    public String getContent(){                return content;            }        //function use to gettype    public int getType(){                return type;    }        }

Msg 類中只有兩個欄位，content 表示訊息的內容，type 表示訊息的類型。其中訊息類型 有兩個值可選，TYPE_RECEIVED 表示這是一條收到的訊息，TYPE_SENT 表示這是一條發 出的訊息。

接著來編寫 ListView 子項的布局，建立 msg_item.xml，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="10dp" >    <LinearLayout        android:id="@+id/left_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="left"        android:background="@drawable/message_left" >        <TextViewandroid:id="@+id/left_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#fff" /></LinearLayout>     <LinearLayout         android:id="@+id/right_layout"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="right"         android:background="@drawable/message_right" >        <TextView            android:id="@+id/right_msg"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_margin="10dp"            android:textColor="#fff" />        </LinearLayout>    </LinearLayout>

　　

這裡我們讓收到的訊息居靠左對齊，發出的訊息居靠右對齊，並且分別使用 message_left.9.png

和 message_right.9.png 作為背景圖。你可能會有些疑慮，怎麼能讓收到的訊息和發出的訊息 都放在同一個布局裡呢？不用擔心，還記得我們前面學過的可見屬性嗎，只要稍後在代碼中 根據訊息的類型來決定隱藏和顯示哪種訊息就可以了。

接下來需要建立 ListView 的適配器類，讓它繼承自 ArrayAdapter，並將泛型指定為 Msg

類。建立類 MsgAdapter，代碼如下所示：

package com.example.uibestpractice;import java.util.List;import android.content.Context;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 MsgAdapter extends ArrayAdapter<Msg> {    private int resourceId;        //context,listview sub item layoutid, listview data    public MsgAdapter(Context context, int textViewResourceId,            List<Msg> objects) {        super(context, textViewResourceId, objects);        // TODO Auto-generated constructor stub                resourceId = textViewResourceId;            }            @Override    public View getView(int position, View convertView, ViewGroup parent) {        // TODO Auto-generated method stub        //return super.getView(position, convertView, parent);                //get current item Msg        Msg msg = getItem(position);                //through LayoutInflater for current sub item  load layout;        if(convertView == null){                        convertView = LayoutInflater.from(getContext()).inflate(resourceId, parent,false);                    }                //though viewhoder model to optimization listview                //get layout object        LinearLayout leftLinearLayout = ViewHolder.get(convertView, R.id.left_layout);        LinearLayout rightLinearLayout = ViewHolder.get(convertView, R.id.right_layout);                //though msg object type set linearlayout is visible        if(msg.getType() == Msg.TYPE_RECEIVE){                        //this is receive message , show left linearlayout and hide right linearlayout            leftLinearLayout.setVisibility(View.VISIBLE);            rightLinearLayout.setVisibility(View.GONE);                        //show receive message content            TextView leftTextView = ViewHolder.get(convertView, R.id.left_msg);            leftTextView.setText(msg.getContent());                    }        else if(msg.getType() == msg.TYPE_SEND){                        //this is send message , show right linearlayout and hide right linearlayout            leftLinearLayout.setVisibility(View.GONE);            rightLinearLayout.setVisibility(View.VISIBLE);                        //show receive message content            TextView rightTextView = ViewHolder.get(convertView, R.id.right_msg);            rightTextView.setText(msg.getContent());                    }                return convertView;            }        }

以上代碼你應該是非常熟悉了，和我們學習 ListView 那一節的代碼基本是一樣的，只不 過在 getView()方法中增加了對訊息類型的判斷。如果這條訊息是收到的，則顯示左邊的消 息布局，如果這條訊息是發出的，則顯示右邊的訊息布局。

最後修改 MainActivity 中的代碼，來為 ListView 初始化一些資料，並給發送按鈕加入事 件響應，代碼如下所示：

package com.example.uibestpractice;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.Window;import android.widget.Button;import android.widget.EditText;import android.widget.ListView;public class MainActivity extends Activity {            private List<Msg> msgList = new ArrayList<Msg>();        private MsgAdapter msgAdapter ;        //defined message edittext control    private EditText editText;        //defined send button control    private Button sendButton;        //defined listview control;    private ListView listView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //hide app title        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);                //init message data        initMsgs();                //init MsgAdapter        msgAdapter = new MsgAdapter(MainActivity.this, R.layout.msg_item, msgList);                //get layout control        editText = (EditText)findViewById(R.id.input_text);        sendButton = (Button)findViewById(R.id.send);        listView = (ListView)findViewById(R.id.msg_list_view);                //give listview control set adapter;        listView.setAdapter(msgAdapter);                //set sendbutton onclick event        sendButton.setOnClickListener(new View.OnClickListener() {                        @Override            public void onClick(View v) {                // TODO Auto-generated method stub                                //set listview control to show input message content                                String content = editText.getText().toString();                                //if content is not null                if(content.length() > 0){                                        //init msg object                    Msg msg = new Msg(content, Msg.TYPE_SEND);                                        //add msg object to msglist data                    msgList.add(msg);                                        //if new message is send, refresh listview control                    msgAdapter.notifyDataSetChanged();                                        //position to the listview last line                    listView.setSelection(msgList.size());                                        //clear input text content                    editText.setText("");                                    }                                            }        });                    }            //init message data    private void initMsgs(){                Msg msg1 = new Msg("Hello guy.", Msg.TYPE_RECEIVE);        msgList.add(msg1);        Msg msg2 = new Msg("Hello. Who is that?", Msg.TYPE_SEND);        msgList.add(msg2);        Msg msg3 = new Msg("This is Tom. Nice talking to you. ", Msg.TYPE_RECEIVE);        msgList.add(msg3);                }    }

在 initMsgs()方法中我們先初始化了幾條資料用於在 ListView 中顯示。然後在發送按鈕

的點擊事件裡擷取了 EditText 中的內容，如果內容不為空白則建立出一個新的 Msg 對象，並把 它添加到 msgList 列表中去。之後又調用了適配器的 notifyDataSetChanged()方法，用於通知 列表的資料發生了變化，這樣新增的一條訊息才能夠在 ListView 中顯示。接著調用 ListView 的 setSelection()方法將顯示的資料定位到最後一行，以保證一定可以看得到最後發出的一條 訊息。最後調用 EditText 的 setText()方法將輸入的內容清空。

這樣所有的工作就都完成了，終於可以檢驗一下我們的成果了，運行程式之後你將會看 到非常美觀的聊天介面，並且可以輸入和發送訊息， 3.43 所示。

android:ListView bbs Demo