环信集成自定义发送类似淘宝商品信息条目

1.项目背景

出于项目的需要，今日一直研究环信集成的IM 发送类似淘宝商品链接的item ，小有成就 特在此分享： 电商中的及时聊天一般都要把商品的信息发送给卖家，以方便双方的交流，由于之前借鉴 了网上的一些例子，故个别字段和主题有点出入：

2.具体实现步骤

1.环信的消息扩展，首先我们要定义消息的扩展字段代码如下：

    public class MinPianConstant {
    public static final String MYTEXTTYPE="MYTEXTTYPE";//名片扩展
    public static final String ICON="img";
    public static final String GOODSNAME="goodsName";
    public static final String PRICE="goodsprice";
    public  static final String DESC="goodsdesc";
}

2.定义EaseMessageAdapter 常量

private static final int REQUEST_TYPE_RECV_CALL=5;
    private static final int REQUEST_TYPE_SEND_CALL=6;

3.创建发送的消息

由于从商品详情也跳转到聊天页面都需要发送商品item 所以每次创建时都发送消息给对方，但是有些可能从信息列表跳转到聊天页面这里给了标志位以作判别：
对话创建时发送商品详情的item
  @Override
    public void onActivityCreated(Bundle savedInstanceState) {

        fragmentArgs = getArguments();
        // check if single chat or group chat
        chatType = fragmentArgs.getInt(EaseConstant.EXTRA_CHAT_TYPE, EaseConstant.CHATTYPE_SINGLE);
        // userId you are chat with or group id
        toChatUsername = fragmentArgs.getString(EaseConstant.EXTRA_USER_ID);
        aNew=fragmentArgs.getString("new");
        if (aNew!=null){
          sendMIngPianMessage("万聚鲜城 冰岛进口新鲜冷冻海参斑鱼 去脏去砂开背600-800g/条","http://dynamic-image.yesky.com/740x-/uploadImages/2014/289/01/IGS09651F94M.jpg","不错");
        }
        super.onActivityCreated(savedInstanceState);
    }

  发送消息的方法
  protected void sendMIngPianMessage(String name, String imv, String desc) {
        EMMessage message = EMMessage.createTxtSendMessage(name,toChatUsername);
        message.setAttribute(MinPianConstant.ICON,imv);
        message.setAttribute(MinPianConstant.MYTEXTTYPE,"mingPianType");
        message.setAttribute(MinPianConstant.GOODSNAME,name);
        message.setAttribute(MinPianConstant.DESC,desc);
        EMClient.getInstance().chatManager().sendMessage(message);
       // sendMessage(message);
        Log.e("at22","成功");
    }

3.消息发送后下面就要对消息进行显示

接下来这个非常重要，这个是名片消息的ChatRow，就是载体
对，就是new一个chatRow出来，这个chatRow在easeui里面是没有的，所以需要我们自己写

必须注意，一定要继承EaseChatRow，不然就调不出onInflatView，onFindViewById，onUpdateView，onSetUpView，onBubbleClick这几个方法

package com.hyphenate.easeui.widget.chatrow;

import android.content.Context;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.hyphenate.chat.EMMessage;
import com.hyphenate.chat.EMTextMessageBody;
import com.hyphenate.easeui.DemoHelper;
import com.hyphenate.easeui.MinPianConstant;
import com.hyphenate.easeui.R;

/**
 * Created by Administrator on 2017/12/6/006.
 */

public class MingPianChatRow extends EaseChatRow {

    public MingPianChatRow(Context context, EMMessage message, int position, BaseAdapter adapter) {
        super(context, message, position, adapter);
    }

    @Override
    protected void onInflateView() {

        if (DemoHelper.getInstance().isMingPianMessage(message)){
            inflater.inflate(message.direct()==EMMessage.Direct.RECEIVE? R.layout.easy_rec_mingpian:R.layout.easy_send_minpian,this);
        }
    }

    ImageView imv;
    TextView tv;
    @Override
    protected void onFindViewById() {

       imv= (ImageView) findViewById(R.id.imv);
       tv= (TextView) findViewById(R.id.tv);


    }

    @Override
    protected void onUpdateView() {

    }

    @Override
    protected void onSetUpView() {

       EMTextMessageBody textMessageBody= (EMTextMessageBody) message.getBody();
        if (message.direct()==EMMessage.Direct.RECEIVE){
            setMessageSendCallback();
            if (textMessageBody.getMessage()!=null){
                tv.setText(textMessageBody.getMessage()+"");
            }

        }
        if (message.getBooleanAttribute("mingPianType",true)){
            String message = this.message.getStringAttribute(MinPianConstant.GOODSNAME, null);
            String imageurl = this.message.getStringAttribute(MinPianConstant.ICON, null);
            tv.setText(message);
            Glide.with(context).load(imageurl).into(imv);
        }

    }

    @Override
    protected void onBubbleClick() {
        Toast.makeText(context,"跳转页面",Toast.LENGTH_SHORT).show();
    }
}

布局文件 发送和接受布局文件一样这里不在说明

> <?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="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingTop="13dp" >

    <TextView
        android:id="@+id/timestamp"
        style="@style/chat_text_date_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_chat_activity" >

        <ImageView
            android:id="@+id/iv_userhead"
            android:layout_width="@dimen/size_avatar"
            android:layout_height="@dimen/size_avatar"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="@dimen/margin_chat_activity"
            android:background="@drawable/ease_default_avatar"
            android:scaleType="fitXY" />

        <RelativeLayout
            android:id="@+id/bubble"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/margin_chat_activity"
            android:layout_toLeftOf="@id/iv_userhead"
            >
            <TextView
                android:layout_toRightOf="@+id/imv"
                android:layout_alignParentRight="true"
                android:id="@+id/tv"
                android:text="123"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:id="@+id/imv"
                android:layout_width="100dp"
                android:layout_height="100dp" />
            <TextView
                android:textColor="@color/holo_red_light"
                android:gravity="center"
                android:text="商品链接"
                android:layout_below="@+id/imv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </RelativeLayout>

        <!--  <TextView
             android:id="@+id/tv_userid"
             android:visibility="gone"
             style="@style/chat_text_name_style"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginRight="15dp"
             android:layout_toLeftOf="@id/iv_userhead"
             android:text="xxx" /> -->

        <ImageView
            android:id="@+id/msg_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/bubble"
            android:clickable="true"
            android:src="@drawable/ease_msg_state_failed_resend"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tv_ack"
            style="@style/chat_text_name_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/bubble"
            android:text="@string/text_ack_msg"
            android:textSize="12sp"
            android:visibility="invisible" />

        <TextView
            android:id="@+id/tv_delivered"
            style="@style/chat_text_name_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/bubble"
            android:text="@string/text_delivered_msg"
            android:textSize="12sp"
            android:visibility="invisible" />

        <ProgressBar
            android:id="@+id/progress_bar"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/bubble"
            android:visibility="visible" />
    </RelativeLayout>

</LinearLayout>

根据不同的类型进行创建：

protected EaseChatRow createChatRow(Context context, EMMessage message, int position) {
        EaseChatRow chatRow = null;
        if(customRowProvider != null && customRowProvider.getCustomChatRow(message, position, this) != null){
            return customRowProvider.getCustomChatRow(message, position, this);
        }
        boolean mingPianMessage = DemoHelper.getInstance().isMingPianMessage(message);
        Log.e("at22",mingPianMessage+"---"+message.getType());
        if (DemoHelper.getInstance().isMingPianMessage(message)){

            return new MingPianChatRow(context,message,position,this);
        }

接下来就是在适配器中显示了：

    /**
     * get type of item
     */
    public int getItemViewType(int position) {
        EMMessage message = getItem(position); 
        if (message == null) {
            return -1;
        }

        if(customRowProvider != null && customRowProvider.getCustomChatRowType(message) > 0){
            return customRowProvider.getCustomChatRowType(message) + 13;
        }

        if (message.getType() == EMMessage.Type.TXT) {
            if(message.getBooleanAttribute(EaseConstant.MESSAGE_ATTR_IS_BIG_EXPRESSION, false)){
                return message.direct() == EMMessage.Direct.RECEIVE ? MESSAGE_TYPE_RECV_EXPRESSION : MESSAGE_TYPE_SENT_EXPRESSION;
            }
             if(DemoHelper.getInstance().isMingPianMessage(message)){
                return message.direct()==EMMessage.Direct.RECEIVE?REQUEST_TYPE_RECV_CALL:REQUEST_TYPE_SEND_CALL;
            }//这个很重要
        return -1;// invalid
    }

到最后，我们还需要一个步骤，就是去DemoHelper里面监听消息是不是名片扩展消息

public   class DemoHelper {
    private static final DemoHelper ourInstance = new DemoHelper();

   public   static DemoHelper getInstance() {
        return ourInstance;
    }

    private DemoHelper() {

    }

    public boolean isMingPianMessage(EMMessage emMessage){

        String TYPE = emMessage.getStringAttribute(MinPianConstant.MYTEXTTYPE, null);
        Log.e("at22",TYPE+"");
        if (TYPE==null){
            return false;
        }
        if (TYPE.equals("mingPianType")){
            return true;
        }

        return false;
    }

这样一个完整的商品扩展信息就写完了