Message Display Style

Global IM UIKit supports modifying the display style of messages in the conversation page through two methods.

• By modifying the properties of RCMessageModel, you can change the display style of the message cell.
• The built-in message types (see Message Type Overview) that need to be displayed in the conversation page all provide corresponding display templates (message cells). You can create custom message cells as needed to replace the default templates.

tip

If the app creates a custom message type (see Custom Message Type), there is no corresponding message display template by default. If this custom type of message needs to be displayed in the conversation interface, the application must create the corresponding message cell and provide it to Global IM UIKit.

Modifying Message Model Properties

The conversation page model is RCMessageModel. You can change the display style of the message cell by modifying the following properties of RCMessageModel:

Property	Type	Description
alignment	RCMessageCellAlignment	Bubble alignment, default sender is RCMessageCellAlignmentRight, receiver is RCMessageCellAlignmentLeft
bubbleRadius	CGFloat	Bubble corner radius, default is 10
bubbleColor	UIColor	Bubble color
displayPortrait	BOOL	Whether to display the avatar, default is only for group chat receivers
displayName	BOOL	Whether to display the name, default is only for group chat receivers

Override the following method in RCChatViewController to modify the configuration items of 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);
}

Customizing Message Display Templates

Global IM UIKit controls the display style of messages in the conversation page through "Message Display Templates". All message templates in Global IM UIKit inherit from RCMessageCell. The app can modify the display template of a specified type of message as needed to achieve personalized configuration of the message display style.

• The SDK provides display templates for built-in message types (see Message Type Overview) that need to be displayed in the conversation page by default. The app can create templates as needed to replace the default templates.
• Custom message types (see Custom Message Type) created by the app do not have corresponding message display templates by default. If the app needs to display this custom type of message in the conversation interface, it must create the corresponding message display template and provide it to the SDK. Otherwise, the SDK cannot display this type of message normally.

If you need to change the display effect of the SDK's built-in messages and have high customization requirements, you can inherit RCMessageCell, create a new message display template, and provide this custom template to the SDK to replace the SDK's default template.

All message cells in the conversation page of Global IM UIKit inherit from RCMessageCell. You can create custom message cells to control the display form of messages in the conversation page. Custom cells can inherit from RCMessageCell or RCMessageBaseCell.

Inheriting RCMessageBaseCell

RCMessageBaseCell is the parent class of RCMessageCell and does not support displaying avatars and nicknames.

RCMessageBaseCell structure diagram:

If inheriting RCMessageBaseCell, add custom controls on baseContentView when initializing the cell.

Inheriting RCMessageCell

RCMessageCell inherits from RCMessageBaseCell and adds the ability to display avatars and nicknames.

If inheriting RCMessageCell, add custom controls on messageContentView when initializing the cell. The message cell is self-adaptive in height, so only the size of the custom controls needs to be set.

Setting View Layout and Data

Override the RCMessageCell or RCMessageBaseCell to set the view layout and data of the cell.

- (void)configure:(RCMessageModel *)messageModel {
    [super configure:messageModel];
    // Modify layout and data
}

Take the configure: method in RCFileMessageCell of Global IM UIKit as an example:

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

Registering Message Cell and Binding Message Type

You need to register the custom message cell with Global IM UIKit and bind it to the message type. The bound message type can be a built-in message type or a custom message type created by the app developer. If a built-in message type is bound, the default message cell will be replaced.

For how to create custom message types, see Creating Custom Messages and Registering Custom Messages. If you create a custom message type and need to display it in the conversation interface, you must create the corresponding message display template; otherwise, the SDK cannot display this type of message normally.

[self registerClass:[TestMessageCell class] forMessageClass:[TestMessage class]];