【实战】聊天窗口的实现

　　今天参考书上的例子，自己也实现了一个相对美观的聊天界面，过程如下：

一、第一步制作用于显示聊天内容的图片，使用SDK目录下的Tools下的draw9patch.bat来制作Nine-Patch图片，以便适用于各种分辨率的终端；

　　需要注意的是在制作好之后保存的时候不能把保存的名称改掉，一定要带上保存时自动加上的.9，并且在引用的时候名称不用写.9即可，切记！在这浪费了一个多小时

二、编写主界面activity_main.xml，放一个ListView和LinearLayout，LinearLayout下面再放一个EditText(用于编写消息)和Button(用于发送消息)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#d8e0e8" >

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

三、新建消息实体类Msg

package com.example.Entity;

public class Msg {
    public static final int TYPE_RECEIVED = 0;
    public static final int TYPE_SEND = 1;
    private String content;//消息内容
    private int type;//消息类型，分为发送（TYPE_SEND）和接收的（TYPE_RECEIVED）
    
    public Msg(String content, int type) {
        // TODO Auto-generated constructor stub
        this.content = content;
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public int getType() {
        return type;
    }

}

四、由于消息是用ListView显示的，那么接下来要编写ListView子项的布局，新建一个xml文件，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">
    
    9-26行是在左侧出现的主要是在left_layout布局中放入了一个TextView来显示文字，left_layout布局中的背景就是我们做的Nine-Patch图片；；；代表的是接收的消息
    <LinearLayout
        android:id="@+id/left_layout"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="start"
           android:orientation = "vertical"
        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"
               android:textSize="15sp"/>

    </LinearLayout>
    9-26行是在右侧出现的主要是在right_layout布局中放入了一个TextView来显示文字，right_layout布局中的背景就是我们做的Nine-Patch图片；；；代表的是发送的消息
    <LinearLayout
        android:id="@+id/right_layout"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="end"
           android:orientation = "vertical"
        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"
               android:textSize="15sp"/>

    </LinearLayout>
    
</LinearLayout>

 四、由于ListView要显示的数据需要通过适配器Adapter来实现，下面我们来建立一个适配器类MsgAdapter，继承于ArrayAdapter，并将泛型指定为Msg类；

package com.example.uibestpractice;

import java.util.List;

import com.example.Entity.Msg;

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;
    
    //建立三个参数的构造方法
    public MsgAdapter(Context context, int textViewResourceId , List<Msg> objects) {

        //实现了ArrayAdapter类的构造方法
        super(context, textViewResourceId,objects);
        resourceId = textViewResourceId;
    }
    
    //position就是你选择的 item的第几条从0开始
    //convertView就是item上的布局layout或者组件
    //ViewGroup parent 就是设置adapter的那个组件里面封装一个viewGroup用来盛放item
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Msg msg = getItem(position);//获取当前项的Msg实例；
        View view ;//定义一个View
        ViewHolder viewHolder ;
//        定义一个ViewHolder，ViewHolder是一个内部类，    
//        就是一个持有者的类，他里面一般没有方法，只有属性，
//        作用就是一个临时的储存器，把你getView方法中每次返回的View存起来，可以下次再用。
//        这样做的好处就是不必每次都到布局文件中去拿到你的View，提高了效率
        
        //判断convertView对象是否为空，如果为空就重新加载；
        if(convertView == null)
        {
            //使用Layoutinflater为这个子项加载我们传入的布局(resourceId)，
            view = LayoutInflater.from(getContext()).inflate(resourceId, null);
            //实例化内部类viewHolder
            viewHolder = new ViewHolder();
            //将控件的实例都存在ViewHolder中
            viewHolder.leftLayout =(LinearLayout) view.findViewById(R.id.left_layout);
            viewHolder.rightLayout =(LinearLayout) view.findViewById(R.id.right_layout);
            viewHolder.leftMag = (TextView) view.findViewById(R.id.left_msg);
            viewHolder.rightMag = (TextView) view.findViewById(R.id.right_msg);
            //把viewHolder通过View的setTag方法存放起来；
            view.setTag(viewHolder);
        }
        else//如果不为空，则重新调用convertView；不必重新加载
        {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();//取出viewHolder，也就取出了已经加载过得数据
        }
        
        if(msg.getType() == msg.TYPE_RECEIVED)//如果是接收的消息则左侧显示布局和文字，右侧隐藏
        {
            viewHolder.leftLayout.setVisibility(View.VISIBLE);
            viewHolder.rightLayout.setVisibility(View.GONE);
            viewHolder.leftMag.setText(msg.getContent());
        }
        else if(msg.getType() == msg.TYPE_SEND)//如果是发送的消息则右侧显示布局和文字，左侧隐藏
        {
            viewHolder.rightLayout.setVisibility(View.VISIBLE);
            viewHolder.rightMag.setText(msg.getContent());
            viewHolder.leftLayout.setVisibility(View.GONE);
        }
        //返回一个View
        return view;
    }
    class ViewHolder//临时存储器，把getView方法中每次返回的View存起来，可以下次再用
    {
        LinearLayout leftLayout ;
        LinearLayout rightLayout ;
        TextView leftMag;
        TextView rightMag;
        
    }
}

 五、最后来实现MainActivity.java的代码，为ListView初始化数据，并设置一些响应事件，完成最后的操作

package com.example.uibestpractice;

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

import com.example.Entity.Msg;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity {

    private ListView msgListView;//定义ListView
    private EditText inputText;//定义EditText
    private Button send;//定义Button
    private MsgAdapter adapter;//定义MsgAdapter
    private List<Msg> msgList = new ArrayList<Msg>();//实例化一个泛型为Msg的List
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //初始化数据
        initMsgs();
        
        //调用MsgAdapter的构造方法实例化adapter，
        adapter = new MsgAdapter(MainActivity.this, R.layout.msg_item, msgList);
        
        //分别实例化EditText、Button、ListView
        inputText = (EditText) findViewById(R.id.input_text);
        send = (Button) findViewById(R.id.send);
        msgListView = (ListView) findViewById(R.id.msg_list_view);
        
        //为ListView加适配器；
        msgListView.setAdapter(adapter);
        
        //设置send的点击事件，响应用户操作
        send.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                
                //定义内容获取用户在EditText中输入的字符串
                String content = inputText.getText().toString();
                
                //如果字符串不为空,把数据添加到 msgList中
                if(!"".equals(content))
                {
                    Msg msg = new Msg(content , Msg.TYPE_SEND);
                    msgList.add(msg);
                    
                    //动态更新ListView
                    adapter.notifyDataSetChanged();
                    
                    //将列表移动到刚发的消息处，即msgList的最大位置
                    msgListView.setSelection(msgList.size());
                    
                    //把输入框置空
                    inputText.setText("");
                }
            }
        });
    }

    private void initMsgs() {
        // TODO Auto-generated method stub
        Msg msg1 = new Msg("Hello guy!",Msg.TYPE_RECEIVED);//往msgList中添加接收数据
        msgList.add(msg1);
        Msg msg2 = new Msg("Hello,Who is that?",Msg.TYPE_SEND);//往msgList中添加发送数据
        msgList.add(msg2);
        Msg msg3 = new Msg("This is Tom,Nice talking to you.",Msg.TYPE_RECEIVED);//往msgList中添加接收数据
        msgList.add(msg3);
    }


}

至此，此次实战结束，运行效果图：