定制聊天窗口.md 8.0 KB

定制聊天窗口

默认的聊天窗口已经能满足大部分的需求,考虑到开发者可能有更特殊的要求,UIKit 提供非常灵活的个性定制,包括聊天窗口界面样式、会话中点击事件、自定义扩展消息类型显示、消息撤回和转发过滤器等。

聊天界面介绍

聊天界面代码结构

聊天界面的主要实现在 MessageFragment 中。主要包括两个子模块 MessageListPanelEx (消息列表)和 InputPanel (输入框)。MessageFragment 与 子模块之间的交互依靠 ModuleProxy 这个代理类。MessageFragment 与子模块之间的参数传递依靠 Container 这个容器。具体结构参考如下:

image

聊天界面布局

聊天界面相关属性,如下图:

image

image

image

定制化

简单定制

直接修改组件中提供的 UIKitOptions 类,进行简单的开关配置,提供的功能如下:

名称 定义
aitEnable 开启@功能
aitTeamMember 支持@群成员
aitIMRobot 支持在 IM 聊天中@机器人
aitChatRoomRobot 支持在 Chat Room 中@机器人
displayMsgTimeWithInterval 消息列表每隔多久显示一条消息时间信息,默认五分钟
messageCountLoadOnce 单次抓取消息条数配置
messageLeftBackground IM 接收到的消息时,内容区域背景的drawable id
messageRightBackground IM 发送出去的消息时,内容区域背景的drawable id
chatRoomMsgLeftBackground chat room 接收到的消息时,内容区域背景的drawable id
chatRoomMsgRightBackground chat room 发送出去的消息时,内容区域背景的drawable id
shouldHandleReceipt 全局是否使用消息已读,如果设置为false,UIKit 组件将不会发送、接收已读回执
maxInputTextLength 文本框最大输入字符数目
audioRecordType 录音类型,默认aac
audioRecordMaxTime 录音时长限制,单位秒,默认最长120s
disableAudioPlayedStatusIcon 不显示语音消息未读红点
disableAutoPlayNextAudio 禁止音频轮播

深度定制

  • 深度定制可提供的配置有:
配置项
输入框更多菜单项定制
ActionBar 右侧按钮定制
自定义贴图定制
会话中点击事件的定制
  • 提供两种深度定制方式:

1. 开发者可以通过设置默认配置,替换整个单聊和群聊的聊天界面。

2. 开发者可以自定义每个独立的聊天界面。

  • 定制步骤:

1. 初始化并配置 SessionCustomization 对象;具体配置项如何配置,见下文。

2. 挑选定制方式:

(1)设置默认配置。将 SessionCustomization 对象设置到默认配置项中。

// 设置单聊界面定制
NimUIKit.setCommonP2PSessionCustomization(commonP2PSessionCustomization);

// 设置群聊界面定制
NimUIKit.setCommonTeamSessionCustomization(commonTeamSessionCustomization);

(2)自定义独立的聊天界面。使用 NimUIKit#startChatting 方法,直接将 SessionCustomization 对象作为参数,打开聊天界面。

// 启动单聊
NimUIKit.startChatting(context, account, SessionTypeEnum.P2P, sessionCustomization);

// 启动群聊
NimUIKit.startChatting(context, teamId, SessionTypeEnum.Team, sessionCustomization);

输入框更多菜单项定制

1. 定义一个菜单项

可以进行菜单图片和文案资源的配置,并且定义图片的点击事件,以及处理回调事件。

具体步骤:

(1) 继承 BaseAction,初始化时,传入图片资源和文案资源。

(2)继承 BaseAction,根据需要重写 onClick() 或 onActivityResult() 方法

// 定义一个action
public class FileAction extends BaseAction {

    public FileAction() {
        super(R.drawable.message_plus_file_selector, R.string.input_panel_file);
    }

	@Override
    public void onClick() {

    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {

    }
}

2. 按指定顺序添加菜单项到更多菜单视图。

步骤如下:

(1)构造 SessionCustomization 对象。

(2)构造 List actions 集合,按照想要排列的顺序添加 action。

(3)设置 customization.actions

(4)调用 NimUIKit#startChatting 打开的聊天界面,即是配置好的效果。

SessionCustomization sessionCustomization = new SessionCustomization();
ArrayList<BaseAction> actions = new ArrayList<>();
actions.add(new AVChatAction(AVChatType.AUDIO));
actions.add(new AVChatAction(AVChatType.VIDEO));
actions.add(new SnapChatAction());
actions.add(new GuessAction());
actions.add(new FileAction());
sessionCustomization.actions = actions;

NimUIKit.startChatting(context, account, SessionTypeEnum.P2P, sessionCustomization, null);

ActionBar 右侧按钮定制

聊天界面的 ActionBar 右上角的按钮,支持自定义,包括按钮的图像,按钮的个数,按钮的点击事件。

具体步骤如下:

1. 首先初始化对象 SessionCustomization;

2. 初始化 ArrayList 列表 buttons;

3. 初始化一个 SessionCustomization.OptionsButton 的 button;

4. 设置 button的点击事件和图像资源;

5. 将 button 添加到列表,并将列表设置到 sessionCustomization.buttons = buttons;

6. 调用 NimUIKit#startChatting 打开的聊天界面,即是配置好的效果。

SessionCustomization sessionCustomization = new SessionCustomization();
ArrayList<SessionCustomization.OptionsButton> buttons = new ArrayList<>();
SessionCustomization.OptionsButton cloudMsgButton = new SessionCustomization.OptionsButton() {
    @Override
    public void onClick(Context context, View view, String sessionId) {

    }
};

cloudMsgButton.iconId = R.drawable.nim_ic_messge_history;

buttons.add(cloudMsgButton);
sessionCustomization.buttons = buttons;

NimUIKit.startChatting(context, account, SessionTypeEnum.P2P, sessionCustomization, null);

自定义贴图定制

1. 是否显示贴图表情开关

构造 SessionCustomization 对象,设置 withSticker,显示表情为 true,不显示表情为 false。再调用 NimUIKit#startChatting 函数即可。

SessionCustomization sessionCustomization = new SessionCustomization();
sessionCustomization.withSticker = true;

NimUIKit.startChatting(context, account, SessionTypeEnum.P2P, sessionCustomization, null);

2. 贴图表情配置

替换 demo/assets/sticker 下的资源文件,并修改 StickerManager 中的数据源。

3. 默认emoji表情图片及文案配置

替换 uikit/assets/emoji/default 文件夹下的资源文件 和 emoji.xml 中相应的设置。

会话中点击事件的定制

会话窗口消息列表提供一些点击事件的响应处理函数,见 SessionEventListener:

头像点击事件处理,一般用于打开用户资料页面 头像长按事件处理,一般用于群组@功能,或者弹出菜单,做拉黑,加好友等功能

SessionEventListener listener = new SessionEventListener() {
    @Override
    public void onAvatarClicked(Context context, IMMessage message) {
        // 一般用于打开用户资料页面
    }

    @Override
    public void onAvatarLongClicked(Context context, IMMessage message) {
        // 一般用于群组@功能,或者弹出菜单,做拉黑,加好友等功能
    }
};

// 在Application初始化中设置
NimUIKit.setSessionListener(listener);