android学习笔记——聊天界面的练习

想象一下，最简单的聊天界面里面需要的有哪些？

1、一个ListView来显示对话信息

2、底部需要一个EditText来输入信息，还要一个Button来点击发送。

好了，根据以上的想法先将activity_main.xml文件编写出来

<?xml version="1.0" encoding="utf-8"?>
<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:background="#d8e0e8"
    android:orientation="vertical"
    >

    <ListView
        android:id="@+id/msg_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="Type 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>

写好主界面的布局后，我们把消息的实体类写一下。

消息分为两种，一种是发出的，一种是收到的，所以我们将消息实体设计成这样：

public class Msg {

    public static final int TYPE_RECEIVED = 0;//表示收到的消息

    public static final int TYPE_SENT = 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;

    }

}

消息的实体类有了，我们需要将实体放在View上才能看的到，这是就得好好想想msg_item.xml这个文件该怎么写了。就是它要填充到主界面中ListView的每一个item中去。既然消息分两种，那么显示的View自然也是需要两种的。看看布局文件是怎么写的。

<?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/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="#000"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_marginLeft="200dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/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="#000"/>
    </LinearLayout>

</LinearLayout>

这个时候就有些疑惑了，怎么能让收到和发送的信息布局放到同一个布局文件里呢？别担心，还记得可见属性么？

我们在代码中根据发送还是接收进行一个判断，然后设置相应的可见性，问题不就解决了吗？

但是，到底该在哪里写这些代码呢？

答案就是Adapter，可以肯定的一点，Adapter的作用就是将view与数据进行绑定的工具，它与布局中的每个组件联系紧密，就是在这里，我们需要判断数据到底该使用哪个布局，是发送呢？还是接收呢？

看看代码

public class MsgAdapter extends ArrayAdapter<Msg> {

    private int resourceId;

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

一点一点来讲解，别急。

创建ListView的适配器类，让它继承ArrayAdapter，并将泛型指定为Msg类。新建类MsgAdapter。

上面的代码中，resourceId是为了获取当前View的ID，方便一会使用，进行一个绑定。

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Msg msg = getItem(position);

        View view;

        ViewHolder viewHolder;//还记得ViewHolder吧，他是一个内部类，方便在View已经存在的情况下使用该布局，只需要getTag(viewHolder)就可以咯

        if(convertView == null){

            view = LayoutInflater.from(getContext()).inflate(resourceId,null);//在这里使用resourceId来对view进行绑定，修改。

            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();

        }

//以上，我们使用ViewHolder给view进行了页面的布局绑定，之后我们只需要对ViewHolder中的内容进行操作，view中的内容也会随之跟着改变。很方便有木有！

        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_SENT){
            //如果是发出消息，则显示右边的消息布局，将左边的布局隐藏
            viewHolder.leftLayout.setVisibility(View.GONE);
            viewHolder.rightLayout.setVisibility(View.VISIBLE);
            viewHolder.rightMsg.setText(msg.getContent());

        }

//上述对消息实体类进行了判断，然后设置不同的显示/隐藏。使用viewHolder，很方便吧，代码也简介明了了很多。

        return view;

//最后当然还是要返回view，给主活动使用。

    }

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

}

把上面的这些事都干完后，回到主活动中来。仔细想想好像在主活动中要做的事情已经没多少了。

1、把消息实体初始化一下

2、给主活动的页面初始化一下（加载写好的ListView这个布局）

3、给设置下Button的点击事件，让输入框中的内容发送出去。

好，那我们就开始吧~

1.将消息实体初始化

public void initMsgs(){
    Msg msg1 = new Msg("Hello guys",Msg.TYPE_RECEIVED);
    msgList.add(msg1);
    Msg msg2 = new Msg("Hello Who is there?",Msg.TYPE_SENT);
    msgList.add(msg2);
    Msg msg3 = new Msg("I am tom ,Nice talking to you",Msg.TYPE_RECEIVED);
    msgList.add(msg3);

}

看上述代码，其实要做的只有两件事：1.创建一个Msg对象，传入两个参数，参数1是消息信息，参数2是消息类型。2.将创建出的Msg对象加入到msgList列表中去。

2.给主活动的页面初始化一下（加载写好的ListView这儿布局）

adapter = new MsgAdapter(MainActivity.this,R.layout.msg_item,msgList);//在adapter中绑定好数据和组件

msgListView = (ListView) findViewById(R.id.msg_list_view);

msgListView.setAdapter(adapter)//给msgListView设置Adapter

3.设置Button的点击事件，让输入框中的内容发送出去

inputText = (EditText) findViewById(R.id.input_text);
send = (Button) findViewById(R.id.send);
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_SENT);
            msgList.add(msg);
            adapter.notifyDataSetChanged();//当有新消息时，刷新ListView中的显示
            msgListView.setSelection(msgList.size());//将ListView定位到最后一行
            inputText.setText("");//清空输入框中的内容
        }
    }

});

至此，所有的工作就做完了。同学们可以试试看啦~