# Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open [User profile page](https://docs.social.plus/social-plus-uikit/uikit-3/ios/community/components/user-profile-page). 

![When user clicks in the area, system opens user profile page ](https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MX0mOAVWkotGme0iRzu%2F-MX6l-BBaEWfUmnDrh1O%2F-MX6l92U7B6vflWqP1_Y%2Fimage%20\(36\).png?alt=media\&token=d3977185-6e30-4f02-bc2e-b2dadf1066bf)

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](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-iOS/releases/tag/2.18.0) 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`.

```swift
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`

```swift
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`.

![](https://lh6.googleusercontent.com/FCF-5HPRlTT6WkqyPpGQrppxR-1dyEUBxv6Eh8KWBJJXFa2WU_2STr3pEKZSzHj68mNxeeBctK7MvR4nZiFNQYr-KcSIMYunfHzYpXbl8i6-b88zNCFbiE7CgjTUDei3j-C05iYQsvGyvW4B8g)

```swift
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.

![](https://lh3.googleusercontent.com/zHf_ahzIHMVfMN5lOOSya4GVXBAB6M6DFYJR45D6um9yBqsAjYuRjAvf7Zy3chtalrt7qN4aNCKDA1hL2l_P-bMLESP49Y9lIFuBmBr8scGWNhOly97a3LTAneT2OxJ1wKbdqrvI-QeCZ73Npg)

```swift
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
    }
    
}
```