【實戰】聊天窗口的實現

　　今天參考書上的例子，自己也實現了一個相對美觀的聊天界面，過程如下：

一、第一步制作用於顯示聊天內容的圖片，使用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);
    }


}

 

至此，此次實戰結束，運行效果圖：