Left alignment for message threads `MessageKit` swift

Question

I'm implementing a simple chat screen using MessageKit library. As you can see in the first screenshot, everything sounds normal, but what I am asked to do is to align all threads to the left (second screenshot). I tried to find a way to change the threads alignment, but I couldn't. I appreciate if anyone can help me to find the approach.

Here is some part of my code:

extension ConversationDataSource: MessagesDisplayDelegate {

    // MARK: - MessagesDisplayDelegate implementation

    func messageStyle(for message: MessageType, at indexPath: IndexPath,
                      in messagesCollectionView: MessagesCollectionView) -> MessageStyle {
        return .bubbleTail(isFromCurrentSender(message: message) ? .topRight : .topLeft, .curved)
    }

    func backgroundColor(for message: MessageType, at  indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return isFromCurrentSender(message: message) ? .aeroBlue : .white
    }

    func textColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return .black
    }

    func enabledDetectors(for message: MessageType, at indexPath: IndexPath,
                          in messagesCollectionView: MessagesCollectionView) -> [DetectorType] {
        return [.url, .address, .phoneNumber, .date]
    }

    func detectorAttributes(for detector: DetectorType, and message: MessageType,
                            at indexPath: IndexPath) -> [NSAttributedString.Key: Any] {
        // Project doesn't build with Xcode 10 without implementing this explicitly
        return [NSAttributedString.Key.foregroundColor: UIColor.darkText,
                NSAttributedString.Key.underlineStyle: NSUnderlineStyle.single.rawValue,
                NSAttributedString.Key.underlineColor: UIColor.darkText]
    }
}

P.S: Please don't mind the design, the alignment is the issue for now

score 1 · Answer 1 · answered Jan 23 '20 at 13:28

-> Make one function in MessagesDataSource

    public extension MessagesDataSource {
        func isFromUser1Custom(message: MessageType) -> Bool {
            if UserDefaults.standard.getChatStyle() == .Snapchat {
                return true
            }
            return message.sender.id == "user1"
        }
    }

Go MessagesCollectionViewFlowLayout


fileprivate extension MessagesCollectionViewFlowLayout {

    func avatarPosition(for attributes: MessageIntermediateLayoutAttributes) -> AvatarPosition {
        var position = messagesLayoutDelegate.avatarPosition(for: attributes.message, at: attributes.indexPath, in: messagesCollectionView)

        switch position.horizontal {
        case .cellTrailing, .cellLeading:
            break
        case .natural:
            position.horizontal = messagesDataSource.**isFromUser1Custom**(message: attributes.message) ? .cellLeading : .cellTrailing
        }

        return position
    }
}

Your ChatViewController

extension ChatViewController: MessagesDisplayDelegate {

    func messageStyle(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageStyle {
//do what you want to
        let corner: MessageStyle.TailCorner = isFromUser1Custom ? .bottomRight : .bottomLeft
            return  MessageStyle.bubbleTail(corner, .curved)
    }

}


extension ChatViewController: MessagesLayoutDelegate {

    func messagePadding(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIEdgeInsets {
        if isFromUser1Custom(message: message) {
            return UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 30)
        }
        else {
            return UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 4)
        }
    }

    func cellTopLabelAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LabelAlignment {
        if isFromUser1Custom(message: message) {
            return .messageLeading(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0))
        }
        else {
            return .messageTrailing(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10))
        }
    }

    func cellBottomLabelAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LabelAlignment {
        if isFromUser1Custom(message: message) {
            return .messageLeading(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0))
        } else {
            return .messageTrailing(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10))
        }
    }

    func cellTopupLabelAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LabelAlignment {

        if isFromUser1Custom(message: message) {
            return .messageLeading(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
        }
        else {
            return .messageTrailing(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
        }
    }
}

Left alignment for message threads `MessageKit` swift

1 Answers1