跳到主要内容

贴纸消息

在 Global IM UIKit 会话页面的内容输入框中包含一个的贴纸按钮,用于展开贴纸面板。

(width=250)

点击按钮后会展示贴纸面板,应用程序的用户可以点击发送贴纸消息。

(width=250)

重要

Global IM UIKit 默认只提供贴纸展示的面板,贴纸资源需要由应用程序提供给 Global IM UIKit。

添加贴纸包

应用程序可以使用以下两种方式在会话页面贴纸面板中添加添加自定义贴纸。

通过本地路径增加贴纸包

  1. 通过本地路径增加贴纸包 JSON 文件。格式如下:

    {
    "stickerPackage": {
    "packageId": "c60plBGwk2686yv4vmv4H9",
    "icon": "base64Str"
    },
    "stickers": [
    {
    "stickerId": "d1PN1xTZ47p9nfMNWfGpyH",
    "height": 240,
    "width": 240,
    "icon": "base64Str"
    },
    {
    "stickerId": "euV-LiASA9Nax4eeRgVCbW",
    "height": 240,
    "width": 240,
    "icon": "base64Str"
    }
    ]
    }
    提示

    icon 为缩略图的 base64 字符串。

  2. 重写会话页面 ChatFragmentonBindInputPanelComponent 方法,在其中通过 InputPanelComponentaddStickerPackagesWithJsonPaths(@NonNull List<String> paths) 方法添加贴纸路径。

    public class CustomChatFragment extends ChatFragment {
    @Override
    protected void onBindInputPanelComponent(@NonNull ChatModule module, @NonNull ChatViewModel viewModel) {
    super.onBindInputPanelComponent(module, viewModel);

    // 方案一
    module.getInputPanelComponent().addStickerPackagesWithJsonPaths(new ArrayList<>());
    }
    }

通过 StickerDataProvider 加载贴纸

设置贴纸 Provider。

public class CustomChatFragment extends ChatFragment {
@Override
protected void onBindInputPanelComponent(@NonNull ChatModule module, @NonNull ChatViewModel viewModel) {
super.onBindInputPanelComponent(module, viewModel);
// 方案二
module.getInputPanelComponent().addStickerDataProvider(new StickerDataProvider() {
@NonNull
@Override
public List<StickerPackage> getStickerPackage() {
// 返回贴纸表情包
return new ArrayList<StickerPackage>();
}
});
}
}

展示贴纸消息

贴纸表情默认展示是缩略图。如需需要展示贴纸大图,您可以设置贴纸图片提供者:

public class CustomChatFragment extends ChatFragment {
@Override
protected void onBindMessageListComponent(@NonNull ChatModule module, @NonNull ChatViewModel viewModel) {
super.onBindMessageListComponent(module, viewModel);
// 展示真实的Sticker
ConfigCenter.getChatConfig().setStickerViewDataProvider(new StickerViewDataProvider() {
@NonNull
@Override
public String getDisplayStickerLocalUrl(@NonNull String packageId, @NonNull String stickerId) {
// 根据 packageId、stickerId返回 大图贴纸表情
return null;
}
});
}
}

隐藏贴纸按钮

贴纸按钮 根据 class 来区分,参考如下:

功能class
贴纸按钮KeyboardInputAction

隐藏贴纸按钮代码示例:

public class CustomInputPanelComponent extends InputPanelComponent{

@NonNull
@Override
protected List<InputAction> beforeCreateRightInputActionView(@NonNull List<InputAction> rightInputActions) {
// 移除 贴纸按钮
Iterator<InputAction> iterator = rightInputActions.iterator();
while (iterator.hasNext()) {
InputAction inputAction = iterator.next();
if (inputAction instanceof KeyboardInputAction) {
iterator.remove();
}
}
return super.beforeCreateRightInputActionView(rightInputActions);
}
}