跳到主要内容

修改消息的展示样式

IMKit SDK 通过「消息展示模板」控制会话页面中消息的展示样式，IMKit 中所有消息模板都继承自 RCMessageCell。App 可以按需修改指定类型消息的展示模板，实现对消息展示样式的个性化配置。

  • SDK 默认为会话页面中需要展示的内置消息类型（详见消息类型概述）提供了展示模板，App 可以按需创建模板，替换默认模板。
  • App 创建的自定义消息类型（详见自定义消息类型）默认没有对应的消息展示模板。如果 App 需要在会话界面中展示该自定义类型的消息，则必须创建对应的消息展示模板，提供给 SDK。否则 SDK 无法正常展示该类型消息。

通过替换 Bundle 资源修改消息 UI​

替换消息背景图​

IMKit 会话页面中每条消息都有气泡背景，蓝色气泡为发送的消息，白色气泡为接收的消息。

bubble

以下为 RongCloud.bundle 内的部分资源：

资源名称描述
chat_from_bg_normal接收的消息背景。
chat_to_bg_normal发出的消息背景。
chat_to_bg_white发出的位置消息、名片消息、文件消息专用背景。

注意拉伸位置。SDK 内拉伸比例为：

UIEdgeInsetsMake(image.size.height * 0.5, image.size.width * 0.5, image.size.height * 0.5, image.size.width * 0.5)

修改内置文本消息的字体颜色或字体大小​

IMKit SDK 支持通过全局配置修改文本字体大小。使用 RCKitConfigCenter 宏（或者使用 [RCKitConfig defaultConfig]）修改 IMKit 功能配置。您可以查看 [RCKitFontConf.h] 了解更多配置。

// 二级标题，默认 fontSize 为 17 (文本消息，引用消息内容，会话列表 title)
RCKitConfigCenter.font.secondLevel = 20;

如果修改字体颜色，可以使用重写会话页面的 willDisplayMessageCell 方法，根据不同消息类型修改 cell 控件颜色。详见页面事件监听。

替换内置消息默认展示模板​

IMKit 为每种类型的消息都封装了对应的消息展示模板。所有的消息展示模板都继承自 RCMessageCell。

替换内置文本消息的展示模板​

提示

IMKit 从 5.2.5 版本开始提供 RCComplexTextMessageCell。

IMKit 默认使用 RCTextMessageCell 显示 RCTextMessage 类型的消息。 RCTextMessageCell 为同步绘制 UI 的消息 Cell，在部分场景下，可能影响会话页面展示消息的流畅性。

  • 字符比较多的复杂文本消息
  • 含较多换行符的文本消息

从 5.2.5 版本开始，IMKit 支持将 RCTextMessage 类型消息的 Cell 替换为异步绘制 UI 的 RCComplexTextMessageCell，以更好地适应复杂文本的展示，减少会话页面上的卡顿和加载时间。

重写 RCConversationViewController 的 registerCustomCellsAndMessages 方法，在该方法中调用手动注册 RCComplexTextMessageCell。注册成功后，RCComplexTextMessageCell 将取代 RCTextMessageCell 用于显示文本消息。

// 注册自定义消息和cell
- (void)registerCustomCellsAndMessages {
    [super registerCustomCellsAndMessages];

    ...
    [self registerClass:[RCComplexTextMessageCell class] forMessageClass:[RCTextMessage class]];
    ....
}

自定义消息展示模板​

如果您需要更改 SDK 内置消息的展示效果，且自定义需求较高，可以继承 RCMessageCell，创建新的消息展示模板，并将该自定义模板提供给 SDK，替换 SDK 默认模板。

IMKit 中会话页面中所有消息 Cell 继承自 RCMessageCell。您可以创建自定义消息 Cell，用于控制消息在会话页面的展示形式。自定义 Cell 可继承 RCMessageCell 或 RCMessageBaseCell。

继承 RCMessageBaseCell​

RCMessageBaseCell 是 RCMessageCell 的父类，不支持显示头像和昵称。

RCMessageBaseCell 结构图：

如果继承 RCMessageBaseCell，请在初始化 Cell 时将在 baseContentView 上添加自定义控件。

继承 RCMessageCell​

RCMessageCell 继承自 RCMessageBaseCell，增加了显示头像和昵称的特性。

如果继承 RCMessageCell，请在初始化 Cell 时将在 messageContentView 上添加自定义控件。请务必根据自定义控件大小调整消息内容区域（messageContentView） 的 contentSize。

返回自定义 Cell 的 Size​

重写 RCMessageCell 或 RCMessageBaseCell 的以下方法返回 Cell 的 Size。

+ (CGSize)sizeForMessageModel:(RCMessageModel *)model
      withCollectionViewWidth:(CGFloat)collectionViewWidth
         referenceExtraHeight:(CGFloat)extraHeight;
参数类型说明
modelRCMessageModel要显示的消息 model
collectionViewWidthCGFloatCell 所在的 collectionView 的宽度
extraHeightCGFloatCell 内容区域之外的高度，就是上面 Cell 结构图中红色箭头的总高度 ，返回的 cell 的 size 的高 等于 图中标注的 height + extraHeight ，size 的宽就是 collectionViewWidth

设置视图布局和数据​

重写 RCMessageCell 或 RCMessageBaseCell 的设置 Cell 的视图布局和数据。请注意调整 messageContentView 的 contentSize，避免消息内容区域显示错乱。

- (void)setDataModel:(RCMessageModel *)model {
    [super setDataModel:model];
    // 修改布局与数据
}

以 IMKit 的 RCFileMessageCell 中的 setDataModel 方法为例：

- (void)setDataModel:(RCMessageModel *)model {
    [super setDataModel:model];
    RCFileMessage *fileMessage = (RCFileMessage *)self.model.content;
    self.nameLabel.text = fileMessage.name;
    self.sizeLabel.text = [RCKitUtility getReadableStringForFileSize:fileMessage.size];
    self.typeIconView.image = [RCKitUtility imageWithFileSuffix:fileMessage.type];
    [self setAutoLayout];
}

注册消息 Cell 并绑定消息类型​

您需要向 IMKit 注册自定义的消息 Cell，同时与消息类型绑定。被绑定的消息类型可以是内置消息类型，或者应用开发者创建的自定义消息类型。如果绑定内置消息类型，则会替换默认的消息 Cell。

提示

关于如何创建自定义消息类型，详见创建自定义消息与注册自定义消息。如果您创建了自定义消息类型且需要展示在会话界面中，必须创建对应的消息展示模板，否则 SDK 无法正常展示该类型消息。

如果 IMKit >= 5.2.4，可重写会话页面的 registerCustomCellsAndMessages 方法，并在方法内注册自定义的消息 Cell ，并绑定消息类型。

- (void)registerCustomCellsAndMessages {
    [super registerCustomCellsAndMessages];
    ///注册自定义测试消息Cell
    [self registerClass:[RCDTestMessageCell class] forMessageClass:[RCDTestMessage class]];
}

如果 IMKit < 5.2.4，需要在会话页面 viewDidLoad 中注册自定义的消息 Cell ，并绑定消息类型。

[self registerClass:[RCDTestMessageCell class] forMessageClass:[RCDTestMessage class]];
提示

您还可以参考融云的 SealTalk 应用中的 RCDTestMessage.m 和 RCDTestMessageCell.m。

隐藏消息 Cell 上的用户头像​

IMKit SDK 默认显示用户头像。从 5.3.0 版本开始，IMKit SDK 支持隐藏 RCMessageCell 子类消息 Cell 上的用户头像。详见会话页面。

最后于 更新