0901Android基礎仿QQ聊天界面（下）

聊天信息顯示

　　聊天界面分左右邊，建立兩個layout，通過判斷 public static final int MESSAGE_LEFT = 0;和
public static final int MESSAGE_RIGHT = 1;來選擇左右佈局。
1、 在module的ChatAdapter中新建對象MESSAGE_RIGHT 和MESSAGE_LEFT

    public static final int MESSAGE_LEFT = 0;
    public static final int MESSAGE_RIGHT = 1;

並在ChatMessage中新建int對象並設立get和set方法。

    private int type;

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

2、然後活動中設置左右按鈕點擊事件中的MESSAGE_RIGHT 和MESSAGE_LEFT 來將判斷依據傳到ChatMessage中

 private void rightButton() {
        ChatMessage chatMessage = new ChatMessage();
        chatMessage.setTime(System.currentTimeMillis());
        chatMessage.setUserImg(R.mipmap.ic_launcher);
        chatMessage.setType(ChatAdapter.MESSAGE_RIGHT);
        chatMessage.setUserName("李四");
        chatMessage.setUserTitle("成員");
//                chatMessage.setUserMessage(mEtText.getText());
        //                將Editable（Spanned的子類）轉換爲String類型進行傳遞 “toHtml(Spanned text)”

        chatMessage.setUserMessage(filterHtml(Html.toHtml(mEtText.getText())));
        mData.add(chatMessage);
//              刷新
        mChatAdapter.notifyDataSetChanged();
//                轉到當前位置
//                mListView.setSelection(mData.size()-1);
        mEtText.setText("");
    }

　　 /3、然後在適配器中通過getItemViewType()來獲得MESSAGE_RIGHT 和MESSAGE_LEFT，getViewTypeCount用來返回進入ListView的佈局種類。這裏就兩個佈局，所以返回2.

   @Override
    public int getViewTypeCount() {
        return 2;
    }

    @Override
    public int getItemViewType(int position) {
//        獲得message中定義的type
        return mData.get(position).getType();
    }

　　 4、在ChatMessage的getView中選擇不同的佈局

 @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHoldLeft vhLeft = null;
        ViewHoldRight vhRight = null;
        if(convertView==null) {
            //      根據獲得的type類型確定選擇哪個layout
            switch (getItemViewType(position)) {
                case MESSAGE_LEFT:
                    vhLeft = new ViewHoldLeft();
                    convertView = mInflater.inflate(R.layout.item_message_left, null);
                    vhLeft.iv_userImg = (ImageView) convertView.findViewById(R.id.iv_userimg);
                    vhLeft.tv_time = (TextView) convertView.findViewById(R.id.tv_time);
                    vhLeft.tv_userMessage = (TextView) convertView.findViewById(R.id.tv_usermessage);
                    vhLeft.tv_userName = (TextView) convertView.findViewById(R.id.tv_username);
                    vhLeft.tv_userTitle = (TextView) convertView.findViewById(R.id.tv_usertitle);
                    convertView.setTag(vhLeft);
                    break;
                case MESSAGE_RIGHT:
                    vhRight = new ViewHoldRight();
                    convertView = mInflater.inflate(R.layout.item_message_right, null);
                    vhRight.iv_userImg = (ImageView) convertView.findViewById(R.id.iv_userimg);
                    vhRight.tv_time = (TextView) convertView.findViewById(R.id.tv_time);
                    vhRight.tv_userMessage = (TextView) convertView.findViewById(R.id.tv_usermessage);
                    vhRight.tv_userName = (TextView) convertView.findViewById(R.id.tv_username);
                    vhRight.tv_userTitle = (TextView) convertView.findViewById(R.id.tv_usertitle);
                    convertView.setTag(vhRight);
                    break;
                default:
                    break;
            }
        }
            //      獲得chatmessage對象
            ChatMessage chatMessage = mData.get(position);

//      根據獲得的type類型確定對應layout設置數據
            switch (getItemViewType(position)) {
                case MESSAGE_LEFT:
                    vhLeft = (ViewHoldLeft) convertView.getTag();
                    vhLeft.iv_userImg.setImageResource(chatMessage.getUserImg());
                    vhLeft.tv_userName.setText(chatMessage.getUserName());
//        將時間格式化
                    String time = mSimple.format(new Date(chatMessage.getTime()));
                    vhLeft.tv_time.setText(time);
                    vhLeft.tv_userTitle.setText(chatMessage.getUserTitle());
//     將String（其中包含文字信息）類型的圖片轉化爲Spanned類型
                    Spanned spanned = Html.fromHtml(chatMessage.getUserMessage(), mImageGetter, null);
                    vhLeft.tv_userMessage.setText(spanned);
                    break;
                case MESSAGE_RIGHT:
                    vhRight = (ViewHoldRight) convertView.getTag();
                    vhRight.iv_userImg.setImageResource(chatMessage.getUserImg());
                    vhRight.tv_userName.setText(chatMessage.getUserName());
//        將時間格式化
                    String time1 = mSimple.format(new Date(chatMessage.getTime()));
                    vhRight.tv_time.setText(time1);
                    vhRight.tv_userTitle.setText(chatMessage.getUserTitle());
//     將String（其中包含文字信息）類型的圖片轉化爲Spanned類型
                    Spanned spanned1 = Html.fromHtml(chatMessage.getUserMessage(), mImageGetter, null);
                    vhRight.tv_userMessage.setText(spanned1);
                    break;
                default:
                    break;
            }

        return convertView;
    }

    class ViewHoldLeft {
        ImageView iv_userImg;
        TextView tv_userName;
        TextView tv_userTitle;
        TextView tv_time;
        TextView tv_userMessage;
    }

    class ViewHoldRight {
        ImageView iv_userImg;
        TextView tv_userName;
        TextView tv_userTitle;
        TextView tv_time;
        TextView tv_userMessage;
    }

　　 5、最後在主函數中刷新一下數據，就會得到這個效果

添加表情

　　之前已經實現了可以添加固定的一個圖片，現在添加更多的圖片。

1. 在佈局中添加GridView

<GridView
        android:id="@+id/gv_expression"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#ffffff"
        android:numColumns="5"
        android:visibility="gone"
        android:listSelector="@android:color/transparent"
        >
    </GridView>

2、 設置添加到GridView中的item佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<ImageView
    android:id="@+id/iv_expression"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:src="@mipmap/dia"/>
</LinearLayout>

3、新建表情適配器ExpressionAdapter,將要用到的表情放在數組中（不再建立專門存放表情的類）,設置適配器，在getView中設置GridView中item的表情 vh.imageView.setImageResource(mExpression[position]);

package com.example.laowang.chat.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.example.laowang.chat.R;

/**
 * Created by Administrator on 2015/9/1.
 */
public class ExpressionAdapter  extends BaseAdapter{
    private int[] mExpression={R.mipmap.dia,R.mipmap.dib,R.mipmap.dic,R.mipmap.did,R.mipmap.die,
            R.mipmap.dif,R.mipmap.dig,R.mipmap.dih,R.mipmap.dii,R.mipmap.dij,R.mipmap.dik,R.mipmap.dil,R.mipmap.dim,R.mipmap.din,
            R.mipmap.diq,R.mipmap.dir,R.mipmap.dis,R.mipmap.dit,R.mipmap.diu,R.mipmap.div,R.mipmap.diw,R.mipmap.dix
    ,R.mipmap.diy,R.mipmap.diz};
    private LayoutInflater mInflater;

    public ExpressionAdapter(LayoutInflater mInflater) {
        this.mInflater = mInflater;
    }

    @Override
    public int getCount() {
        return mExpression.length;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
       ViewHold vh=null;
        if(convertView==null){
            vh=new ViewHold();
            convertView=mInflater.inflate(R.layout.expression_layout,null);
            vh.imageView= (ImageView) convertView.findViewById(R.id.iv_expression);
            convertView.setTag(vh);
        }else {
            vh= (ViewHold) convertView.getTag();
        }
        vh.imageView.setImageResource(mExpression[position]);
        return convertView;
    }
    class ViewHold{
        ImageView imageView;
    }
}

4、在主函數中獲得GridView的id，設置表情的string類型的數組（順序要和適配器中表情的順序一樣，因爲是根據position來獲取表情的），並設置主函數的GridView的點擊事件以及setAdapter

  private ExpressionAdapter mExpressionAdapter;
    private String[] mExpression = {"dia", "dib", "dic", "did", "die", "dif", "dig", "dih", "dii", "dij", "dik", "dil", "dim", "din"
            , "diq", "dir", "dis", "dit", "diu", "div", "diw", "dix", "diy", "diz"};
//onCreat中
  mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//                獲得對應位置的圖片
                Spanned spanned = Html.fromHtml("<img src='" + mExpression[position] + "'>", mImageGetter, null);
//                插入圖片到光標的位置
                mEtText.getText().insert(mEtText.getSelectionStart(), spanned);
            }
        });
          mExpressionAdapter = new ExpressionAdapter(getLayoutInflater());
        mGridView.setAdapter(mExpressionAdapter);

//通過表情按鈕img_iocn展開GridView
mImgIcon.setOnClickListener(this);
 public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_iocn:
//                  用popupwindow實現表情添加
//                mPopupWindow.showAsDropDown(mLinearTitle);
                if (mGridView.getVisibility() == View.VISIBLE) {
                    mGridView.setVisibility(View.GONE);
                } else {
                    mGridView.setVisibility(View.VISIBLE);
                }
                break;
}

5、設置Imagegetter

  mImageGetter = new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                Drawable drawable=null;
                if (source == null) {
                    drawable = getResources().getDrawable(R.mipmap.ic_launcher);
                    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                }else {
//                    通過反射得到R.mipmap類
                    Class clazz=R.mipmap.class;
                    try {
//                      通過點擊得到mExpression[position]的source的名稱 ，獲得名稱爲source的屬性
//                        例點擊dia獲得String類型的“dia”，然後得到名字爲dia的屬性（dia在mipmap中爲靜態int屬性）
                        Field field=clazz.getDeclaredField(source);
//                        得到屬性的靜態int值
                        int sourceId=field.getInt(clazz);
//                        getDrawable(sourceId)其中的值爲靜態int類型，R.mipmap.ic_launcher也是靜態int類型
                        drawable = getResources().getDrawable(sourceId);
                        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                    } catch (NoSuchFieldException e) {
                        e.printStackTrace();
                    } catch (IllegalAccessException e) {
                        e.printStackTrace();
                    }

                }
                return drawable;
            }
        };

得到的效果

全部代碼

//活動

public class MainActivity extends Activity implements View.OnClickListener {
    private ImageView mImgIcon;
    private EditText mEtText;
    private Html.ImageGetter mImageGetter;
    private ListView mListView;
    private List<ChatMessage> mData;
    private ChatAdapter mChatAdapter;
    private Button mLeftButton;
    private Button mRightButton;
    private LayoutInflater mInflater;
    private GridView mGridView;

    private PopupWindow mPopupWindow;
    private LinearLayout mLinearTitle;

    private ExpressionAdapter mExpressionAdapter;
    private String[] mExpression = {"dia", "dib", "dic", "did", "die", "dif", "dig", "dih", "dii", "dij", "dik", "dil", "dim", "din"
            , "diq", "dir", "dis", "dit", "diu", "div", "diw", "dix", "diy", "diz"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mImgIcon = (ImageView) findViewById(R.id.img_iocn);
        mEtText = (EditText) findViewById(R.id.et_text);
        mListView = (ListView) findViewById(R.id.listview);
        mLeftButton = (Button) findViewById(R.id.btn_send_left);
        mRightButton = (Button) findViewById(R.id.btn_send_right);
        mGridView = (GridView) findViewById(R.id.gv_expression);
        mLinearTitle= (LinearLayout) findViewById(R.id.linear_title);

//          用popupwindow實現表情添加
////     popupwindow初始化
//        mPopupWindow=new PopupWindow(this);
//        mPopupWindow.setWidth(ActionBar.LayoutParams.MATCH_PARENT);
//        mPopupWindow.setHeight(ActionBar.LayoutParams.WRAP_CONTENT);
////      讓Popupwindow可以點擊，setFocusable(false)則PopUpWindow只是一個浮現在當前界面上的view而已，不影響當前界面的任何操作
//        mPopupWindow.setFocusable(true);
////        點擊popupwindow以外的界面收起popupwindow
//        mPopupWindow.setOutsideTouchable(true);
//        mInflater=getLayoutInflater();
//        View popView=mInflater.inflate(R.layout.popupwindow_layout,null);
//        mGridView= (GridView) popView.findViewById(R.id.pop_gridview);
//        mPopupWindow.setContentView(popView);

//        初始化數據
        mData = new ArrayList<>();

//      初始化要在適配器初始化之前，不然mImageGetter爲空，得不到圖片。發送裏的刷新只能刷新數據
        mImageGetter = new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                Drawable drawable=null;
                if (source == null) {
                    drawable = getResources().getDrawable(R.mipmap.ic_launcher);
                    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                }else {
//                    通過反射得到R.mipmap類
                    Class clazz=R.mipmap.class;
                    try {
//                      通過點擊得到mExpression[position]的source的名稱 ，獲得名稱爲source的屬性
//                        例點擊dia獲得String類型的“dia”，然後得到名字爲dia的屬性（dia在mipmap中爲靜態int屬性）
                        Field field=clazz.getDeclaredField(source);
//                        得到屬性的靜態int值
                        int sourceId=field.getInt(clazz);
//                        getDrawable(sourceId)其中的值爲靜態int類型，R.mipmap.ic_launcher也是靜態int類型
                        drawable = getResources().getDrawable(sourceId);
                        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                    } catch (NoSuchFieldException e) {
                        e.printStackTrace();
                    } catch (IllegalAccessException e) {
                        e.printStackTrace();
                    }

                }
                return drawable;
            }
        };
        mChatAdapter = new ChatAdapter(getLayoutInflater(), mImageGetter, mData);
        mListView.setAdapter(mChatAdapter);
        mExpressionAdapter = new ExpressionAdapter(getLayoutInflater());
        mGridView.setAdapter(mExpressionAdapter);

        mLeftButton.setOnClickListener(this);
        mRightButton.setOnClickListener(this);
        mImgIcon.setOnClickListener(this);
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//                獲得對應位置的圖片
                Spanned spanned = Html.fromHtml("<img src='" + mExpression[position] + "'>", mImageGetter, null);
//                插入圖片到光標的位置
                mEtText.getText().insert(mEtText.getSelectionStart(), spanned);
            }
        });
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_iocn:
//                  用popupwindow實現表情添加
//                mPopupWindow.showAsDropDown(mLinearTitle);

                if (mGridView.getVisibility() == View.VISIBLE) {
                    mGridView.setVisibility(View.GONE);
                } else {
                    mGridView.setVisibility(View.VISIBLE);
                }
                break;
            case R.id.btn_send_left:
                leftButton();
                break;
            case R.id.btn_send_right:
                rightButton();
                break;
            default:
                break;
        }
    }

    private void rightButton() {
        ChatMessage chatMessage = new ChatMessage();
        chatMessage.setTime(System.currentTimeMillis());
        chatMessage.setUserImg(R.mipmap.ic_launcher);
        chatMessage.setType(ChatAdapter.MESSAGE_RIGHT);
        chatMessage.setUserName("李四");
        chatMessage.setUserTitle("成員");
//                chatMessage.setUserMessage(mEtText.getText());
        //                將Editable（Spanned的子類）轉換爲String類型進行傳遞 “toHtml(Spanned text)”

        chatMessage.setUserMessage(filterHtml(Html.toHtml(mEtText.getText())));
        mData.add(chatMessage);
//              刷新
        mChatAdapter.notifyDataSetChanged();
//                轉到當前位置
//                mListView.setSelection(mData.size()-1);
        mEtText.setText("");
    }

    private void leftButton() {
        ChatMessage chatMessage = new ChatMessage();
        chatMessage.setTime(System.currentTimeMillis());
        chatMessage.setUserImg(R.mipmap.ic_launcher);
//        設置左邊氣泡，在adapter的getItemViewType中返回，在getView根據這個調用item_message_left
        chatMessage.setType(ChatAdapter.MESSAGE_LEFT);
        chatMessage.setUserName("張三");
        chatMessage.setUserTitle("管理員");
//                chatMessage.setUserMessage(mEtText.getText());
        //                將Editable（Spanned的子類）轉換爲String類型進行傳遞 “toHtml(Spanned text)”

        chatMessage.setUserMessage(filterHtml(Html.toHtml(mEtText.getText())));
        mData.add(chatMessage);
//              刷新
        mChatAdapter.notifyDataSetChanged();
//                轉到當前位置
//                mListView.setSelection(mData.size()-1);
        mEtText.setText("");
    }

    //    過濾掉氣泡中多餘的部分
    public String filterHtml(String str) {
        str = str.replaceAll("<(?!br|img)[^>]+>", "").trim();
        return str;
    }
}

//聊天數據類
import android.text.Editable;

/**
 * Created by Administrator on 2015/8/31.
 */
public class ChatMessage  {
    private int userImg;
    private Long time;
    private String userName;
    private String userTitle;
    private String userMessage;
    private int type;

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public ChatMessage(){

    }
    public ChatMessage(int userImg, String userTitle, String userMessage, String userName, Long time) {
        this.userImg = userImg;
        this.userTitle = userTitle;
        this.userMessage = userMessage;
        this.userName = userName;
        this.time = time;
    }

    public int getUserImg() {
        return userImg;
    }

    public void setUserImg(int userImg) {
        this.userImg = userImg;
    }

    public String getUserMessage() {
        return userMessage;
    }

    public void setUserMessage(String userMessage) {
        this.userMessage = userMessage;
    }

    public Long getTime() {
        return time;
    }

    public void setTime(Long time) {
        this.time = time;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserTitle() {
        return userTitle;
    }

    public void setUserTitle(String userTitle) {
        this.userTitle = userTitle;
    }
}



//聊天界面適配器
package com.example.laowang.chat.adapter;

import android.text.Html;
import android.text.Spanned;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.laowang.chat.R;
import com.example.laowang.chat.module.ChatMessage;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

/**
 * Created by Administrator on 2015/8/31.
 */
public class ChatAdapter extends BaseAdapter {
    private LayoutInflater mInflater;
    private List<ChatMessage> mData;
    private Html.ImageGetter mImageGetter;
    private SimpleDateFormat mSimple;

    public static final int MESSAGE_LEFT = 0;
    public static final int MESSAGE_RIGHT = 1;
    public static final int RETURN_TYPE_COUNT = 2;

    public ChatAdapter(LayoutInflater mInflater, Html.ImageGetter mImageGetter, List<ChatMessage> mData) {
        this.mInflater = mInflater;
        this.mImageGetter = mImageGetter;
        this.mData = mData;
        mSimple = new SimpleDateFormat("EE HH:mm");
    }

    @Override
    public int getViewTypeCount() {
        return RETURN_TYPE_COUNT;
    }

    @Override
    public int getItemViewType(int position) {
//        獲得message中定義的type
        return mData.get(position).getType();
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHoldLeft vhLeft = null;
        ViewHoldRight vhRight = null;
        if(convertView==null) {
            //      根據獲得的type類型確定選擇哪個layout
            switch (getItemViewType(position)) {
                case MESSAGE_LEFT:
                    vhLeft = new ViewHoldLeft();
                    convertView = mInflater.inflate(R.layout.item_message_left, null);
                    vhLeft.iv_userImg = (ImageView) convertView.findViewById(R.id.iv_userimg);
                    vhLeft.tv_time = (TextView) convertView.findViewById(R.id.tv_time);
                    vhLeft.tv_userMessage = (TextView) convertView.findViewById(R.id.tv_usermessage);
                    vhLeft.tv_userName = (TextView) convertView.findViewById(R.id.tv_username);
                    vhLeft.tv_userTitle = (TextView) convertView.findViewById(R.id.tv_usertitle);
                    convertView.setTag(vhLeft);
                    break;
                case MESSAGE_RIGHT:
                    vhRight = new ViewHoldRight();
                    convertView = mInflater.inflate(R.layout.item_message_right, null);
                    vhRight.iv_userImg = (ImageView) convertView.findViewById(R.id.iv_userimg);
                    vhRight.tv_time = (TextView) convertView.findViewById(R.id.tv_time);
                    vhRight.tv_userMessage = (TextView) convertView.findViewById(R.id.tv_usermessage);
                    vhRight.tv_userName = (TextView) convertView.findViewById(R.id.tv_username);
                    vhRight.tv_userTitle = (TextView) convertView.findViewById(R.id.tv_usertitle);
                    convertView.setTag(vhRight);
                    break;
                default:
                    break;
            }
        }
            //      獲得chatmessage對象
            ChatMessage chatMessage = mData.get(position);

//      根據獲得的type類型確定對應layout設置數據
            switch (getItemViewType(position)) {
                case MESSAGE_LEFT:
                    vhLeft = (ViewHoldLeft) convertView.getTag();
                    vhLeft.iv_userImg.setImageResource(chatMessage.getUserImg());
                    vhLeft.tv_userName.setText(chatMessage.getUserName());
//        將時間格式化
                    String time = mSimple.format(new Date(chatMessage.getTime()));
                    vhLeft.tv_time.setText(time);
                    vhLeft.tv_userTitle.setText(chatMessage.getUserTitle());
//     將String（其中包含文字信息）類型的圖片轉化爲Spanned類型
                    Spanned spanned = Html.fromHtml(chatMessage.getUserMessage(), mImageGetter, null);
                    vhLeft.tv_userMessage.setText(spanned);
                    break;
                case MESSAGE_RIGHT:
                    vhRight = (ViewHoldRight) convertView.getTag();
                    vhRight.iv_userImg.setImageResource(chatMessage.getUserImg());
                    vhRight.tv_userName.setText(chatMessage.getUserName());
//        將時間格式化
                    String time1 = mSimple.format(new Date(chatMessage.getTime()));
                    vhRight.tv_time.setText(time1);
                    vhRight.tv_userTitle.setText(chatMessage.getUserTitle());
//     將String（其中包含文字信息）類型的圖片轉化爲Spanned類型
                    Spanned spanned1 = Html.fromHtml(chatMessage.getUserMessage(), mImageGetter, null);
                    vhRight.tv_userMessage.setText(spanned1);
                    break;
                default:
                    break;
            }

        return convertView;
    }

    class ViewHoldLeft {
        ImageView iv_userImg;
        TextView tv_userName;
        TextView tv_userTitle;
        TextView tv_time;
        TextView tv_userMessage;
    }

    class ViewHoldRight {
        ImageView iv_userImg;
        TextView tv_userName;
        TextView tv_userTitle;
        TextView tv_time;
        TextView tv_userMessage;
    }
}

//表情界面適配器
package com.example.laowang.chat.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.example.laowang.chat.R;

/**
 * Created by Administrator on 2015/9/1.
 */
public class ExpressionAdapter  extends BaseAdapter{
    private int[] mExpression={R.mipmap.dia,R.mipmap.dib,R.mipmap.dic,R.mipmap.did,R.mipmap.die,
            R.mipmap.dif,R.mipmap.dig,R.mipmap.dih,R.mipmap.dii,R.mipmap.dij,R.mipmap.dik,R.mipmap.dil,R.mipmap.dim,R.mipmap.din,
            R.mipmap.diq,R.mipmap.dir,R.mipmap.dis,R.mipmap.dit,R.mipmap.diu,R.mipmap.div,R.mipmap.diw,R.mipmap.dix
    ,R.mipmap.diy,R.mipmap.diz};
    private LayoutInflater mInflater;

    public ExpressionAdapter(LayoutInflater mInflater) {
        this.mInflater = mInflater;
    }

    @Override
    public int getCount() {
        return mExpression.length;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
       ViewHold vh=null;
        if(convertView==null){
            vh=new ViewHold();
            convertView=mInflater.inflate(R.layout.expression_layout,null);
            vh.imageView= (ImageView) convertView.findViewById(R.id.iv_expression);
            convertView.setTag(vh);
        }else {
            vh= (ViewHold) convertView.getTag();
        }
        vh.imageView.setImageResource(mExpression[position]);
        return convertView;
    }
    class ViewHold{
        ImageView imageView;
    }
}



//佈局
<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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linear_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="#01ABEC">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:textColor="#ffffff"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:layout_margin="5dp"
            android:text="虛擬聊天"/>
            />
    </LinearLayout>
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:divider="@null"
        android:cacheColorHint="#00000000"
        android:listSelector="@android:color/transparent"
        android:transcriptMode="alwaysScroll"
        android:background="@drawable/backgroundcolor">
    </ListView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:background="@drawable/down_linear_color">
        <ImageView
            android:id="@+id/img_iocn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/eo_press"
            android:layout_margin="5dp"
            />
        <Button
            android:id="@+id/btn_send_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_margin="2dp"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:background="@drawable/btn_press"
            android:text="發送"/>
        <EditText
            android:id="@+id/et_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/white_background"
            android:padding="5dp"
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_send_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_margin="2dp"
            android:background="@drawable/btn_press"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:text="發送"/>
    </LinearLayout>
    <GridView
        android:id="@+id/gv_expression"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#ffffff"
        android:numColumns="5"
        android:visibility="gone"
        android:listSelector="@android:color/transparent"
        >
    </GridView>
</LinearLayout>

//GridView添加的表情item佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<ImageView
    android:id="@+id/iv_expression"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:src="@mipmap/dia"/>
</LinearLayout>

//ListView左邊聊天界面佈局
<?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">

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="星期一 14：26" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_userimg"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_usertitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/user_occupation_background"
                    android:textColor="#ffffff"
                    android:text="管理員" />

                <TextView
                    android:id="@+id/tv_username"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#000000"
                    android:text="大表哥" />
            </LinearLayout>
            <TextView
                android:id="@+id/tv_usermessage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/eng"
                android:layout_marginRight="70dp"
                android:textColor="#000000"
                android:layout_marginTop="10dp"
                android:text="我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

//ListView右邊聊天界面佈局
<?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">

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="星期一 14：26" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                >

                <TextView
                    android:id="@+id/tv_username"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#000000"
                    android:text="大表哥" />
                <TextView
                    android:id="@+id/tv_usertitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/user_occupation_background"
                    android:textColor="#ffffff"
                    android:text="管理員" />

            </LinearLayout>
            <TextView
                android:id="@+id/tv_usermessage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:background="@mipmap/enh"
                android:layout_marginLeft="70dp"
                android:textColor="#000000"
                android:layout_marginTop="10dp"
                android:text="我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息我是一個信息"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/iv_userimg"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>
</LinearLayout>