This document describes how to set styles on iOS.
To display a user on the interface, TUIKit reads the profile photo URL from the user’s profile and displays the profile photo. If the user has not set a profile photo, the default profile photo is displayed.
You can set a custom image as the default profile photo.
TUIKitConfig *config = [TUIKitConfig defaultConfig];
// Modify the default profile photo
config.defaultAvatarImage = [UIImage imageNamed:@"Your Image"];
// Modify the default group profile photo
config.defaultGroupAvatarImage = [UIImage imageNamed:@"Your Image"];
There are three profile photo types available: rectangle, rounded, and rounded rectangle.
typedef NS_ENUM(NSInteger, TUIKitAvatarType) {
TAvatarTypeNone, /*Rectangle profile photo*/
TAvatarTypeRounded, /*Rounded profile photo*/
TAvatarTypeRadiusCorner, /*Rounded rectangle profile photo*/
};
You can modify the profile photo type in the same way you modify the default profile photo. The following is a code sample:
TUIKitConfig *config = [TUIKitConfig defaultConfig];
// Set rounded rectangle profile photo, with a corner radius of 5
config.avatarType = TAvatarTypeRadiusCorner;
config.avatarCornerRadius = 5.f;
The following figure shows how different views are arranged on the chat interface:
TUIChatController *vc = ...; // Get the chat interface object.
vc.messageController.view.backgroundColor = [UIColor greenColor];
The images displayed in the bubble cells are obtained from TUIBubbleMessageCellData, which provides class methods to set the images.
// Set the outgoing bubble, which can be in normal status or highlighted status. The incoming bubble is set in the same way.
[TUIBubbleMessageCellData setOutgoingBubble:[UIImage imageNamed:@"bubble"]];
[TUIBubbleMessageCellData setOutgoingHighlightedBubble:[UIImage imageNamed:@"bubble_highlight"]];
In TUIKit, text and audio messages are displayed in bubbles. TUIMessageCellLayout provides class methods to set bubbleInsets.
// Set the margins of the outgoing bubble. The incoming bubble is set in the same way.
[TUIMessageCellLayout outgoingTextMessageLayout].bubbleInsets = UIEdgeInsetsMake(10, 10, 20, 20);
The data of text messages comes from the TUITextMessageCellData class, through whose APIs you can modify the font and color of text messages.
// Set the font and color of outgoing text messages. The incoming text messages are set in the same way.
[TUITextMessageCellData setOutgoingTextFont:[UIFont systemFontOfSize:20]];
[TUITextMessageCellData setOutgoingTextColor:[UIColor redColor]];
A profile photo is a common element to every message. To set the size and position of the profile photo, you need to first obtain the layout
instance of the message. Take a text message as an example:
// Set profile photo size for the sender. The receiver’s profile photo is set in the same way.
[TUIMessageCellLayout outgoingMessageLayout].avatarSize = CGSizeMake(100, 100);
// Set the profile photo location for the sender. The receiver’s profile photo is set in the same way.
[TUIMessageCellLayout outgoingTextMessageLayout].avatarInsets = UIEdgeInsetsMake(10, 10, 20, 20);
For other messages, obtain their layout
instances to set the size and position of the profile photos.
Set the nickname font and color by modifying related properties in TUIMessageCellLayout in the same way the profile photo location is set.
// Set the nickname font for the receiver. The sender’s nickname is set in the same way, but it is not displayed by default.
[TUIMessageCellData setIncommingNameFont:[UIFont systemFontOfSize:20]];
[TUIMessageCellData setIncommingNameColor:[UIColor redColor]];
Clicking the "+" button next to the input box opens the More panel. By default, the More panel displays 4 options. You can add or delete options by modifying the moreMenus property in TUIChatController.
The following is a code sample to delete the File option:
TUIChatController *vc = [[TUIChatController alloc] initWithConversation:conv];
NSMutableArray *array = [NSMutableArray arrayWithArray:vc.moreMenus];
[array removeLastObject]; // Delete the last menu
vc.moreMenus = array; // Reset the property and apply it immediately
When the user clicks a button in the menu, TUIChatController notifies the upper layer with a callback event.
Note:
When the user clicks the default menu, you are also notified by a callback, but you do not need to process it.
Was this page helpful?