跳到主要内容

修改消息的展示样式

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

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

修改消息的颜色背景​

通过替换 Bundle 资源替换消息背景图​

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

bubble

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

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

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

Objective C
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][RCKitFontConf.h] 了解更多配置。

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

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

以下示例在消息 Cell 即将显示时，根据 Cell 类型分别修改头像样式、文本颜色和图片边框：

Objective C
- (void)willDisplayMessageCell:(RCMessageBaseCell *)cell atIndexPath:(NSIndexPath *)indexPath {
    [super willDisplayMessageCell:cell atIndexPath:indexPath];

    // 修改带头像消息 Cell 的头像样式。
    if ([cell isKindOfClass:[RCMessageCell class]]) {
        RCMessageCell *messageCell = (RCMessageCell *)cell;
        messageCell.portraitStyle = RC_USER_AVATAR_CYCLE;
    }

    // 修改文本消息的字体颜色。
    if ([cell isKindOfClass:[RCTextMessageCell class]]) {
        RCTextMessageCell *textCell = (RCTextMessageCell *)cell;
        textCell.textLabel.textColor = [UIColor redColor];
    }

    // 修改图片消息的边框。
    if ([cell isKindOfClass:[RCImageMessageCell class]]) {
        RCImageMessageCell *imageCell = (RCImageMessageCell *)cell;
        imageCell.pictureView.layer.borderWidth = 2;
        imageCell.pictureView.layer.borderColor = [UIColor redColor].CGColor;
    }
}
注意

不要在 willDisplayMessageCell:atIndexPath: 方法中直接修改文本字体大小，否则可能导致 Cell 布局异常。如需修改文本字体大小，请使用上文介绍的 RCKitConfigCenter.font 全局配置。

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

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

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

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

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

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

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

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

自定义消息展示模板​

如果您需要展示自定义消息的 UI，您可以继承 RCMessageCell，创建新的消息展示模板，并将该自定义模板与自定义消息绑定并提供给 SDK，。

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

1. 创建自定义 Cell​

继承 RCMessageBaseCell​

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

RCMessageBaseCell 结构图：

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

继承 RCMessageCell​

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

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

2. 返回自定义 Cell 的 Size​

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

Objective C
+ (CGSize)sizeForMessageModel:(RCMessageModel *)model
      withCollectionViewWidth:(CGFloat)collectionViewWidth
         referenceExtraHeight:(CGFloat)extraHeight;

参数说明​

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

3. 设置视图布局和数据​

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

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

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

Objective C
- (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];
}

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

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

提示

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

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

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

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

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

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

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

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