跳到主要内容

消息展示样式

Global IM UIKit 支持通过两种方式修改会话页面中消息的展示样式。

  • 通过修改 RCMessageModel 的属性，更改消息 Cell 的展示样式。
  • 会话页面中需要展示的内置消息类型（详见消息类型概述）均提供了对应的展示模板（消息 Cell）。您可以可以按需创建自定义消息 Cell，替换默认模板。
提示

如果 App 创建了自定义消息类型（详见自定义消息类型），默认没有对应的消息展示模板。如果该自定义类型的消息需要展示在会话界面中，则应用程序必须创建对应的消息 Cell，并提供给 Global IM UIKit。

修改消息 Model 属性​

会话页面 model 是 RCMessageModel。通过修改 RCMessageModel 的以下属性可以更改消息 cell 的展示样式：

属性类型说明
alignmentRCMessageCellAlignment气泡对齐方式，默认发送方是 RCMessageCellAlignmentRight，接收方是 RCMessageCellAlignmentLeft
bubbleRadiusCGFloat气泡圆角，默认 10
bubbleColorUIColor气泡颜色
displayPortraitBOOL是否显示头像，默认只有群聊的接收方显示头像
displayNameBOOL是否显示名字，默认只有群聊的接收方显示名字

重写 RCChatViewController 的下面方法修改 RCMessageModel 的配置项：

- (void)listView:(RCMessageListView *)listView willLoadCell:(nonnull UITableViewCell *)cell forMessageModel:(nonnull RCMessageModel *)messageModel {
    messageModel.displayName = [TestKitConfigManager shared].displayGroupSelfName;
    messageModel.displayPortrait = [TestKitConfigManager shared].displayGroupSelfPortrait;
    messageModel.alignment = [TestKitConfigManager shared].alignment;
    messageModel.bubbleRadius = [TestKitConfigManager shared].bubbleRadius;
    messageModel.bubbleColor = HEXCOLOR(0x1BC953);
}

自定义消息展示模板​

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

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

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

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

继承 RCMessageBaseCell​

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

RCMessageBaseCell 结构图：

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

继承 RCMessageCell​

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

如果继承 RCMessageCell，请在初始化 Cell 时将在 messageContentView 上添加自定义控件。消息 cell 是自适应高度，所以只需要设置好自定义控件的 size。

设置视图布局和数据​

重写 RCMessageCell 或 RCMessageBaseCell 的设置 Cell 的视图布局和数据。

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

以 Global IM UIKit 的 RCFileMessageCell 中的 configure: 方法为例：

- (void)configure:(RCMessageModel *)model {
    [super configure: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 并绑定消息类型​

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

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

[self registerClass:[TestMessageCell class] forMessageClass:[TestMessage class]];
最后于 更新