iosswiftlayoutchatmessagekit

How to set maximum width of message bubbles in MessageKit

I have been using MessageKit for my live chat feature for my application. One of the issues I am running into is that long messages just look very weird on the screen as the width of the bubbles doesn't seem to be restricted. I wanted to figure out a way to be able to set the maximum width of the chat bubbles so that they format more like a text conversation on the native imessage application.

Currently my messages look like this, but I would want the message below to be less wide and taller: enter image description here

Solution

  • You can adjust the right/left padding for incoming/outgoing messages respectively.

    The default padding is:

    public var incomingMessagePadding = UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 30)
public var outgoingMessagePadding = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 4)

    And you can set the padding on the layout object in your messages view controller like this:

    let layout = messagesCollectionView.collectionViewLayout as? MessagesCollectionViewFlowLayout
layout?.setMessageIncomingMessagePadding(UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 50))
layout?.setMessageOutgoingMessagePadding(UIEdgeInsets(top: 0, left: 60, bottom: 0, right: 4))

    You can see more examples of layout changes in the AdvancedExampleViewController in the MessageKit example project.