Skip to main content

Customizing Message Display Styles

The IMKit SDK controls message display styles in the chat UI through message display templates. All message templates in IMKit inherit from RCMessageCell. You can modify display templates for specific message types to achieve personalized message styling.

  • The SDK provides default display templates for built-in message types (see Message Type Overview) in the chat UI. You can create custom templates to replace the defaults as needed.
  • Custom message types (see Custom Message Types) don't have default display templates. If you need to display custom message types in the chat UI, you must create corresponding display templates. Otherwise, the SDK won't display these messages properly.

Modifying Message Background Colors​

Replacing Message Background Images via Bundle Resources​

IMKit displays messages with bubble backgrounds—blue for sent messages and white for received messages.

bubble

Partial resources in RongCloud.bundle:

Resource NameDescription
chat_from_bg_normalBackground for received messages.
chat_to_bg_normalBackground for sent messages.
chat_to_bg_whiteSpecial background for location, business card, and file messages.

Note the stretch positions. The SDK uses these stretch ratios:

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

Modifying Font Colors or Sizes for Built-in Text Messages​

The IMKit SDK supports global configuration for text font sizes. Use the RCKitConfigCenter macro (or [RCKitConfig defaultConfig]) to modify IMKit settings. See [RCKitFontConf.h] for more configuration options.

// Secondary title (default fontSize: 17 for text messages, quoted content, conversation list titles)
RCKitConfigCenter.font.secondLevel = 20;

To modify font colors, override the willDisplayMessageCell method in the conversation view controller and adjust cell control colors based on message types. See Page Event Listeners.

Replacing Default Display Templates for Built-in Messages​

IMKit encapsulates display templates for each message type. All display templates inherit from RCMessageCell.

By default, IMKit uses RCTextMessageCell to display RCTextMessage content. RCTextMessageCell renders UI synchronously, which may affect chat UI smoothness in certain scenarios:

  • Complex text messages with lengthy content
  • Text messages with multiple line breaks

Starting from v5.2.5, IMKit supports replacing RCTextMessageCell with the asynchronous RCComplexTextMessageCell for better performance with complex text displays, reducing lag and load times.

Override the registerCustomCellsAndMessages method in RCConversationViewController to manually register RCComplexTextMessageCell. Once registered, RCComplexTextMessageCell will replace RCTextMessageCell for text messages.

// Register custom messages and cells
- (void)registerCustomCellsAndMessages {
    [super registerCustomCellsAndMessages];

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

Creating Custom Message Display Templates​

To display custom message UIs, create new display templates by subclassing RCMessageCell, then bind them to custom message types.

All message cells in IMKit inherit from RCMessageCell. You can create custom cells to control message display in the chat UI. Custom cells can subclass either RCMessageCell or RCMessageBaseCell.

1. Create Custom Cells​

Subclassing RCMessageBaseCell​

RCMessageBaseCell is the parent class of RCMessageCell and doesn't support avatars or nicknames.

RCMessageBaseCell structure:

When subclassing RCMessageBaseCell, add custom controls to baseContentView during initialization.

Subclassing RCMessageCell​

RCMessageCell inherits from RCMessageBaseCell and adds avatar and nickname display capabilities.

When subclassing RCMessageCell, add custom controls to messageContentView during initialization. Adjust messageContentView's contentSize according to custom control dimensions.

2. Return Custom Cell Size​

Override this method in RCMessageCell or RCMessageBaseCell to return cell size:

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

Parameters​

ParameterTypeDescription
modelRCMessageModelThe message model to display
collectionViewWidthCGFloatWidth of the collectionView containing the cell
extraHeightCGFloatHeight outside the cell's content area (total height of red arrows in the cell structure diagram). The returned cell's size.height equals height + extraHeight, while size.width equals collectionViewWidth

3. Configure Layout and Data​

Override setDataModel: in RCMessageCell or RCMessageBaseCell to configure cell layout and data. Adjust messageContentView's contentSize to prevent display issues.

- (void)setDataModel:(RCMessageModel *)model {
    [super setDataModel:model];
    // Configure layout and data
}

Example from IMKit's RCFileMessageCell:

- (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. Register Message Cells and Bind Message Types​

Register custom message cells with IMKit and bind them to message types (either built-in or custom). Binding to built-in types replaces their default cells.

tip

For creating custom message types, see Creating and Registering Custom Messages. Custom message types require corresponding display templates for proper UI rendering.

For IMKit ≥ 5.2.4, override registerCustomCellsAndMessages in the conversation view controller to register custom cells:

- (void)registerCustomCellsAndMessages {
    [super registerCustomCellsAndMessages];
    ///Register custom test message cell
    [self registerClass:[RCDTestMessageCell class] forMessageClass:[RCDTestMessage class]];
}

For IMKit < 5.2.4, register custom cells in the conversation view controller's viewDidLoad:

[self registerClass:[RCDTestMessageCell class] forMessageClass:[RCDTestMessage class]];
tip

Reference implementations: SealTalk's RCDTestMessage.m and RCDTestMessageCell.m.

Hiding User Avatars in Message Cells​

By default, IMKit SDK displays user avatars. Starting from v5.3.0, you can hide avatars for RCMessageCell subclasses. See Conversation Page.

Last updated on