Sticker Messages

The Global IM UIKit chat UI includes a sticker button in the input box, which expands the sticker panel. If the sticker feature is not needed, this button can be hidden.

Usage

Important

By default, Global IM UIKit only provides the sticker display panel. The sticker resources need to be provided by the application to Global IM UIKit.

The sticker button is controlled by RCChatViewController's inputBar.stickerButton and is displayed by default.

The sticker panel is controlled by RCChatViewController's inputBar.stickerBoardView. When the sticker button is clicked, the sticker resources provided by the application layer are displayed, and users can click to send sticker messages.

Adding Sticker Packs

Applications can add custom stickers to the chat UI sticker panel in the following two ways.

Adding Sticker Packs via Local Path

Add a sticker pack JSON file via a local path.

The format is as follows:

{
  "stickerPackage": {
            "packageId": "c60plBGwk2686yv4vmv4H9",
            "icon": "base64Str"
  },
  "stickers": [
        {
            "stickerId": "d1PN1xTZ47p9nfMNWfGpyH",
            "height": 240,
            "width": 240,
            "icon": "base64Str"
        },
        {
            "stickerId": "euV-LiASA9Nax4eeRgVCbW",
            "height": 240,
            "width": 240,
            "icon": "base64Str"
        }
  ]
}

Parameter	Type	Description
packageId	String	Unique identifier for the sticker pack
stickerId	String	Unique identifier for the sticker
icon	String	Base64 string of the thumbnail

The stickerBoardView property of RCInputBar is the sticker panel. The sticker pack JSON file is loaded using the addPackagesWithJSONFilePaths: method of the sticker panel, which needs to be called in the viewDidLoad method of the chat UI.

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *path = [[NSBundle mainBundle] pathForResource:@"rong_sticker" ofType:@".json"];
    if (path) {
        [self.inputBar.stickerBoardView addPackagesWithJSONFilePaths:@[path]];
    }
}

Providing Sticker Packs via Delegate

Set the sticker delegate:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.inputBar.stickerBoardView.dataSource = self;
}

Implement the sticker delegate method:

#pragma mark - RCStickerDataSource -

- (void)willDisplayStickerPackageList:(void (^)(NSArray<RCStickerPackage *> * packages))completion {
/// Return the sticker pack list
  NSArray *packagelist;
  completion(packagelist);
}

Displaying Sticker Messages

Sticker messages are of type RCStickerMessage, and the message type identifier is RC:StkMsg:

@interface RCStickerMessage : RCMessageContent

/// Sticker pack ID
@property (nonatomic, strong) NSString *packageId;

/// Sticker ID
@property (nonatomic, strong) NSString *stickerId;

/// Sticker thumbnail
@property (nonatomic, strong) UIImage *thumbnailImage;

/// Sticker width
@property (nonatomic, assign) int width;

/// Sticker height
@property (nonatomic, assign) int height;

When displaying sticker messages, the sticker thumbnail thumbnailImage is displayed first. Then, the RCStickerDataSource delegate provides the local path of the sticker's original image to Global IM UIKit, which automatically refreshes the display after obtaining the local path.

#pragma mark - RCStickerDataSource -

- (void)willDisplayStickerWithPackageId:(NSString *)packageId stickerId:(NSString *)stickerId completion:(void (^)(NSString * localPath))completion {
    [[TestDefaultStickerManager shareDownloader] downloadWithURLString:packageId stickerId:stickerId progress:nil success:completion error:nil];
}

Hiding the Sticker Button

Sticker button:

@interface RCInputBar : UIView
/// Input box sticker button
@property (nonatomic, strong) UIButton *stickerButton;
@end

Code example:

- (void)viewDidLoad {
    [super viewDidLoad];
    /// Remove the sticker button
    [self.inputBar.stickerButton removeFromSuperview];
    /// Reset textView inset
    UIEdgeInsets inset = self.inputBar.textView.textContainerInset;
    inset.right = 0;
    self.inputBar.textView.textContainerInset = inset;
}