在融云 IMkit 会话界面基础上添加消息已读未读

Posted 2021-09-24 融云RongCloud

使用过融云的同学们可能知道. 融云 IMkit 的会话界面, 发送玩消息后, 如果对方已读, 发送端则会显示小对号的图片. 但是更具需求要把小对号改为已读未读. 接下来我们就一块实现这个功能.

打开回执功能

首先, 要确定打开融云的消息回执功能. 这个很简单, 就是在 rc_config.xml 中把下面属性配置为 true 即可.

​
<!-- 设置是否开启消息回执, true 为打开, false 为关闭-->
<bool name="rc_read_receipt">true</bool>
​

这样发送消息后, 对方已读, 发送端就会出现融云默认的小对号了.

自定义 Adapter

出现小对号后, 下一步就是要进行对融云适配器的改造了.

第一步 创建 CustomMessageListAdapter 继承 MessageListAdapter. 根据自己的需求复写 newView() 或者 bindView() 方法.

class CustomMessageListAdapter extends MessageListAdapter {
​
@Override
protected void bindView(View v, final int position, final UIMessage data) {
// 此方法中操作控件
}
}

第二步

创建 CustomConversationFragment 继承于 ConversationFragment, 并复写父类中的 onResolveAdapter(), 返回 CustomMessageListAdapter 对象.

class CustomMessageListAdapter extends ConversationFragment {
@Override
public MessageListAdapter onResolveAdapter() {
return new CustomMessageListAdapter();
}
}
​

第三步

使用 CustomConversationListFragment 代替 ConversationListFragment 进行配置使用即可.

添加已读未读

自定了了 Adapter, 我们就可以在原先逻辑的基础上进行扩展了. 现在主要的任务就是找到小对号的控件.

我们先看一下默认的 item 布局 rc_item_message.xml. 在布局中我们可找到下面的控件

​
<TextView
android:id="@id/rc_read_receipt"
android:layout_
android:layout_
android:layout_gravity="bottom"
android:layout_marginRight="4dp"
android:drawableLeft="@drawable/rc_read_receipt"
android:drawableStart="@drawable/rc_read_receipt"
android:textColor="@color/rc_read_receipt_status"
android:textSize="12sp"
android:visibility="gone" />
​

这个就是显示对号的控件了. 是一个 TextView 的控件, 由于我们是添加 “已读” 、“未读” 字符串, 正好可以直接使用这个 TextView 控件.

我们通过控件的 id 在 Adapter 中找到控件的名称.

class CustomMessageListAdapter extends MessageListAdapter {
​
@Override
protected void bindView(View v, final int position, final UIMessage data) {
super(v, position, data);
// 此方法中操作控件
final ViewHolder holder = (ViewHolder) v.getTag();
if (data.getMessageDirection() == Message.MessageDirection.SEND) {
if (readRec && data.getSentStatus() == Message.SentStatus.READ) {
if (data.getConversationType().equals(Conversation.ConversationType.PRIVATE) && tag.showReadState()) {
holder.readReceipt.setVisibility(View.VISIBLE);
holder.readReceipt.setText(已读);
holder.readReceipt.setBackground(null);
} else {
holder.readReceipt.setText(未读);
holder.readReceipt.setBackground(null);
holder.readReceipt.setVisibility(View.VISIBLE);
}
}
​
}
}

这样就会显示就会显示已读未读的字样了.