tencent cloud

Feedback

Last updated: 2024-01-31 12:27:10
    This document describes how to set the UI styles for iOS.

    Setting profile photo styles

    Setting the default profile photo

    When displaying a user, TUIKit reads the URL of the user's profile photo from the user's profile and displays the profile photo. If the user does not set a profile photo, the default profile photo is displayed. You can customize the default profile photo before TUIKit initialization. The following is a code sample:
    TUIConfig *config = [TUIConfig defaultConfig];
    // Modify the default profile photo
    config.defaultAvatarImage = [UIImage imageNamed:@"your image"];
    // Modify the default group profile photo
    config.defaultGroupAvatarImage = [UIImage imageNamed:@"your group image"];
    // Display the 3x3 grid display of group profile photos
    config.enableGroupGridAvatar = NO;
    Note:
    The default profile photo of a group is a 3 x 3 grid consisting of group members' profile photos. If the 3 x 3 grid fails to be generated or the group contains only one member, TUIKit displays defaultGroupAvatarImage as the group profile photo. You can disable the display of the 3 x 3 grid consisting of group members' profile photos as needed.

    Setting the profile photo shape

    TUIKit provides three types of profile photo shapes: rectangle with right-angle corners, round, and rectangle with rounded corners.
    typedef NS_ENUM(NSInteger, TUIKitAvatarType) {
    TAvatarTypeNone, /*Rectangle with right-angle corners*/
    TAvatarTypeRounded, /*Round*/
    TAvatarTypeRadiusCorner, /*Rectangle with rounded corners*/
    };
    You can customize the profile photo shape before TUIKit initialization. The following is a code sample:
    TUIConfig *config = [TUIConfig defaultConfig];
    // Change the profile photo type to a rectangle with rounded corners of 5 degrees
    config.avatarType = TAvatarTypeRadiusCorner;
    config.avatarCornerRadius = 5.f;

    Setting the Chat UI Styles

    Setting the chat UI background color

    You can customize chat UI background color before TUIKit initialization. The following is a code sample:
    [TUIChatConfig defaultConfig].backgroudColor = [UIColor greenColor];

    Setting the chat UI background image

    You can customize chat UI background image before TUIKit initialization. The following is a code sample:
    [TUIChatConfig defaultConfig].backgroudImage = [UIImage imageNamed:@"your chat background image"];

    Setting the Message Bubble Style

    The following figure shows how message views are combined in the chat UI:
    

    Setting message fonts and colors

    Text message data comes from the TUITextMessageCellData class, whose API allows you to modify the fonts and colors of text messages. You can customize message fonts and colors before TUIKit initialization. The following is a code sample:
    // Set the font and color of sent text messages
    [TUITextMessageCellData setOutgoingTextFont:[UIFont systemFontOfSize:20]];
    [TUITextMessageCellData setOutgoingTextColor:[UIColor blueColor]];
    // Set the font and color of received text messages
    [TUITextMessageCellData setIncommingTextFont:[UIFont systemFontOfSize:20]];
    [TUITextMessageCellData setIncommingTextColor:[UIColor purpleColor]];

    Setting bubble background images

    The image displayed in the bubble cell is obtained from TUIBubbleMessageCellData. The object provides a class method to set bubble background images. You can customize bubble background images before chat UI initialization. The following is a code sample:
    // Set sent-message bubbles, including the common and selected states
    [TUIBubbleMessageCellData setOutgoingBubble:[UIImage imageNamed:@"outgoing_bubble"]];
    [TUIBubbleMessageCellData setOutgoingHighlightedBubble:[UIImage imageNamed:@"outgoing_bubble_highlighted"]];
    // Set received-message bubbles, including the common and selected states
    [TUIBubbleMessageCellData setIncommingBubble:[UIImage imageNamed:@"incoming_bubble"]];
    [TUIBubbleMessageCellData setIncommingHighlightedBubble:[UIImage imageNamed:@"incoming_bubble_highlighted"]];

    Setting bubble margins

    In TUIKit, text and voice messages are displayed in bubbles. TUIMessageCellLayout provides a class method bubbleInsets to set bubble margins. You can customize bubble margins before chat UI initialization. The following is a code sample:
    // Set the margins for sent-message bubbles
    [TUIMessageCellLayout outgoingTextMessageLayout].bubbleInsets = UIEdgeInsetsMake(20, 20, 24, 24);
    // Set the margins for received-message bubbles
    [TUIMessageCellLayout incommingTextMessageLayout].bubbleInsets = UIEdgeInsetsMake(20, 20, 24, 24);

    Setting the sender's profile photo style

    To set the sender's profile photo style, you can modify related properties of TUIMessageCellLayout. You can customize the profile photo style before chat UI initialization. The following is a code sample:
    // Set the sender's profile photo size and position
    [TUIMessageCellLayout outgoingTextMessageLayout].avatarSize = CGSizeMake(80, 80);
    [TUIMessageCellLayout outgoingTextMessageLayout].avatarInsets = UIEdgeInsetsMake(10, 10, 20, 20);
    // Set the receiver's profile photo size and position
    [TUIMessageCellLayout incommingTextMessageLayout].avatarSize = CGSizeMake(80, 80);
    [TUIMessageCellLayout incommingTextMessageLayout].avatarInsets = UIEdgeInsetsMake(10, 10, 20, 20);
    Caution:
    For other message types, obtain the corresponding layout instances to set the profile photo sizes and positions.

    Setting the Message Nickname Style

    To set the sender's nickname font and color, you can modify related properties of TUIMessageCellLayout. You can customize the message nickname style before chat UI initialization. The following is a code sample:
    // Set the sender's nickname font and color for received messages
    [TUIMessageCellData setIncommingNameFont:[UIFont systemFontOfSize:20]];
    [TUIMessageCellData setIncommingNameColor:[UIColor blueColor]];
    // Set your own nickname font and color. By default, your own nickname is not displayed.
    [TUIMessageCellData setOutgoingNameFont:[UIFont systemFontOfSize:20]];
    [TUIMessageCellData setOutgoingNameColor:[UIColor purpleColor]];
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support