自定義一個ListView實現聊天界面

摘要

　　ListView可以稱得上Android中最常用也最難用的控件了，幾乎所有的應用程序都會用到它。由於手機屏幕空間都比較有限，能夠一次性在屏幕上顯示的內容並不多，當我們的程序中有大量的數據需要展示的時候，就可以借助ListView 來實現。ListView 允許用戶通過手指上下滑動的方式將屏幕外的數據滾動到屏幕內，同時屏幕上原有的數據則會滾動出屏幕。在掌握了基本的ListView用法之后，作為練習，我們可以自定義ListView實現模仿常見SNS應用的聊天界面（只提供顯示功能）。實現效果如下圖：

　　

實現

1. 首先編寫主界面，修改activity_main.xml中的代碼，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <!--<TextView android:text="@string/hello_world" android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content" />-->

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="#0000">

    </ListView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Typing Something here"
            android:maxLines="2"
            />

        <Button
            android: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 表示將分隔線設為透明色。

2. 自定義消息的實體類，新建Msg類，代碼如下：

public class Msg {
    public static final int TYPE_RECEIVED = 0;
    public static final int TYPE_SEND = 1;

    private String content;

    private int type;

    public Msg(String content, int type) {
        this.content = content;
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public int getType() {
        return type;
    }
}

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

3.編寫ListView 子項的布局，新建msg_item.xml，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    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">

        <TextView
            android: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"/>

    </LinearLayout>
</LinearLayout>

　　這里我們讓收到的消息居左對齊，發出的消息居右對齊，並且分別使用message_left.9.png和message_right.9.png 作為背景圖。這里為了顯示美觀，我們使用了安卓系統自帶了工具將背景圖片做成了點九圖片。在Android sdk 目錄下有一個tools 文件夾，在這個文件夾中找到draw9patch.bat 文件，我們就是使用它來制作Nine-Patch 圖片的。處理方法比較簡單，這里就不介紹了。

4.創建ListView 的適配器類，讓它繼承自ArrayAdapter，並將泛型指定為Msg類。新建類MsgAdapter，代碼如下所示：

package com.example.haisun.listview01;

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;

import java.util.List;

/**
 * Created by HaiSun on 2015/10/3.
 */
public class MsgAdapter extends ArrayAdapter<Msg> {
    private int resourceId;

    public MsgAdapter(Context context,  int textViewResourceId, List<Msg> objects) {
        super(context,  textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Msg msg = getItem(position);
        View view;
        ViewHolder viewHolder;
        if(convertView == null){
            view = LayoutInflater.from(getContext()).inflate(resourceId,null);
            viewHolder = new ViewHolder();
            viewHolder.leftLayout = (LinearLayout)view.findViewById(R.id.left_layout);
            viewHolder.rightLayout = (LinearLayout)view.findViewById(R.id.right_layout);
            viewHolder.leftMsg = (TextView)view.findViewById(R.id.left_msg);
            viewHolder.rightMsg = (TextView)view.findViewById(R.id.right_msg);
            view.setTag(viewHolder);
        }else {
            view = convertView;
            viewHolder = (ViewHolder)view.getTag();
        }
        if(msg.getType() == Msg.TYPE_RECEIVED){
            viewHolder.leftLayout.setVisibility(View.VISIBLE);
            viewHolder.rightLayout.setVisibility(View.GONE);
            viewHolder.leftMsg.setText(msg.getContent());
        }else if(msg.getType() == Msg.TYPE_SEND){
            viewHolder.leftLayout.setVisibility(View.GONE);
            viewHolder.rightLayout.setVisibility(View.VISIBLE);
            viewHolder.rightMsg.setText(msg.getContent());
        }
        return view;
        //return super.getView(position, convertView, parent);
    }

    class ViewHolder {
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;

    }
}

　　MsgAdapter 重寫了父類的一組構造函數，用於將上下文、ListView 子項布局的id 和數據都傳遞進來。另外又重寫了getView()方法，這個方法在每個子項被滾動到屏幕內的時候會被調用。在getView 方法中，首先通過getItem()方法得到當前項的Msg實例，然后使用LayoutInflater 來為這個子項加載我們傳入的布局，接着調用View 的findViewById()方法分別獲取到相應的的實例，最后將布局返回。我們在getView()方法中進行了判斷，如果convertView 為空，則使用LayoutInflater 去加載布局，如果不為空則直接對convertView 進行重用。另外，在getView()方法中增加了對消息類型的判斷。如果這條消息是收到的，則顯示左邊的消息布局，如果這條消息是發出的，則顯示右邊的消息布局。我們新增了一個內部類ViewHolder，用於對控件的實例進行緩存。當convertView 為空的時候，創建一個ViewHolder 對象，並將控件的實例都存放在ViewHolder 里，然后調用View的setTag()方法，ViewHolder 對象存儲在View 中。當convertView 不為空的時候，則調用View 的getTag()方法，把ViewHolder 重新取出。這樣所有控件的實例都緩存在了ViewHolder里，就沒有必要每次都通過findViewById()方法來獲取控件實例了。

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

package com.example.haisun.listview01;

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;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

    private ListView msgListView;
    private EditText inputText;
    private Button send;
    private MsgAdapter adapter;
    private List<Msg> msgList = new ArrayList<Msg>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        initMsgs();
        setContentView(R.layout.activity_main);

        adapter =  new MsgAdapter(MainActivity.this,R.layout.msg_item,msgList);
        inputText = (EditText)findViewById(R.id.input_text);
        send = (Button)findViewById(R.id.send);
        msgListView = (ListView)findViewById(R.id.list_view);
        msgListView.setAdapter(adapter);

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = inputText.getText().toString();
                if(!"".equals(content)){
                    Msg msg = new Msg(content,Msg.TYPE_SEND);
                    msgList.add(msg);
                    adapter.notifyDataSetChanged();
                    msgListView.setSelection(msgList.size());
                    inputText.setText("");

                }
            }
        });

//        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1,data);
//        ListView listView = (ListView)findViewById(R.id.list_view);
//        listView.setAdapter(adapter);

    }

    private void initMsgs() {
        Msg msg1 = new Msg("Hello guy.", Msg.TYPE_RECEIVED);
        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_RECEIVED);
        msgList.add(msg3);
    }


}

　　在initMsgs()方法中我們先初始化了幾條數據用於在ListView 中顯示。然后在發送按鈕的點擊事件里獲取了EditText 中的內容，如果內容不為空則創建出一個新的Msg 對象，並把它添加到msgList 列表中去。之后又調用了適配器的notifyDataSetChanged()方法，用於通知列表的數據發生了變化，這樣新增的一條消息才能夠在ListView 中顯示。接着調用ListView的setSelection()方法將顯示的數據定位到最后一行，以保證一定可以看得到最后發出的一條消息。最后調用EditText 的setText()方法將輸入的內容清空。