Customising an Existing Style

The easiest way to customise MessengerKit is to tweak an existing style to better match your needs/design. All themes in MessengerKit adhere to MSGMessengerStyle which features a number of standard properties, but styles can also choose to add additional properties.

/// Controls how the `MSGMessengerViewController` should be styled.
///
/// To define which cells should be used then a subclass of `MSGCollectionView` should be provided.
/// Custom cells can be registered there.
public protocol MSGMessengerStyle {

    /// The collection view class to use
    var collectionView: MSGCollectionView.Type { get }

    /// The input view class to use
    var inputView: MSGInputView.Type { get }

    /// The height of the header above the section
    var headerHeight: CGFloat { get }

    /// The height of the footer above the section
    var footerHeight: CGFloat { get }
    
    /// The background color of the messenger view
    var backgroundColor: UIColor { get }
    
    /// The background color of the input view.
    /// Not all styles take this into consideration.
    var inputViewBackgroundColor: UIColor { get }
    
    /// The font that should be used for incoming and outgoing bubbles
    var font: UIFont { get }
    
    /// The font that should be used within the input view
    var inputFont: UIFont { get }
    
    /// The placeholder that is displayed in the input view
    var inputPlaceholder: String { get }
    
    /// The color of text used in the input view
    var inputTextColor: UIColor { get }
    
    /// The color of text used by the placeholder in input view
    var inputPlaceholderTextColor: UIColor { get }
    
    /// The text color of outgoing messages
    var outgoingTextColor: UIColor { get }
    
    /// Color of links in the outgoing messages
    var outgoingLinkColor: UIColor { get }
    
    /// The text color of incoming messages
    var incomingTextColor: UIColor { get }
    
    /// Color of links on the incoming messages
    var incomingLinkColor: UIColor { get }

    /// Calculates the size of the cell for a given message
    ///
    /// - Parameter message: The message to calculate the size for
    /// - Returns: The size calculated
    func size(for message: MSGMessage, in collectionView: UICollectionView) -> CGSize
    
}

There are currently two included styles in MessengerKit: iMessage and travamigos. The style you wish to use is set on the MSGMessengerViewController by overriding the style property.

override var style: MSGMessengerStyle {
    var style = MessengerKit.Styles.iMessage
    style.headerHeight = 0
    style.inputPlaceholder = "Message"
    style.alwaysDisplayTails = true
    style.outgoingBubbleColor = .magenta
    style.outgoingTextColor = .black
    style.incomingBubbleColor = .green
    style.incomingTextColor = .yellow
    style.backgroundColor = .orange
    style.inputViewBackgroundColor = .purple
    return style
}

Here we've opted to use the built-in iMessage style and customised some of its settings. By setting the headerHeight or footerHeight to 0 it's completely hidden. Here's a look at what changing these properties has done to our view.

You may have also noticed that the send button has changed from the default blue to red. This is not done view the MSGMessengerStyle customisation but instead takes on the tintColor property that is set on MSGMessengerViewController. This can be set either manually in code or in interface builder as the property is an @IBInspectable.