Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page.

When user clicks in the area, system opens user profile page

However, you can intercept the event and define your own logic following the example below.

Usage

To customize message cell layouts, please follow these instructions:

1. Create a subclass of UITableViewCell and conform it to AmityMessageCellProtocol

2. To bind message data to UI, implement display(message:). You can also implement height(for message:boundingWidth:) to specify the cell height. We've included some examples below for static-height calculation and dynamic-height calculation as reference

3. Subclass AmityEventHandler, and override its default functions channelDidTap(from:channelId:) and conform to AmityMessageListDataSource.

class CustomChannelEventHandler: AmityChannelEventHandler {
    
    override func channelDidTap(from source: AmityViewController, channelId: String) {
        let viewController = AmityMessageListViewController.make(channelId: channelId, settings: settings)
        viewController.dataSource = self
        source.navigationController?.pushViewController(viewController, animated: true)
    }
    
}

extension CustomChannelEventHandler: AmityMessageListDataSource {
    func cellForMessageTypes() -> [AmityMessageTypes : AmityMessageCellProtocol.Type] {
	// determine which cell represents for which message type.
        return [
            .imageIncoming: StaticHeightMessageCell.self,
	.textIncoming: DynamicHeightMessageCell.self
        ]
    }
}

4. Assign a class instance through a set function of AmityUIKitManager

AmityUIKitManager.set(channelEventHandler: CustomChannelEventHandler())

Customizing Cells with Different Layouts

Static-Height Cell Layout

You can use static-height cell layout types for static content, where the cell height is fixed and will not be scaled regardless of the data being received.

Below is an example of how you can configure a static-height cell layout. In this example, we're assuming that the image message is a class named StaticHeightMessageCell.

class StaticHeightMessageCell: UITableViewCell, AmityMessageCellProtocol {
    
    func display(message: AmityMessageModel) {
        // configure cell here, e.g. set message text to label.
    }
    
    static func height(for message: AmityMessageModel, boundingWidth: CGFloat) -> CGFloat {
        // Calculate the actualHeight by summing up all components height.
        let actualHeight: CGFloat = 34 + 228 + 34 // 296
        
        return actualHeight
    }
    
}

Dynamic-Height Cell Layout

You can use dynamic-height cell layout when you require your cell height to expand dynamically according to the data (e.g. label expands upon strings).

Dynamic-height cell layouts require more complexity in height calculation. Let's look at a text message as an example, where the height of the cell needs to expand dynamically to display the full content.

class DynamicHeightMessageCell: UITableViewCell, AmityMessageCellProtocol {
    
    func display(message: AmityMessageModel) {
        // configure cell here, e.g. set message text to label.
    }
    
    static func height(for message: AmityMessageModel, boundingWidth: CGFloat) -> CGFloat {
        
        // (1) Calculate the width that is reserved by other components.
        let reservedWidth: CGFloat = 12 + 40 + 12 + 8 + 8 + 76 // 156
        
        // (2) Calculate the maximum possible width that content can fit in.
        //
        // A `boundingWidth` is a width that returns from table view. In this example is 375.
        // To get the possible with. We need to subtract it by (1).
        let possibleWith: CGFloat = boundingWidth - reservedWidth // 375 - 156 = 210
        
        // (3) Calculate the content height using font and string.
        let messageHeight = message.text?.height(withConstrainedWidth: possibleWith, font: AmityFontSet.body) ?? 0.0
        
        // (4) Calculate the height that is reserved by other component.
        let reservedHeight: CGFloat = 34 + 8 + 8 + 34 // 84
        
        // (5) Calculate the actualHeight by summing up (3) and (4).
        let actualHeight: CGFloat = messageHeight + reservedHeight
        
        return actualHeight
    }
    
}