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" >

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

        <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 表示将分隔线设为透明色。其他用到 的所有属性都是我们之前学过的，相信你理解起来应该不费力。

然后我们来定义消息的实体类，新建 Msg，代码如下所示：

package com.example.uibestpractice;

//defined message class
public 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" >

        <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"
            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 所示。