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("");//清空输入框中的内容

}

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