Card view for iOS
The card view feature is a UI component designed to enhance chat interfaces by organizing messages into cards. In UI design, a 'card' is a rectangular box that contains and displays a piece of related information cohesively, like a single chat message or a group of messages. This layout not only makes information presentation cleaner and more structured but also allows for greater user engagement and improved aesthetics. The cards are customizable, supporting integration of images, text, and interactive elements, and can be easily adapted to match your brand's style. This page guides you to implement custom message views such as a card view, in chat applications using Sendbird UIKit for Chat.
The minimum requirements for iOS are:
Sendbird Chat SDK 4.12.2
Sendbird Chat UIKit 3.11.0
Implement the card view UI
You can implement the card view UI to your app by following the steps below.
Step 1 Configure a CustomViewFactory
First, create a custom view class that inherits from
UIView. Then, define a
Model object implementing
Decodable. This model will decode the data from the
custom_view field in
The next step is to create a
CustomViewFactory. Implement the
SBUExtendedMessagePayloadCustomViewFactory protocol, and override the
makeCustomView(_ data, message) method. Also, you can optionally override
configure(with, cell) to replace the message bubble area with the
custom view as shown in the example below.
Note: If you set the data type in the overridden method as shown in the code above, it should automatically be decoded via
type inference. If parsing doesn't seem to work properly, check the
console log. The console log will show why parsing fails.
Step 2 Create custom UserMessageCell and setup
Define a custom cell class by inheriting from
SBUUserMessageCell. Then, override the
extendedMessagePayloadCustomViewFactory property to return the factory created above.
Step 3 Register custom UserMessageCell in Module list
Register the custom user message cell created by
configure(delegate, dataSource, theme) in the Module List. This must be done before
Then, override the
generateCellIdentifier(by) method for cell reuse.
Step4 Update SBUModuleSet with custom module list
You can access
SBUModuleSet.GroupChannelModule and update its
listComponent using the custom module list class.