跳到主要内容

Emoji 与贴纸表情

用户可以 IMKit 输入区域发送 Emoji 表情、贴纸表情。点击输入栏的表情（☺）按钮，即可展开表情面板，支持发送 Emoji 表情、贴纸表情。表情消息将出现在会话页面的消息列表组件中。

提示

IMKit 输入区域的表情面板中默认仅包含 emoji。图中的贴纸表情需要集成 rcsticker 库。支持添加自定义表情。

Emoji 符号表情​

IMKit 输入区域的表情面板中默认展示内置 Emoji 符号表情。用户点击后可发送 Emoji 符号表情。

适配新式 Emoji 符号（Emoji 13.1）​

提示

IMKit 从 5.2.2 开始支持集成融云 Emoji 模块。

随着用户越来越多地使用各种应用中的表情符号，Unicode 每年都会更新标准表情符号集。根据 Android 表情符号政策的说明：

  • 如果应用在 Android 12 或更高版本上运行，而且使用默认 Android 表情符号，没有任何自定义实现，便已使用最新版 Unicode 表情符号。

  • 如果应用在 Android 11 或更低版本上运行，在设备已经正常安装、运行谷歌服务框架（可联网）的情况下，可自动支持 Emoji 13.1 或更新的表情符号。

但由于国内手机大多数没有安装谷歌服务框架，且因网络原因无法通过可下载字体支持 Emoji 13.1，因此需要将表情符号字体捆绑到应用中，才能在 Android 11 及更低版本上支持显示新式表情符号字体。

为简化开发者的 Emoji 适配工作，融云提供了 Emoji 模块。您仅需要在项目中集成融云提供的 Emoji 模块，即可适配新表情，无需额外代码。

提示

由于当前的 Emoji 字体大小超过 10 MB，建议您根据实际需要考虑是否集成融云 Emoji 模块。

    // 如果您依赖的 androidx.appcompat:appcompat 版本为 1.4.0 及以上，仅需添加以下依赖
    implementation 'cn.rongcloud.sdk:emoji-compat:5.2.2'

    // 如果您依赖的 androidx.appcompat:appcompat 版本为 1.4.0 以下，需添加以下两个依赖
    implementation 'cn.rongcloud.sdk:emoji-compat:5.2.2'
    implementation "androidx.emoji2:emoji2:1.1.0"

禁用表情面板中的内置 Emoji 表情​

提示

SDK 从 5.2.3 开始支持禁用内置 Emoji 表情。

用户点击会话列表中的会话时，SDK 自动跳转带有内置 Emoji 的会话页面 Activity（RongConversationActivity）。如需隐藏融云内置 Emoji，您需要自行跳转到会话页面，同时设置隐藏 内置 Emoji 表情。禁用后，跳转的目标会话页面的表情面板中不会显示 Emoji 标签页。

String targetId = "userId";
ConversationIdentifier conversationIdentifier = new ConversationIdentifier(Conversation.ConversationType.PRIVATE, targetId);
Boolean disableSystemEmoji = true;

RouteUtils.routeToConversationActivity(context, conversationIdentifier, disableSystemEmoji, bundle)
参数类型说明
contextContextActivity 上下文
conversationIdentifierConversationIdentifier会话类型。其中的 targetId 为会话的目标 ID。单聊会话时使用对方用户 ID 为会话 ID，群聊会话时为群组 ID。
disableSystemEmojiBoolean是否隐藏 SDK 内置 Emoji 表情。true 为隐藏，false 为不隐藏。
bundleBundle扩展参数

贴纸表情​

IMKit 表情面板中可支持贴纸表情，您可以集成融云表情贴纸库 rcsticker，也可以添加自定义贴纸表情。

集成融云贴纸表情​

IMKit 可集成融云表情贴纸库 rcsticker，其中包含一套“嗨豹”贴纸表情。

  1. 下载 IMKit 源码，将 rcsticker 目录拷贝到您应用工程中。

  2. 在工程根目录下的 settings.gradle 中增加以下配置：

    include ':rcsticker'

  3. 在应用的 build.gradle中添加以下依赖项：

    implementation project(path: ':rcsticker')

集成成功后，StickerExtensionModule 模块会向表情面板中添加融云贴纸标签页。首次点击后请根据提示下载贴纸。下载成功后会在面板里展示所有贴纸。

自定义贴纸表情​

提示

自定义表情的资源码不可与 rc_emoji.xml 中的资源码重复。

IMKit 的 rcsticker 库中的 StickerExtensionModule 实现了 IExtensionModule 接口类，通过实现其中的 getEmoticonTabs 方法，向 IMKit 提供扩展面板中添加了自定义表情页 （IEmoticonTab 实例）。

要添加自定义贴纸表情，有两种方式：

  • 实现 IExtensionModule 接口类，实现 getPluginModules() 方法，添加 IEmoticonTab 实例。下文介绍这种方式。
  • 继承 DefaultExtensionConfig 创建自定义扩展面板配置，重写 getPluginModules() 方法，添加 IEmoticonTab 实例。

以下步骤介绍了如何通过实现 IExtensionModule，将自定义贴纸表情加入表情面板。

  1. 创建 MyEmoticonTab 实现 IEmoticonTab。

    public class MyEmoticonTab implements IEmoticonTab {

        public MyEmoticonTab() {
        }
        @Override
        public Drawable obtainTabDrawable(final Context context) {
            return context.getResources().getDrawable(R.drawable.u1f603);
        }

        @Override
        public View obtainTabPager(Context context) {
            //参考步骤 2
            return initView(context);
        }
        @Override
        public void onTableSelected(int i) {
        }

       @Override
        public LiveData<String> getEditInfo() {
            return null;
        }
    }

  2. 在上方的 obtainTabPager 方法中添加想要展示在表情面板上的 View。下方提供了一个参考示例：

    public View initView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.view_emoji, null);
        RecyclerView rv = view.findViewById(R.id.recycler_view);
        //LinearLayoutManager是用来做列表布局，也就是单列的列表
        GridLayoutManager mLayoutManager = new GridLayoutManager(context, 5, OrientationHelper.VERTICAL, false);
        rv.setLayoutManager(mLayoutManager);

        // Google 提供了一个默认的item删除添加的动画
        rv.setItemAnimator(new DefaultItemAnimator());
        rv.setHasFixedSize(true);

        //模拟列表数据
        ArrayList newsList = new ArrayList<>();
        TypedArray array = context.getResources().obtainTypedArray(context.getResources().getIdentifier("rc_emoji_res", "array", context.getPackageName()));
        int i = -1;
        while (++i < array.length()) {
            newsList.add(array.getResourceId(i, -1));
        }
        adapter = new NewsAdapter(newsList);
        rv.setAdapter(adapter);
        return view;
        }

  3. 创建 MyEmoticonTabExtModule 实现 IExtensionModule 接口类。在 getEmoticonTabs() 方法中返回本模块提供的表情页列表。您可以参考 IMKit 源码中的 IExtensionModule.java 及其他实现类。

    public class MyEmoticonTabExtModule implements IExtensionModule {
        @Override
        public void onInit(Context context, String appKey) {

        }

        @Override
        public void onAttachedToExtension(Fragment fragment, RongExtension extension) {

        }

        @Override
        public void onDetachedFromExtension() {

        }

        @Override
        public void onReceivedMessage(Message message) {

        }

        @Override
        public List<IPluginModule> getPluginModules(Conversation.ConversationType conversationType) {
            return null;
        }

        @Override
        public List<IEmoticonTab> getEmoticonTabs() {
            List<IEmoticonTab> emoticonTabs = new ArrayList<>();
            emoticonTabs.add(myEmoticonTab);
            return emoticonTabs;
        }

        @Override
        public void onDisconnect() {

        }
    }

  4. 在初始化之后，进入会话页面之前，通过 RongExtensionManager，向 IMKit 的输入区域 RongExtension 中注册自定义的 MyExtensionModule。

    RongExtensionManager.getInstance().registerExtensionModule(new MyExtensionModule());

隐藏表情面板入口​

提示

IMKit SDK 从 5.3.2 版本开始提供该功能。

在 App 不需要提供表情输入功能时，可隐藏输入栏中的表情按钮，隐藏后用户无法展开表情面板。详见输入区域。

最后于 更新